@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*/

/*THIS REPLACES MEDIA QUERY 1 - Media query for viewports 960px and wider*/
@media (min-width: 960px) {

h1{
font-size:2.5rem;
font-family: 'Libre Baskerville';
}

article{
width:950px;
background-color:linen;
color:maroon;
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{
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*/
/*THIS REPLACES MEDIA QUERY 2 - Media query for viewports 959px and narrower*/

@media (max-width: 959px) {

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

article {
background-color:snow;
color:midnightblue;
min-heightmin-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: black;
text-decoration: none;
border-radius: 1px 5px 5px 1px;
}

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

/* hide submenus in mobile devices */

#navbar ul li{
display:none; 
}

#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*/