media.css

/*The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).


CSS Syntax
@media not|only mediatype and (media feature and|or|not mediafeature) {
    CSS-Code;
}

*/


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .column {
        width: 100%;
    }
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). 
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child ) {display: none;}
   
     .topnav a.icon {
      float: left;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
   This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
     .topnav.responsive a.icon {
      position: absolute;
      left: 0;
      top: 0;
    }
   .topnav.responsive a {
      float: none;
      display: block;
      text-align: right;
    }
  }