body 
{background-color: #6699FF ;
background-image: url(gradientblue.jpg); 
color: #D5E3FF;
font-family: Arial; 
box-sizing: border-box;}
header
{background-color: #000066;
color: #FFFFFF;
text-align: center;}
#wrapper 
{width: 80%;
min-width: 700px; 
max-width: 1024px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
color: #000066;
}
h1
{text-align:center; 
border:none;
text-shadow: #CCCCCC;
font-size: 3em;
padding: 10px;
line-height: 150%;
}
main
{margin-left: 180px;
padding: 20px 20px;
}
nav
{font-weight: bold;
float: left;
width: 150px;
}
nav ul
{list-style-type: none;
margin-left: 0;
padding: 10px;}
nav a
{text-decoration: none;}
nav a:link
{color: #3262A3}
nav a:visited
{color: #6699FF}
nav a:hover
{color: #CCCCCC}
.catergory
{font-weight: bold;
background-color: #FFFFFF;
color: #003366;
font-size: 1.1em; 
text-shadow: 1px 1px 1px #667;
}
#mobile{display: none}
#desktop{display: inline}
@media only screen and (max-width: 1024px){
body { margin: 0; padding: 0; background-property: none; background-color: #FFFFFF;}
#wrapper {width: auto; margin: o; min-width: 0;}
h1 {margin: o; font-size: 1.8em; line-height: 200%;}
nav {float: none; width: auto;}
nav li { display: inline-block}
nav a {font-size: 1.2em; padding: 0;}
nav ul {text-align: center; padding: 0; margin: 0;}
main {margin: 0; padding-left: 2em; font-size: 90%;}
footer {margin: 0}
}
@media only screen and (max-width: 768px) {
header {background-image: url(lilfish.gif);
background-position: center;
background-repeat: no-repeat;}
h1 { font-size: 1.5em; line-height: 120%;}
nav a { display: none; padding: 0.2em; font-size: 1.3em; border-bottom: 1px #330000;}
nav li { display: block}
nav ul { text-align: left}
main {padding-left: 1em}
.catergory { text-shadow: none}
#mobile {display: inline}
#desktop {display: none}
}
footer
{font-size: 0.70em;
font-style: italic;
text-align:left;
padding: 10px;
margin-left: 180px;
background-color: #FFFFFF 
}
header, nav, main, footer { display: block; }