@charset "utf-8";
/* Farm Website */

* {box-sizing: border-box;}
img {max-width: 100%; height: auto;}

/* TYPOGRAPHY */
    h1, h2, h3, h4, h5 
 {font-family: "Asap Sharp", sans-serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; font-variation-settings: "width" 100; "Asap Sharp", sans-serif;} 

/* NAVIGATION  */

#navigation ul {list-style: none; }

#navigation li {display: inline-block; margin: 0 10px 0 10px; background-color: #aaa; padding: 15px;}


/* LAYOUT */
body {background-color: darkcyan;}
section {float: left; width: 100%; height: auto;}

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

#rollover {width: 350px; min-height: 100px; background-image: url(“../images/moonscape.jpg”);}; {background-position: center; background-repeat: no-repeat; background-size: cover}
#rollover:hover {background-image: url(“../images/moonscape.jpg”) }

/* 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%;}
}