<!--
font-family: "Roboto", sans-serif;
font-family: "Yellowtail", cursive;
font-family: "Karantina", cursive;
-->
*
{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    margin:0;
    font-family: "Roboto", sans-serif;
}

nav{
    background-color:#AB1603;
    padding:20px;
    position: fixed;
    width:100%;
    z-index: 10;
       display: flex;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
nav a{
    color:white;
    font-family: "Roboto", sans-serif;
    font-size:20px;
    text-decoration: none;
    padding:5px;
    
}
header
{
    background-image: url(images/hero-peppers.png);
    background-size: cover;
    padding:150px 200px;
}

h1
{
    font-family: "Yellowtail", cursive;
    color:white;
    font-size:80px;
    margin-bottom:30px;
}
h4{
    font-family: "Karantina", cursive;
    color:#F3E94A;
    font-size:50px;
}

header a{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9510e+0,f3e94a+52,f98e0e+100 */
background: linear-gradient(to bottom,  #f9510e 0%,#f3e94a 52%,#f98e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding:5px 10px 5px 10px;
border-radius: 5px;
color:black;
text-decoration:none;
font-family: "Roboto", sans-serif;
}

#boxes
{
    background-image: url(images/boxes-bkg.png);
    background-size: cover;
    padding:50px 200px;
    text-align: center;
}

#boxes h2{
    color:#AB1603;
}
#boxes article{
    width:250px;
    padding:20px;
    background-color:rgba(255, 255, 255, 0.6);
    margin:20px; 
    filter: drop-shadow(0px -1px 9px #000000); 
}
#boxes article h3
{
    font-family: "Karantina", cursive;
    font-size:24px;
    color: #AB1603;
}
#boxes div {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
 
.text-border-shadow {
  color: white; /* Text color */
  text-shadow: 
    1.5px 1.5px 0 rgb(255, 255, 255),   /* Bottom-right shadow */
   -1.5px 1.5px 0 rgb(255, 255, 255),   /* Bottom-left shadow */
    1.5px -1.5px 0 rgb(255, 255, 255),  /* Top-right shadow */
   -1.5px -1.5px 0 rgb(255, 255, 255);  /* Top-left shadow */
}
#boxes li{
            list-style-type: none;
            margin-left:-40px;
        } 
#meetyourfarmer
{
    background-image: url(images/Farmer-bkg.png);
    background-size: cover;
    padding:50px 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#meetyourfarmer p
{
    color:white;
    width:600px;
}
#meetyourfarmer img{
    margin-right:40px;

}
#produce
{
     background-image: url(images/gallery-bkg.png);
    background-size: cover;
    padding:50px 200px;
    text-align:center;
}

#produce h2{
    color:#AB1603;
}
#twentyweeks
{
     background-image: url(images/20weeks-bkg.png);
    background-size: cover;
    padding:50px 200px;
    text-align:center;
}

#twentyweeks a{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9510e+0,f3e94a+52,f98e0e+100 */
background: linear-gradient(to bottom,  #f9510e 0%,#f3e94a 52%,#f98e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding:5px 10px 5px 10px;
border-radius: 5px;
color:white;
text-decoration:none;
font-family: "Roboto", sans-serif;
text-align:center;
}

h2{
    font-family: "Karantina", cursive;
    font-size:42px;
    color:white;
    text-align: center;
}
footer{
    background-color:black;
    padding:20px;
    color:white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap-reverse;
}
footer a{
    color:white;
    text-decoration: none;
}