html, body  { margin:0; padding:0; }
body 		{ text-align:center; font-family: 'Varela Round', sans-serif; padding-bottom:50px; background-color:#f48243; }

h1 			{ background:url("../img/panorama.jpg") no-repeat center; background-size: cover; height:350px; margin:0 0 50px 0; padding-top:100px; }
h1 a		{ color:#afff00; font-family: 'Bowlby One SC', cursive; font-size:80px; margin-bottom:0; text-decoration:none; text-shadow: 2px 2px 5px #000000; 
				letter-spacing:0.05em; }


p 			{ margin:20px; }
ul 			{ margin:0; padding:0; }
li 			{ display:inline-block; max-width:45%; }
ul li a 			{ background:white; box-shadow: 5px 5px 15px -4px #666666; display:block; padding:10px; color:black; text-decoration:none; margin:10px; }
ul li a span 		{ display:block; padding-top:10px; }
img  				{ width:200px; max-width:100%; }

.back 			{ margin-bottom:15px; color:rgb(85, 26, 139); text-decoration: none; display:inline-block; }
.detail 		{ width:50%; margin:0 auto; text-align:left; background:white; padding:10px; overflow:auto; box-shadow: 5px 5px 15px -4px #666666; }
.detail img 	{ float:left; margin:0 20px 0 0; }

.description  	{ margin-top:50px; font-style: italic; }


@media (max-width:850px) {
	h1  	{ height:250px; }
	h1 a 		{ font-size:60px; }
	.detail 		{ width:75%; }
}
@media (max-width:700px) {
	h1  	{ height:200px; padding-top:80px; }
	h1 a 		{ font-size:50px; }
}
@media (max-width:500px) {
	h1  	{ height:150px; padding-top:60px; }
	h1 a 		{ font-size:40px; }
	.detail 		{ width:50%; }
	.detail img  { float:none; width:100%; margin:0; }
	.detail p 	 { margin-left:0; margin-right:0; }
}
@media (max-width:400px) {
	h1  	{ height:130px; padding-top:40px; }
	h1 a 		{ font-size:36px; }
	ul li a 	{ margin:5px; padding:5px; }
	
	.detail 		{ width:75%; }
}