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:1px solid #333;
	padding:.25em;
	text-align:center;
	background-color:white;
	position: -webkit-sticky;
	position:sticky;
	top:0;
	z-index:100;
}
#head a:link{
	color:#330066;
	text-decoration:none;
	font-weight:800;
}
#head a:visited{
	color:red;
	text-decoration:underline;
}
#head a:hover{
	color:#d9b3ff;
	text-decoration:underline;
}
#head a:active{
	color:red;
	text-decoration:underline;
}
#head a:focus{
	color:#d9b3ff;
	text-decoration:underline;
}
#side{
	width:15%;
	height:850px;
	background:tomato;
	float:left;
	border-right:1px solid black;
	box-sizing:border-box;
	padding:0.5vw;
	font-family: garamond, serif;
}
#main{
	width:70%;
	height:850px;
	background:red;
	float:left;
	padding:1vw;
	box-sizing:border-box;
	font-family:garamond, serif;
	font-weight:600;
}
.img1{
	max-width:100%;
	float:left;
}
.img2{
	max-width:100%;
	float:right;
}
.img3{
	max-width:100%;
	float:right;
}
.img4{
	max-width:100%;
	float:left;
	}
#right{
	width:15%;
	height:850px;
	background:#ccc;
	float:right;
	border-left:1px solid black;
	box-sizing:border-box;
	padding: 0.5vw;
	font-family: "Brush Script MT", cursive;
	font-size:25px;
	font-weight:600;
}
#right p{
	font-family:Times, 'Times New Roman', serif;
	font-size: 12px;
	font-weight:none;
}
#foot{
	clear:both;
	height:50px;
	background:#fff;
	border-top:1px solid black;
	text-align:center;
	padding:.5vw;
	box-sizing:border-box;
}
@media screen and (min-width:450px) and (max-width:900px){
	body{
		margin:0;
	}
	#all{
		width:90%;
	}
	#main{
		width:80%;
		height:700px;
		float:right;
	}
	#right{
		clear:both;
		height:100px;
		width:100%
	}
	#side{
		width:20%;
		height:700px
	}
	#foot{
		padding:.5vw;
	}
	.img1{
		max-width:50%;
		float:left;
	}
	.img2{
		max-width:50%;
		float:right;
	}
	.img3{
		max-width:10%;
		float:right;
	}
	.img4{
		max-width:25%;
		float:left;
	}
}
@media screen and (min-width:0px) and (max-width:449px){
	body{
		margin:0;
	}
	#all{
		width:100%;
		height:auto;
	}
	#head{
		height:70px;
		font-size:1.5e;
		border-bottom:1px solid #333;
		padding:.15em;
	}
	#side{
		width:100%;
		height:auto;
		border-right:none;
		float:none;
	}
	
	#main{
		width:100%;
		height:600px;
		float:none;
	}
	#right{
		width:100%;
		height:auto;
		float:none;
	}
	.img1{
		max-width:25%;
		float:left;
	}
	.img2{
		max-width:25%;
		float:right;
	}
	.img3{
		max-width:25%;
		float:right;
	}
	.img4{
		max-width:25%;
		float:left;
	}
}