@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Coding Challenge 4
   
   Author: 
   Date:   
   Filename: code5-4_debug.css

*/

header {
   width: 100%;
}

body {
   display: flexbox;
   flex-float: column nowrap;
}

@media max-width: 500px {
   
   nav {
      flex-order: 3;
   }
   
   article img {
      display: none;
   }
}

@media min-width: 501px and max-width: 800px {
   body {
      flex-float: row wrap;
   }
   
   header {
      flex: 0 0 100%;
   }
   
   nav {
      flex: 1 3 50px;
   }
   
   article {
      flex: 3 1 150px;
      padding-left: 30px;
   }
   
   article img {
      display: block;
   }
}

@media min-width: 801px {
   
   nav ul {
      display: flexbox;
      justify-content: center;
   }

   nav ul li {
      flex: 0 1 60px;
   }

}