/* 1. Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Basic layout styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #fff; /* White */ /* vs orig gray, #f4f4f4; */
    color: #333;
}

/* 3. Header and Navigation Styles */
header {
    background-color: #333;
    padding: 1rem 0;
}

.navbar {
    list-style: none;
    text-align: left; /* change from center */
}

.navbar li {
    display: inline-block;
    position: relative;
}

.navbar a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
	font-weight: bold; /* added */
	}

/* mouse over link */  /* added */	
.navbar a:hover {
  color: #99e6ff; /* #b3ffff light blue */
}
.navbar .dropdown:hover .dropdown-content {
    display: block;
}

/* 4. Dropdown Menu Styles */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    min-width: 180px;
    border-radius: 5px;
}

.dropdown-content li {
    display: block;
}

.dropdown-content a {
    padding: 10px;
    color: white;
    background-color: #444;
}

.dropdown-content a:hover {
    background-color: #555;
}

/* 5. Responsive Design Styles */
@media (max-width: 768px) {
    .navbar {
        text-align: left;
    }

    .navbar li {
        display: block;
        width: 100%;
    }

    .dropdown-content {
        position: relative;
        display: block;
    }
}

/* 6. Section and Footer Styles */
main {
    padding: 20px;
	margin-bottom: 300px;
}

section {
    margin-bottom: 2rem;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}

/* 7. Search Engine Optimized Styles (H1, H2, etc.) */
h1, h2 {
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem; /* added */
}

/* 8. Spacing classes */ /* added */
.left-list {
    margin-left: 25px;
}

/* 9. Responsive Images */  /* added */
/* https://www.w3schools.com/howto/howto_css_image_responsive.asp */
.responsive-img {
  max-width: 100%;
  height: auto;
}
.responsive-img-600 {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.responsive-img-560 {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* added */
/* 10. Body links - Descendent Selector https://www.w3schools.com/css/css_combinators.asp 
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS definition in order to be effective.
Descendent selector: https://www.w3schools.com/css/css_combinators.asp
*/
/* unvisited */
main a:link { 
	color: #00C; /* Blue */ 
	background: #fff; /* White */
}
main a:visited { 
	color: #00C; 
	background: #fff; 
}
main a:hover { 
	color: #204AD4; /* lighter Blue */ 
	background: #fff; 
}
main a:active { 
	color: #204AD4; 
	background: #fff; 
}

/* added */
/* 11. Lower Nav */
.lowernav a {
    text-align: center;
	text-decoration: none;
    color: white;
	}

/* mouse over link */  /* added */	
.lowernav a:hover {
  color: #99e6ff; /* #b3ffff light blue */
}