@charset "utf-8";
/* farm website */

* {box-sizing: border-box;}

img {width: 100%; height: auto;}

/* navigation */

    .fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    }

    .fa:hover {
        opacity: 0.7;
    }

    .fa-youtube {
    background: #bb0000;
    color: white;
    }

    .fa-instagram {
      background: #d31bab;
     color: white;
    }

    .fa-twitter {
    background: #55ACEE;
    color: white;
    }


    #navigation ul {list-style: none;}
    #navigation li {width: 130px; display: inline-block; margin: 0 1px 0 1px; background-color:#313758; padding: 8px; color: #fff;} 

/* typography */

    h1, h3 {font-family: "Gorditas", sans-serif;}
    h2, h4, h5, h6 {font-family: "Outfit", sans-serif;}

    h1 {font-size: 3em;}

    p {font-family: "Madimi One", sans-serif;}
    a {font-family: "Madimi One", sans-serif; color: #fff;}

    .center {display: flex; justify-content: center; align-items: center;} /* <--- from stackoverflow, it's to put the text in the center of the div*/

/* layout */

    body {background-color: #6E7ABA; padding: 0; margin: 0;}


    /* NOTE: black outlines only temporary, to see where divs are */

    .one-col {float: left; width: 96%; height: auto; padding: 5px; margin: 2%; border: 1px solid #000;}
    .two-col {float: left; width: 46%; height: auto; padding: 5px; margin: 2%; border: 1px solid #000;}
    .three-col {float: left; width: 29.33%; height: auto; padding: 5px; margin: 2%; border: 1px solid #000;}
    .four-col {float: left; width: 21%; height: auto; padding: 5px; margin: 2%; border: 1px solid #000;}

    .panel1 {float: left; width: 100%; height: auto; background-color: #5364c5;}
    .panel2 {float: left; width: 100%; height: auto; background-color: #5364c5;}

    .services1 {float: left; width: 100%; height: auto; background-color: #8f6ce0;}
    .services2 {float: left; width: 100%; height: auto; background-color: #6c52a8;}
    .services3 {float: left; width: 100%; height: auto; background-color: #534185;}

    
    .things-to-do1 {float: left; width: 100%; height: auto; background-color: #6c81e0;}
    .things-to-do2 {float: left; width: 100%; height: auto; background-color: #4c52a8;}
    .things-to-do3 {float: left; width: 100%; height: auto; background-color: #334185;}


    .rollover {
        width: 96%; height: 500px; background-image: url("../assets/frances-gunn-QcBAZ7VREHQ-unsplash.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

    .rollover:hover {background-image: url("../assets/farminvalley.jpg");}
    
    .site-logo {float: left; width: 30%; height: 100px;}
    .site-logo img {width: 55%; height: auto;}
        
    .contact-info {width: 50%; height: 50px; float: left;}

    header {background-color: #313758; width: 100%; height: auto; float: left;}
    footer {background-color: #313758; width: 100%; height: auto; float: left;}

    /* images */
    
    #things-to-do-image {float: left; width: 100%; height: 255px;}
    #things-to-do-image img {width: 50%; height: 100%;}

    #playground-image {float: right; width: 100%; height: 255px;}
    #playground-image img {width: 50%; height: 100%;}


    
/* media query */


    /* x-large */
    @media only screen and (max-width: 1200px) {
    }

    /* large */
    @media only screen and (max-width: 1080px) {
    .four-col { width: 50%;}    
    }

    /* x-small */
    @media only screen and (max-width: 576px) {
    .two-col {width: 100%;}
    .three-col {width: 100%;}
    .four-col { width: 100%;}
    }