/* 
     Stevie Lomack 
     2/17/18
	 Logo/art created by Stevie Lomack using work 
	 done with Photo Shop & Illustrator.
*/
   * { box-sizing: border-box; } 
body { font-family: Verdana, Arial, sans-serif;
      background-color: #330000;
	  padding-bottom: 50px;
}
#wrapper {  background-color: #F4E8BC; 
	        width: 90%;
			margin: auto;
            color: #330000;
			box-shadow: 7px 7px 7px #000000;
}
header div class {padding-left: 25px; }
h1, h2 { color: red; }

		

h1 { text-align: center;
     font-size: 400%;
     padding: 5% 0;
     text-shadow: 3px 3px 3px #F4E8BC;	
}
nav a { font-weight: bold;
	        font-size: 1.0em;}
nav { float: left;
      width: 20%;
	  font-size: 120%;
}	  
nav ul { list-style-type: none; }
nav a { text-decoration: none;}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600; }
aside { float: right; 
        width: 25%;
		padding: 0 2.5%;
}
main { width: 50%;
        padding-right: 2%;
        margin-left: 20%;
}
img { max-width: 100%;
      height: 100%; }
footer { text-align: center;
         font-size: 80%;
		 font-style: italic;
		 color: red;
		 padding: 2.5%;
	     clear: both;
background-color:#996600;
	        background-size: 200px 200px;
            background-repeat: no-repeat;
			padding-top:20px;
			padding-left:auto;
			padding-right:auto;
			font-size: 1.0em;
			font-weight: Bold;
	        color:white;
	        margin-left: 0px;
            margin-right: 0px;
            padding-bottom: 20px;}		 
}
@media only screen and (max-width: 1024px) {
          body { margin: 0; padding: 0; } 
          #wrapper { width: auto; }
          h1 { margin: 0; }
		  nav { float: none;
                width: auto;
                margin-top: 0;	}
 	      nav ul { padding-left: 0;
                   text-align: center; }
          nav li { display: inline;
                   margin: 0 2%; }
          main { width: 60%;
                   margin-left: 5%; }
          aside { width: 30%;  }

}
@media only screen and (max-width: 768px) {
		    h1 { font-size: 200%; }
			main { margin: 0 5%;      
                    width: auto;	}
			nav ul, nav li { padding: 0; margin: 1% 0 0 0; }
			nav a { display: inline-block;
                    width: 5em;
			        font-size: 120%;
					text-align: center;
					box-shadow: 2px 2px 2px #330000;
					background-color: #FFFFCC; 
					margin: 1%;
					padding:  1% 1.5%; 			}
			aside { display: none; }		
}
header, main, nav, footer, figure, figcaption { display: block; }



}
@media only screen and (max-width: 768px) {
	
 
	        
    h1 { font-size: 100%; 
	       font-size: 1.5em;}
  
		   
    p {font-size: 100%; 
	   padding-left:0.3em;}
    figure { display: none;}
	nav {padding: 0}
    nav ul{padding:0;
	       margin:0;}
    nav a { display: block; 
	         padding:0;
	         margin:0;}
    nav a { display: block; padding: 0.2em;
	        font-size: 1.3em;
            border-bottom: 1px #330000;}
	main {padding-top: 0.1em; padding-right: 0;padding-bottom: 0.1em;
	      padding-left: 0.4em;}
	main img {display: none;
	          padding-right: 0;}
	main ul {list-style-position: outside;}
}
main  {font-size: 1.5em;}
 .responsive {
    width: 100%;
    max-width: 700px;
 height: auto;
 }
 img {
    max-width: 100%;
    max-height: 100%;
}
			  
    footer	{border-top: 2px solid #003366;
             line-height:100%;
                  margin-left: auto;
                  margin-right: auto;
			text-align: center;
			font-size: 1em;
            font-weight: bold;            
			}