@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: 'Quintessential', cursive;
color:black;
}

article{
width:950px;
background-color:#fbec5d; /* maize */
color:midnightblue;
min-height:480px;
padding:5px;
margin-left:auto;
margin-right:auto;
}

/*The following style rules are new*/

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

#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{

/* By moving list items off the screen until they are hovered over, we are creating the illusion that drop-down menu items "appear" when the parent menu option is hovered over. */
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*/

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

@media (max-width: 959px) {

h1{
font-size:1.5rem;
font-family: 'Quintessential', cursive;
color:black; /*I added a font color of black to our <h1> style.*/
}

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

/*The following style rules are new*/
a{
/* I added this new style rule for links, to make their font size larger and to disable their default underlining. */

font-size:1.5rem;
text-decoration:none;
}

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

margin-bottom:10px;
}

#navbar li{
position:relative;
margin-left:-40px;
/* 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 a{
/* 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. */

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;
}

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

color:yellow;
text-decoration:none;
}

/* hide submenus in mobile devices */

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

}

#navbar li:hover a{
/* 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. */

text-decoration: none;
background-color: gray;
border-radius: 5px 25px 25px 5px;
border-bottom: thin white solid;
width:75%;
}

} /*END MEDIA QUERY 2*/