body.font{
	font-family:Sans-serif;
	}
				
div.WebContainer{
	background-color:#435CA8;
	width: 100%;
	height: 30px;
	}
	
div.header{

	width: 100%;
	height: 30px;
}	
				
div.WebBody{
	background-color:#8193CD;
	width: 100%;
	height: 70%;
	}
	
div.WebBottom{
	padding-top: 0.5px;		
	background-color:#435CA8;
	width: 100%;
	height: 10%;
	}	
			
a{
	text-decoration:none;
	}
			
span.Box{
	border: 1px solid black;
	background-color: #7B9CE5;
	padding: 2px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom:9px;
	color:white;
	}
			
span.Box:hover{
	background-color: #466FB8;
	transition: 1s ease;
	}
			

					
.border{
	border-style: solid;
	border-width: 1px;
	padding: 1px;
	background-color:#C4CFEF;				
	}

.List{
	border: 1px solid black;
	background-color: #7B9CE5;
	vertical-align: middle;
	padding: 2px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom:9px;
	padding-top:9px;
	color:white;
	}	
.List:hover{
	background-color: #466FB8;
	transition: .3s ease;
}
.hide{
	visibility: hidden;
	margin-left: 15%;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	}
				
.List:hover + .hide {
	background: rgb(36, 35, 35);
	visibility: visible;
	}
table.hobby{	
	border: 3px solid red;
	border-collapse: collapse;
	}
				
th, td.hobby {
	border: 3px solid black;
	}
			
td.hobby:hover{
	background-color:#A1ABC8;
	transition: 0.5s ease;
	}

.logo{
	width:140px;
	height:140px;
	
	transition: width 3s ease, height 3s ease, transform 4s ease;
}
.logo:hover{
	width:300px;
	height:300px;
	transform: rotate(360deg);


}