@charset "UTF-8";

body{
font-family:Arial,Verdana,sans-serif;
font-size:1.3rem;
line-height:1.2;
}

li{
font-size:1.2rem;
}


.responsive-photo-90 {
display: block;
width: 90%;
margin-right: auto;
margin-left: auto;
max-width:800px;

}

/*The two new media queries are listed below*/

/*MEDIA QUERY 1: Media query for viewports 960px and wider*/

@media (min-width: 960px) {

    h1 {
    font-size: 2.5rem;
    font-family:Arial,Verdana,sans-serif;
    }

    h3 {
    font-size: 1.5rem;
    font-family:Arial,Verdana,sans-serif;
    }

    p {
    font-size: 1 rem;
    font-family:Arial,Verdana,sans-serif;
    }

    a:link {color:red}


    article {
    width:950px;
    background-color:#f8f8ff;
    color:red;
    min-height:480px;
    padding:5px;
     margin-left:auto;
    margin-right:auto;
    }


      /*The following style rules are new*/
      /*This knocks out the bullet points*/

      #navbar{
      list-style:none;
      margin-bottom:10px;
      float:left;
      width:940px;
      padding:5px;
      background-color:silver;
      }

      /*this removes linebreaks; makes top level menu items on one line*/
      #navbar li{
      font-size:1.2rem;
      float:left;
      margin-right:40px;
      margin-left:40px;
      position:relative;
      }

      #navbar a{
      display:block;
      padding:5px;
      color:white;
      background:black;
      text-decoration:none;
      }

      #navbar a:hover{
      color:yellow;
      text-decoration:none;
      }
      /*Dropdown styling*/

      #navbar ul{
      list-style: none;
      position: absolute;
      left: -9999px; /*Hide off-screen when not hovered over*/
      }

      #navbar ul li{
      padding-top:5px; /*Between the li items for spacing*/
      float:none;
      margin-left:-25px;
      }

      #navbar ul a{
      white-space:nowrap; /*Stop text wrapping*/
      }

      #navbar li:hover ul{ /*Display the dropdown on hover*/
      left:0; /*Bring back on-screen when needed*/
      }

      #navbar li:hover a{ /*The top link display when a user hovers over sub-menu items*/
      text-decoration: none;
      background-color: gray;
      }

      #navbar li:hover ul a{ /*The hover state defined a global style for links even before they're hovered over. Here we undo these effects.*/
      text-decoration:none;
      }

      #navbar li:hover ul li a:hover{ /*Defines the most explicit hover states when a user hovers over an individual link.*/
      background-color:black;
      }

}/*END MEDIA QUERY 1*/

/*THIS REPLACES MEDIA QUERY 2 - Media query for viewports 959px and narrower*/

@media (max-width: 959px) {  

      h1{
      font-size:1.5rem;
      font-family:Arial,Verdana,sans-serif;
      color:red; /*I added a font color of black to our <h1> style.*/
      }

     h3 {
    font-size: 1.5rem;
    font-family:Arial,Verdana,sans-serif;
    }

    p {
    font-size: 1 rem;
    font-family:Arial,Verdana,sans-serif;
    }

    a:link {color:red}



      article {
      background-color:#f8f8ff;
      color:red;
      min-height:480px;
      padding:5px; /*I added some padding to our <article> style.*/
      }

      /*The following style rules are new. I added this new style rule for links, to make their font size larger and to disable their default underlining.*/
      a{
      font-size:1.5rem;
      text-decoration:none;
      }

      /*For list elements that appear within a navbar, we are disabling the default "•" bullets that normally appear with list elements.*/
      #navbar{
      list-style:none;
      margin-bottom:10px;
      }

      /*For list elements that appear within a navbar, we are moving the content to the left 40px to counter the default indent applied to list items.*/
      #navbar li{
      position:relative;
      margin-left:-40px;
      }

      /*We are defining links in the navbar, giving their text a color of white, their background a color of black, and giving them a rounded shape.*/
      #navbar a{
      font-size:1.25rem;
      display: block;
      width: 66%;
      padding: 10px;
      margin-bottom: 5px;
      color: white;
      background: black;
      text-decoration: none;
      border-radius: 1px 5px 5px 1px;
      }

      /*We are defining hovered links in the navbar, giving their text a color of yellow.*/
      #navbar a:hover{
      color:yellow;
      text-decoration:none;
      }

      /* hide submenus in mobile devices */

      /*We are hiding submenus here by hiding (not displaying) unordered list elements that are child elements of list elements in the navbar.*/
      #navbar ul li{
      display:none;
      }

      /*We are creating a bit of animation and interactivity for mobile users for whom the "hover" state will kick in when they tap a link.*/
      #navbar li:hover a{
      text-decoration: none;
      background-color: gray;
      border-radius: 5px 25px 25px 5px;
      border-bottom: thin white solid;
      width:75%;
      }

} /*END MEDIA QUERY 2*/