/* requirements
    font-family declaration
    a :hover rollover effect on nav links
    float property to position one HTML element within the site to the side of another element
    absolute positioning on one page that changes the position of an element
    relative positioning on one page that changes the position of an element
    one of each selectors
        element selector once
        class selector twice
        id selector once
*/

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif; /* requirment - font family declaration */
}

footer {
    font-size: smaller;
}

.header_bar {
    display: block;
    inset-block: 100%;
    background-color: #0091ff;
    margin: 0;
    padding: 14px 15px;
    overflow: hidden;
}

#header_div { /* requirement - id selector */
    color: white;
    font-size: larger;
    
}

#nav_bar ul {
    list-style-type: none;
    display: block;
    inset-block: 100%;
    background-color: #f3f3f3;
    margin: 0;
    padding: 0px;
    overflow: hidden; 
    width: 100%;
}

.nav_button {
    float: left;
}

.nav_button a {
    display: block;
    color: black;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
 }

 .nav_button :hover { /* requirement - :hover on nav link */
    background-color: #0091ff;
    color: white;
 }

 .ky-flag {
    max-width: 200px;
    position: relative;
    margin-left: 700px;
    margin-top:  465px;
   
    opacity: 1.65;
 }

 .home_background {
    background-image: url('images/Manchester_Farm,_Lexington.jpg');
 }

 .frankfort_background {
    background-image: url('images/U.S._Route_60_Frankfort,_KY.jpg');
 }

 .lexington_background {
    background-image: url('images/A_horse_farm_in_Lexington,_Kentucky.jpg');
 }

 .louisville_background {
    background-image: url('images/Louisville_Skyline_2021.jpg');
 }

 .background {
    background-color: #ffffff;
    max-height: 1000px; /* ensures all images are the same height */
    max-width: 1500px;  
    position: relative; /* fulfills position relative requirement - page elements are shifted upon removal */
    background-size: contain; 
    background-repeat: no-repeat;

    margin-left: auto;  /* centers the image */
    margin-right: auto; 
    width: 900px; 
    height: 600px;
 }

 .form_background {
    display: flex;     /* this is mostly to keep the elements contained in the center of the page */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    background-color: #ffffff;

 }

 th { /* requirement - element selector */
    text-align: left;
 }

 .overlay {
    background-color: #ffffff;
    opacity: .65;
    width: 100%;
    height: 200px; 
    position: absolute; 
 }

 .city_overlay {
    background-color: #ffffff;
    opacity: .75;
    width: 75%;
    right: 120px;
    height: 350px; 
    position: absolute;  /* fulfills requirement as the opaque bg is removed/hidden on deletion of this line */
 }
 .city_content {
    margin-left: 5%;
    margin-right: 5%;
 }
 .city_content aside {
    margin-left: 5%;
    margin-right: 5%;
 }

 .home_section {
    width: 60%;
    float: left; /* requirement - elements on home page will shift out of view on removal */
    padding: 20px;
    top: 10px;
    right: 5;
 }

 .home_aside {
    float: right;
    position: relative;
    padding: 20px;
    top: 50px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
 }

 .form_field {
    width: 100%;
    padding: 8px 15px;
    margin: 10px 3px;
    border-radius: 5px;
    box-sizing: border-box;
    border-width: medium;
    border-color: black  gray gray black;
    
 }

 .submit_button {
    width: 100%;
    padding: 8px 15px;
    margin: 10px 3px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #0091ff;
    color: #ffffff;
    font-size: medium;
    font-weight: bold;
 }

 td h1 {
    padding: 8px 15px;
    margin: 10px 3px;
 }

footer {
    display: flex;
    flex-direction: column;
    padding-left: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
}

sup {
    font-size: smallest;
}