body {
	background:#555;
}
#all{
	width:80%;
	height:auto;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
}
#head{
	height:60px;
	font-size:1.25em;
	border-bottom:1 px solid #333;
	padding:.25em;
	text-align:center;
	position:-webkit-sticky;
	position:sticky;
	top:0;
	font-family:'Courier New', Courier, monospace;
}
#head a:link{
		color:#efdb9c; /*light color */
		text-decoration:none;
}
#head a:active{
		color:#23e198; /*green color */
		text-decoration:underline;
}
#head a:hover{
		color:#44caeb; /*blue color */
		text-decoration:underline;
}
#head a:visited{
		color:rgb(224, 45, 147); 
		text-decoration:underline;
}
#head a:focus{
		color:#eb6344; 
		text-decoration:underline;
}
#side{
	width:20%;
	height:600px;
	background:#C0F7F2;
	float:right;
	border-right:1px solid black;
	box-sizing:border-box;
	font-family:'Courier New', Courier, monospace;
}
#main{
	width:60%;
	height:600px;
	background:#cfedf2;
	float:left;
	font-family:'Courier New', Courier, monospace;
}
#right{
	width:20%;
	height:600px;
	background:rgb(188, 242, 226);
	float:right;
	font-family:'Courier New', Courier, monospace;
}
img {
	max-width:40%;
 
	
}
#foot{
	clear:both;
	height:50px;
	background:rgb(164, 184, 250);
	border-top:1px solid #333;
	text-align:center;
	font-family:'Courier New', Courier, monospace;
	float:left;
}
@media only screen and (min-width:450px) and (max-width:800px){
	body{
		margin:0;
	}
	#all{
	width:90%;
}
#main{
	width:80%;
	float:right;
}
#right{
	float:none;
	clear:both;
	width:100%;
	height:100px;
}
}
@media only screen and (min-width:0px) and (max-width:449px){
	body{
		margin:0;
		
	}
	#all{
	width:100%;
}
#head{
	height:50px;
	font-size:1.1em;
	padding:.15em;
}
#side{
	width:100%;
	height:auto;
	float:none;
}
#main{
	width:100%;
	height:auto;
	float:none;
}
#right{
	height:60px;
	width:100%;
}
}