@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 (min-width: 960px) {

      h1{
      font-size:2.5rem;
      font-family: 'La Belle Aurore', cursive;
      color:sienna
      }

      article{
      font-family:'Times New Roman',serif;
      width:950px;
      background-color:wheat;
      color:sienna;
      min-height:480px;
      padding:5px;
      margin-left:auto;
      margin-right:auto;
      }

      /*The following style rules are new*/

      #navbar{
	font-family:Arial,Verdana,sans-serif;
      list-style:none;
      margin-bottom:10px;
      float:left;
      width:940px;
      padding:5px;
      background-color:goldenrod;
      }

      #navbar li{
      font-size:1.2rem;
      float:left;
      margin-right:40px;
      margin-left:40px;
      position:relative;
      }

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

      #navbar a:hover{
      color:green;
      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: greenyellow;
      color:green;
      }

      #nav 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:springgreen;
      color:green;
      }

} /*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: 'Kalam', cursive;
      color:indigo; /*I added a font color of black to our <h1> style.*/
      }

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

      /*The following style rules are new*/
      a{
      font-size:1.5rem;
      text-decoration:none;
      }

      #navbar{
      list-style:none;
      margin-bottom:10px;
      }

      #navbar li{
      position:relative;
      margin-left:-40px;
      }

      #navbar a{
      font-size:1.25rem;
      display: block;
      width: 66%;
      padding: 10px;
      margin-bottom: 5px;
      color: white;
      background: darkgreen;
      text-decoration: none;
      border-radius: 5px 5px 1px 1px;
      }

      #navbar a:hover{
      color:black;
      text-decoration:none;
      }

      /* hide submenus in mobile devices */

      #navbar ul li{
      display:none;
      }

      #navbar li:hover a{
      text-decoration: none;
      background-color: lightsteelblue;
      border-radius: 5px 25px 25px 5px;
      border-bottom: thin white solid;
      width:75%;
      }

} /*END MEDIA QUERY 2*/