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

* {box-sizing: border-box;}

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



/* TYPOGRAPHY */

h1, h2, h3, h4, h5 {font-family: "Comic Relief", system-ui;}

p{font-family: "Comic Relief", system-ui;}
a{font-family: "Comic Relief", system-ui;}

h1 {font-size: 2em; color:rgb(250, 252, 252);}
h2 {font-size: 2em; color:  rgb(21, 93, 27)}
h3 {font-size: 3em; color: rgb(rgb(0, 255, 247) green blue / alpha)}
h4 {font-size: 1em; color:cyan}

p {font-size: 1.25em;}


/* NAVIGATION */

#navigation ul {list-style: none; float: left;}
#navigation li {display: inline-block; margin: 10px; background-color: #4a6b33; padding: 0px;}

header {float: left; width : 100%; height: 325px; background-color: aqua; background-image: url("../assets/salyasin-dew-1507498\ \(1\).jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; float: right; }
footer {float: left; width : 100%; height: auto; background-color: rgb(8, 0, 255);}

#rollover {width: 400px; min-height: 400px; background-image: url("../assets/blueberries.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; float: left; margin: 1%; padding: 8px;}
#rollover:hover {background-image: url("../assets/oranges.jpg");}

/* MAIN BODY */


 body {padding: 0; margin: 0; color:rgb(0, 0, 0)}

 

    .one-col {float: left; width: 96%; height: auto; padding: 5px; margin: 5%;}
    .two-col {float: left; width: 46%; height: auto; padding: 5px; margin: 5%;}
    .three-col {float: left; width: 23.33%; height: auto; padding: 5px; margin: 5%;}
    .four-col {float: center; width: 21%; height: auto; padding: 2px; margin: 3%;}

    #site-title {text-align: center;}
    
    

      #section {float: left; width: 100%; height: auto;}
      #second-three-col {float: right; }
     

      #site-logo {float: right; max-width: 85px; max-height: 80px;}
    #social-icons {float: right; max-width: 200px; max-height: 35px;}
    
    /* STYLE */
        
    .fa {padding: 20px; font-size: 30px; width: 50px; text-align: center; text-decoration: none;}
    .fa:hover {opacity: 0.7;}
    .fa-instagram {background: #DD2A7B; color: white;}
    .fa-twitter {background: #55ACEE;color: white;}
    

        
     /*CLASSES*/