*{padding:0; margin:0; border:0}
body{ background-image: url('rajztanitas_hatter.jpg'); background-repeat: no-repeat; background-position: left top; background-size: 100%; background-color: black;
		font-family: Raleway;
		font-size: 100%;
		color:black }

a{ color: white }

div.clear { clear: both }

div#wrapper {width:800px; margin: 20px auto }

header {font-size:80%; font-weight: normal; font-family: "trebuchet MS";text-align: center; text-shadow: 1px 1px 1px white; color: Chinese Black}

header span{color: #ffb080600; font-size: 144%}

nav{height:10px; margin: 10px 0; padding: 10px 0; color: #000; background-color:rgba(0, 0, 35, 0) ; text-align: center; font-size: 100%; text-shadow: 1px 1px 1px white; box-shadow: } 
nav a{color: #080600; background-color: rgba(0, 0, 35, 0) ; background-size: 20px; font-size: 100%; margin: 0 5px; text-decoration: none; text-align: center; font-family: "Raleway"} 
nav a:first-child {margin-left: 20px }
nav a:hover {text-shadow: 3px 3px 3px #6d2a15;font-weight: bold;color: white}

section{width: 750px;
			float: left;
			margin: 0 10px 0 0;
			padding: 20px 20px 0 0;
			color: white;
			text-shadow: 2px 2px 2px #6d2a15;
			text-align: center;
			border-right: }
			
			section article{margin: 0 0 20px 0;}
			section article h1{margin: 0 0 2px 0;font-size: 150%; color:white; text-align: center; text-shadow: 2px 2px 2px #6d2a15}
			section article h2{width: 800px; margin: 0 0 10px 0;font-size: 150%; color: BLACK; text-align: center; text-shadow: 2px 2px 2px #6d2a15}
			section article h3{background-color: rgba(0, 0, 35, 0); width: 800px; margin: 0 0 10px 0;font-size: 100%; color: white; text-align: center; text-shadow: 2px 2px 2px #6d2a15}
			section article p {text-shadow: 2px 2px 2px #6d2a15; text-align: center; background-color: rgba(0, 0, 35, .5);line-height: 140%;font-size: 90% ;color:yellow}
			
aside{width: 200px; float: center; color: #ffb400;text-shadow: 2px 2px 2px #6d2a15; text-align: center; font-size: 130%}

figure{padding: 20px; background: ;margin: 0 0 20px 0}
figure img{max-width: 100%}
figure figcaption{font-style: italic; font-size: 80%; margin: 6px 0 0 0}

footer{width: 760px;text-align:center; margin: 20px auto; padding: 20px; background: rgba(129,63,21,0,5)}

@media only screen
and (min-width: 480px)
and (max-width: 800px){div#wrapper {width: 600px}
		body {background-image: url('rajztanitas_mobil_hatter.jpg'); background-size: 120%}
		header {font-size: 120%;text-align: center}
		nav {text-align: center}
		
		section {width:500px;font-size: 90%; text-align: center;}
		section article h1{text-align: center;}
		section article h2{width: 500px; font-size: 150%; color: #ffb400; text-align: center;}
		section article h3{background-color: rgba(0, 0, 35, 0); width: 500px; text-align: center;}
		aside {width:;font-size: 90%;}
		footer {width:560px}}
		
@media only screen
and (min-width: 320px)
and (max-width: 480px){div#wrapper {width: 400px}
		body {background-image: url('rajztanitas_mobil_hatter.jpg'); background-size: 130%}
		header {font-size: 110%; text-align: center}
		nav a{text-align: center}
		section {width: 400px; margin: 0; padding: 5px; margin: 0;text-align: center;font-size: 80%;}
		section article h1{text-align: center;}
		section article h2{width: 400px; font-size: 80%; color: #ffb400; text-align: center;}
		section article h3{background-color: rgba(0, 0, 35,0); width: 400px; text-align: center;}
		
		aside {display: none}
		footer {width: 360px}}