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

/*
   Notes for the evaluator.  Please check all instances of the position properties.  I added multiple
   instances of each for different purposes and used relative positioning on a parent element to alter the
   default positioning of a child element's absolute positioning.  
*/

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: absolute;
    left: 700px;
    top:  465px;
 }

 .ky-flag-fr {
   top:  380px;
 }

 .ky-flag-lex {
   left: 699px;
   top:  467px;
 }

 .ky-flag-lou {
   top:  361px;
 }

 .ky-flag-con {
   left: 800px;
   top:  356px;
 }

 #contact_aside {
   position: relative; 
   left: 50px;
   width: 400px;
 }

 .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; /* acts as positional hinge for the ky-flag but doesn't reposition the  background */ 
    background-size: contain; 
    background-repeat: no-repeat;

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

 .form_background {
   width: 1500px; 
   height: 600px;
 }

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

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

 .city_overlay {
    background-color: #ffffff;
    opacity: .75;
    width: 75%;
    position: absolute;
    right: 120px;
    height: 350px; 
 }

 .contact_overlay {
   width: 80%;
 }

 .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: absolute;
    left: 600px;
    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;
}