@charset "utf-8";

/*
  Brianna Deirth Portfolio Webpages
  CSS file for different media types
   
   Author: Brianna Deirth
   Date: 03/11/2023  
   Filename: mobile_bc.css

*/

header {
   width: 100%;
}

body {
   display: flex;
   flex-flow: column nowrap;
   flex-direction: column;
   min-height: 100vh;
}

/* Designing for mobile web*/
/* cell phones */
@media only screen and (max-width: 500px) {
   
   nav {
      flex-grow: 3;
      order: 100;
	  
   }
   
   article img {
      display: none;
   }
}
/*tablets*/
@media only screen and (min-width: 501px) and (max-width: 800px) {
   body {
      flex-flow: row wrap;
   }
   
   header {
      flex: 0 0 100%;
   }
   
   nav {
      flex: 1 3 50px;
   }
   
   article {
      flex: 3 1 150px;
      padding-left: 30px;
   }
   
   article img {
      display: block;
   }
}
/*DeskTops*/
@media only screen and (min-width: 801px) {
   
   nav ul {
      display: auto;
      justify-content: center;
   }

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