header, main, nav, footer, figure, figcaption, aside, section, article
{display:block;}
body { background-color: #F5F5DC;
      color: #2E0000;
	  font-family: Verdana, Arial, sans-serif; 
	    background-image: url(javabackground.webm);
}
#wrapper { width: 80%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #E2D2B0;
		   min-width: 960px;
		   max-width: 2048px;
		   box-shadow: 5px 5px 5px #2E0000;
}
header { background-color: #D2B48C;
}
h1 {  font-family: Georgia, "Times New Roman", serif;
height: 100px;
    background-image: url(javalogo.webm);
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin: 0;  }
nav { font-weight: bold; 
	  padding: 10px;
	  float: left;
	  width: 160px;
	  text-align: center;
}
nav ul { list-style-type: none;
       padding-left: 0;
	   font-size: 1.2em;
}
nav a{ text-decoration: none; }
nav a:link { color: #795240; }
nav a:visited { color: #A58366; }
nav a:hover { color: #F5F5DC; }
main { padding: 20px; 
      display: block;
	  background-color: #F5F5DC;
	  margin-left: 175px;}
main img { float: left;
         padding-right: 2em;
}
main div { overflow: auto;
           padding-left: 5%;
		   padding-right: 5%;
		   font-size: 90%;
}
h2 {  font-family: Georgia, "Times New Roman", serif;  }
h3 {  background-color: #E6D6A9;
     text-transform: uppercase; }
dt { font-weight: bold; }
main ul { list-style-image: url(marker.webm);
        list-style-position: inside; }
#hero { background-image: url(heroroad.webp);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   color: #F5F5DC;
}
section { margin-left: 20%;
         margin-right: 20%;
    overflow: auto;
    font-size: 90%;
}
footer { background-color: #D2B48C;
       color: #000000;
	   font-size: .60em;
	   font-style: italic;
	   text-align: center;
	   padding: 10px;
}	
footer a:link { color: #2E0000; }
footer a:visited { color: #000000; }
footer a:hover { color: #F5F5DC; }
#mobile
{display: none;}
#desktop
{display: inline;}
@media only screen and (max-width: 64em)
{
    body
    {
        margin: 0;
        background-color: #D2B48C;
        background-image: none;
    }
    #wrapper
    {
        min-width: 0;
        width: auto;
        box-shadow: none;
    }
    h1
    {
        margin: 0;
        background-image: url(javalogomobile.webm);
    }
    main
    {
        margin-left: 0;
    }
    nav
    {
        float: none;
        width: auto;
        padding: 0;
    }
    nav ul
    {
        text-align: center;
    }
    nav li
    {
        display: inline;
        padding: 0em, 0.75em, 0em, 75em;
    }
    @media only screen and (max-width: 37.5em)
    {
        nav li
        {
            display: inline-block;
            width: 5em;
            font-size: 120%;
            text-align: center;
            box-shadow: 2px  2px #330000;
            background-color: #F5F5DC;
            margin: 1%;
            padding: 2.5%;
        }
        nav a
        {
            display: block;
        }
        nav a:hover
        {
            color: #333300;
        }
        a:link
        {
            color: #FFFFFF;
        }
        a:visited
        {
            color: #EAEAEA;
        }
        section
        {
            margin: 0;
        }
        section img
        {
            display: none;
        }
        #hero
        {
            height: auto;
        }
        #moblie
        {
            display: inline;
        }
        #desktop
        {
            display: none;
        }
    }
}