@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Coding Challenge 1

   Author:  Cooper Miller 
   Date:    10/15/2026
   Filename: code5-1_media.css

*/

@media screen and (max-width: 500px) {
  article img {
    display: none;
  }

  ul.submenu {
    text-align: center;
  }
}

@media screen and (min-width: 501px) {
  nav {
    float: left;
    width: 130px;
    height: 400px;
    margin: 30px 25px 0 0;
  }
}

@media screen and (min-width: 710px) {
  nav {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
  }
  
  ul.mainmenu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }

  ul.mainmenu li {
    flex: 0 1 120px;
  }
}