/*
Porcelain 
#FFEED4 
rgb(255 238 212);

Cherry 
#C83928
rgb(200 57 40)

Dark Green 
#2C4001
rgb(44 64 1) 

Orange 
#F29F05
rgb(
*/
/*

font-family: "Radio Canada", sans-serif;
font-family: "Platypi", serif;
*/

*
{
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: "Radio Canada", sans-serif;
    font-size: 24px;
    color:#FFEED4;
    background-color: rgb(44 64 1);
}

nav {
    background-color:#2C4001;
    position: fixed;
    width: 100%;
    padding: 5px 100px;
    z-index: 10;
    /* this is the flexbox that will wrap the content */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;

}
nav a{
    color:#FFEED4;
    text-decoration:none;
    font-size:30px;
}
nav a:hover{
    color:#F29F05;
}

nav img, span
{
    vertical-align:middle; 
}

nav .links a{
    font-size: 20px;
    margin: 10px;
    flex-grow:1;
    text-align:right;
}

header{
    background-image:url(Images/Top-image.jpg);
    background-size: cover;
    padding:150px 100px 100px 100px;
}

h1 {font-family: "Platypi", serif;
    font-weight:"extrabold";
    font-style: normal;
    font-size: 66px;
    color: #FFEED4;
    margin-bottom:2px;
    margin-right:80px;
    padding-top:50px;
    padding-bottom:30px;
}

h2{
    margin-bottom:40px;
    font-size:56px;
    font-weight: 400; 
    font-family: "Platypi", serif;
    color: #FFEED4;
}

h3{
    margin-bottom:40px;
    font-size:36px;
    font-weight: 300; 
    font-family: "Platypi", serif;
    color: #FFEED4;
}

header div{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30; 
}

.button {
    background-color:#C83928;
    padding:10px 10px;
    width:200px;
    border-radius: 20px;
    border: 3px solid #FFEED4;
    text-align: center;
    
/* How do I add space above and below the button as a whole? 
Adding padding seems to only change the size of the button. 
Also, I want the words all on one line for the top one, too- why are they different?*/
}

.button a{
    color:#FFEED4;
    text-decoration:none;
    
}

.button a:hover{
    color:#F29F05;
}

nav .button{ 
    
}

#boxes {
    background-image: url(Images/Sand.jpg);

/*     I want to add the red background I had behind the sand images, 
because I had lowered the opacity on the sand and had the red underneath.
I had tried to save them as one image, but they saved separately because they were separate layers
I tried to type this, but it just made the background pure red: 

background-image: url(Images/Background-of-sand.jpg); */

    background-size: cover;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px; 
}

#boxes div {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 30px;
            text-align:center;
        } 

/* is there a way to lower opacity of the cream colored background boxes, 
but not the round images of fruit and vegetables? */

#boxes p {
    width:80%;
    color:#FFEED4;
    position: relative;
    margin-left:auto;
    margin-right:auto;
}

article {
    width:220px;
    padding:10px;
    padding: top 10px;
    margin:10px;
    background-color:rgba(243, 226, 206,.6);
    border-radius: 20px;
    text-align:center;
}

#boxes li {
            list-style-type: none;
}

#meetyourfarmer {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 90px; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
} 

#meetyourfarmer img {
    margin-right:40px;
}

#meetyourfarmer p {
        color:#FFEED4;
        width:600px;
        text-align: left;
}

#produce
{
    text-align:center;
    background-image:url(Images/Strawberry\ background.jpg);
    background-size: cover;
    padding:50px 100px;
}

#produce img{
    margin:10px;

}
#twentyweeks {

    background-image: url(Images/Sand-2.jpg);
    background-size: cover;
    text-align: center;
    font-weight: 200;
    padding-top: 100px;
    padding-bottom: 100px; 
} 

footer {
    background-color: #2C4001 ;
    padding: 15px 50px 5px 50px;
    color: #FFEED4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap-reverse;
}

footer a {
color: #FFEED4;
text-decoration: none;

}

footer a:hover {
color: #F29F05;
}


footer div a {
color: #FFEED4;
font-size: 30px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: none 

}
footer div a:hover {
       color: #F29F05;
}