body {
  width: available;
  background-color:#002537;
  color: #fffae6;
  margin-left: 5vw;
  border-left: 5px solid green;
}

header {
  padding: 0 20px 0 40px;
  vertical-align: middle;
  border-bottom: 5px solid green;
}

#header {
    font-style: italic;
    font-family: "Cinzel", Palatino, serif;
    font-size: 2.5em;
}

#logo {
  height:60px;
  width:80px;
  /*margin-right: 30px;
  margin-bottom: 30px;*/
}


main {
  height: 70%;
  padding-top: 30px;
  padding-left: 40px;
  margin-bottom: 20px;
  display: flex;    
  flex-direction: row;} 
  
nav {
  border-radius: 5px;
  flex: 1 2 50%;    /*grow 1x more + let shrink 3x more + initial length -- flex is shorthand for flex-grow, flex-shrink, and flex-basis */
  order: 1;}

ul {
  list-style-type:none;
  padding: 10px;
  margin: 10px 0 20px 10px;
}

#heading {
  margin-left: 20px;}
  
#heading a:link { 
  text-decoration: none;
  color: #fffae6;
}

li a {
  display: block;
  width: 85%;
  margin-left: 60px;
  text-decoration: none;
  font-family: Palatino, serif;
  color: #fffae6;
}
  	
li a:hover { 
  text-decoration: none; 
  color: green; } 

article {
  flex: 2 1 50%;
  order: 2;
  margin-top: 10px;}    

figure {
  width:100%;
  margin-top: 10px;  /* totally don't get why this works to move it up */
  margin-left: -10px;
  }

img {
  border-radius: 5px;
  height: 325;
  width: 400;
  max-width:80%;}

figcaption {
  font-style: italic;}
  
#copyright {
  font-size: 0.8em;}
  
footer {
  width: 95%;}
  
#bio{
  padding: 40px; 
  text-align: justify;
  font-size: 1em;
  font-family:"Times New Roman";
  margin: 12px 12px 0 0;}
  
#thumbnail {
  float:left;
  height:110px;
  width:90px;
  margin-right: 30px;}
 
@media (min-width:80px) and (max-width:1080px) {
   
  	main {
	 -webkit-flex-direction:column;
  	 -moz-flex-direction:column;
  	 flex-direction: column;     
  	}
		
    nav {
	    -webkit-order:1;
	    -moz-order:1;
	     order:1;}
    
    article {
	    -webkit-order: 2;
	    -moz-order:2;
	     order: 2;
      
      /*
      -webkit-min-height:50vh;
      -moz-min-height:50vh;
       min-height: 50vh; */
    }
    
    #bio{
  	padding: 10px;
  	-webkit-padding: 10px; 
  	-moz-padding: 10px;
  	
  	text-align: left;
 	-webkit-text-align: left;
 	-moz-text-align: left;
 	
 	margin: 12px 10px 0 0;
  	-webkit-margin: 12px 10px 0 0;
  	-moz-margin: 12px 10px 0 0;
  	
  	font-size: 0.8em;
  	-webkit-font-size: 0.8em;
  	-moz-font-size: 0.8em;
   }
}