body{
	background:black;
}
#all {
	width:100%;
	height:auto;
	background:#f4eeff;
	margin-left:auto;
	margin-right:auto;
}
#head {
	height:100px;
	font-size:1.5em;
	border:1px solid #333
	padding: 1em;
	text-align:center;
}	
#side {
	width:25%
	height:500px;
	background:#dcd6f7;
	float:left;
	box-sizing:border-box;
	border-right:2px solid grey;
	display:table;
	padding-right: 1em;
}	
#main {
	width:60%;
	height:500px;
	background:#a6b1e1;
	float:left;
	padding-left: 1em;
	padding-right: 1em;
	color: white;
}

#footer {
	clear:both;
	beight:100px;
	background:#424874;
	border-top:1px solid black;
	text-align:left;
	color: white;
}	
@media only screen and (min-width:450px) and (max-width:700px) {
	body{
		margin:0;
	}
	#all{
		width:90%;
	}
	#side {
		width:70%;
		float:right;
	}
	#main {
		clear:both;
		height:125px;
		width:100%;
	}
}
a:link{
		font-size:20px;
		color:#120ff5;
		font-weight:600;
}
a:visited{
		font-size:20px;
		color:purple;;
		font-weight:600;
}
a:hover{
		color:green;
		text-decoration:none;
}
a:active{
		color:green;
		text-decoration:none;
}
a:focus{
		color:green;
		text-decoration:none;
}