:root{
    --yellow: #fdfcdb;
    --yellowdark: #c4c066; 
    --brown: #4e4232;
    --browndark:#352d22;
    --green: #587B56;
    --greendark: #365034;
}
*{
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh;
    background-color: var(--yellow);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--brown);
}

h1{
    font-size: 6rem;
    line-height: 115%;
}



h3{
    font-size: 1.5em;
}



p{
    font-size: 1em;
}

header{
    padding: 20px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.header_grid{
    
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "home aboutme contactme";

}
.header_item{
    display: flex;
    padding: 20px;
    text-align: center;
    
}
nav{
    margin-bottom: 10px;
}

nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a{
    color: var(--browndark);
    text-decoration: none;
}

nav a:hover{
    color: var(--brown);
    text-decoration: underline;
}

#toggle_button{
    display: none;
}

label[for="toggle_button"] {
    display: none;
}

label[for="toggle_button"] span{
    font-size: 40px;
}

#home{
    grid-area: home;
}

#aboutme{
    grid-area: aboutme;
}

#contactme{
    grid-area: contactme;
}

.material-symbols-outlined{
    color: var(--yellow);
}

#contactpagehero_text{
    text-align: center;
}

#contactpagehero_text span{
    color: var(--green);
}



.contact_form{
    background: var(--greendark);
    justify-content: center;
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    grid-template-areas: 
    "contact_container";
}
.contact_container{
    max-width: 800px;
    margin-top: 0;
   
}

.contact_form h1{
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--yellow);
}
.contact_form h2{
    line-height: 30px;
    margin-bottom: 5px;
    font-size: 30px;
    font-weight: 500;
    color: var(--brown);
    text-align: center;
}
.contact_form .contact_main{
    position: relative;
    display: flex;
    margin: 30px;
    
}


.contact_content{
    
    padding: 3em 3em;
    background: var(--yellow);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-radius: 10%;
}

.contact_content label{
    display: none;
}

.contact_content h1{
color: var(--browndark);
font-size: 3rem;;
}
.form-img{
    flex-basis: 50%;
    background: var(--brown);
    background-size: cover;
    padding: 40px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    align-items: center;
    display: grid;
}
.form-img img{
    max-width: 100%;
}

.btn,
button,
input{
    border-radius: 35px;
}
.btn:hover,
button:hover{
    background: transparent;
    color: var(--browndark); 
}
.contact_form form{
    margin: 30px 0;
}
.contact_form input,
textarea{
    outline: var(--brown);
    margin-bottom: 15px;
    color: var(--browndark);
    padding: 14px 20px;
    width: 100%;
    border: var(--brown);
    background: #fcfcfc;
    transition: 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}
.contact_form input:focus{
    background: transparent;
    border: 1px solid var(--browndark);
}
.contact_form button{
    font-size: 1.2em;
    color: var(--yellow);
    width: 100%;
    background: var(--green);
    font-weight: 600;
    transition: 0.3s ease;
    padding: 14px 15px;
    border: 3px solid var(--green);

}

.calltoaction_container{
    padding: 30px;
    background-color: var(--brown);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 1fr;
    grid-template-areas:
    "calltoaction_titel calltoaction_titel calltoaction_titel contactme_button"
    "calltoaction_text calltoaction_text calltoaction_text contactme_button"
    ;
}

.calltoaction_container h1{
    font-size: 3rem;
    color: var(--yellow);
    grid-area: calltoaction_titel;
}

.calltoaction_container p{
    color: var(--yellow);
    grid-area: calltoaction_text;
}

.calltoaction_container a{
background-color: var(--green);
text-align: center;
width: min-content;
padding: 15px 40px;
border-radius: 50px;
margin: 0 auto;
text-decoration: none;
color: var(--yellow);
border: 4px solid var(--green);
transition: 150ms ease-in-out;
grid-area: contactme_button ;
flex-direction: column; /*==== de flexibele elementen worden als een kolum gezien  ===*/
}

.calltoaction_container a:hover{
    background: transparent;
    color: var(--yellow); 
}

footer{
width: 100%;
padding: 10px ;
background-color: var(--green)
}

footer h1{
    font-size: 2rem;
    color: var(--yellow);
    text-align: center;
}



.footer_container{
    margin: 0px auto;
    display: grid;
    row-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: 
    ". . footer_text . . "
    " instagram_button facebook_button behance_button linkedin_button pinterest_button "
    " instagram_text facebook_text behance_text linkedin_text pinterest_text ";
}

#footer_text{
    grid-area: footer_text;
}
.footer_container h3{
    grid-area: socials_text;
}

#instagram_button{
    grid-area: instagram_button;
}
#facebook_button{
    grid-area: facebook_button;
}
#behance_button{
    grid-area: behance_button;
}
#linkedin_button{
    grid-area: linkedin_button;
}
#pinterest_button{
    grid-area: pinterest_button;
}

#instagram_text{
    grid-area: instagram_text;
    
}
#facebook_text{
    grid-area: facebook_text;
    
}
#behance_text{
    grid-area: behance_text;
    
}
#linkedin_text{
    grid-area: linkedin_text;
    
}
#pinterest_text{
    grid-area: pinterest_text;
   
}

.socialmedia_text{
    text-align: center;
    color: var(--yellow);
}



.fa-brands {
    font-size: 3rem;
    color: #352d22;
}

.fa-brands:hover{
    color: var(--yellow);
    text-decoration:overline;

}

.socialmedia_buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}


.socialmedia_buttons a{
    font-size: 0rem;
}


@media(max-width: 500px){
    h1{
        font-size: 12vw;
        text-align: center;
    }

h2{
    font-size: 6vw;
}

h3{
    font-size: 4vw;
}

p{
    font-size: 3vw;
}

nav{
    position: fixed;
    top: 0;
    left: 0;
    background: var(--green);
    padding: 15px;
    border-radius: 0 0 20px 0;
}
nav ul{
    display: none;
    flex-direction: column;
}
#toggle_button:checked ~ ul {
    display: flex;
}

label[for="toggle_button"] {
    display: block;
}
#contactpagehero_text{
    margin: 45px;
}

.contact-form .main{
    flex-direction: column;
}
.contact-form form{
    margin-top: 30px;
    margin-bottom: 10px;

}
.form-img{
    border-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    order: 2;
}
.content{
    order: 1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


.calltoaction_container{ /*==== doordat ik de container nogmaals oproep onder de media query kan ik zo de grid veranderen. hier heb ik dus alles onder elkaar gezet
    omdat dit makkelijker te lezen is op een mobiel  ===*/
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    grid-template-rows:auto auto auto ;
    grid-template-areas: 
    "calltoaction_titel calltoaction_titel"
    "calltoaction_text calltoaction_text"
    "contactme_button contactme_button"
    ;
   } 

#calltoaction_titel{
text-align: center;
}

#calltoaction_text{
text-align: center;
}

.socialmedia_text{
    font-size: 5vw;
}
.socialmedia_buttons img{
    height: 100px;
}
.footer_container{
margin: 30px auto;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(11, .1fr); /*=== door repeat te gebruiken herhaald hij de rij 10 keer en iedere rij is 1 fr zo bespaar je tijd en ruimte in je code ===*/
grid-template-areas: 
"footer_text"
"instagram_button" 
"instagram_text"
"facebook_button"
"facebook_text" 
"behance_button"
"behance_text"
"linkedin_button"
"linkedin_text"
"pinterest_button "
"pinterest_text" ;
}
}