: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);
}

#cvpagehero h1{
    text-align: center;
    font-size: 6rem;
    line-height: 115%;
}

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



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);
}

#aboutmesection_titel h1{
    font-size: 3em;
}

#aboutmesection_titel span{
    color: var(--yellow);
}

.aboutmesection_grid{
    margin: 50px auto;
    padding: 20px;
    background-color: var(--green);
    display: grid;
    grid-template-columns: 0.2fr 0.2fr 0.2fr 1fr;
    grid-template-rows: 0.2fr 1fr;
    gap: 30px;
    grid-template-areas:
    "aboutmesection_picture  aboutmesection_titel  aboutmesection_titel aboutmesection_titel "
    "aboutmesection_picture  aboutmesection_paragraph aboutmesection_paragraph aboutmesection_paragraph" ;
}

.aboutmesection_item{
    display: flex;
}

#aboutmesection_picture{
    height: 200px;
    width: 200px;

    max-height: 80vw;
    max-width: 80vw;

    overflow: hidden;
    border-radius: 50%;
    border: 20px solid var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: aboutmesection_picture;
}

#aboutmesection_picture img{
    width: 100%;
}

#aboutmesection_titel{
    color: var(--browndark);
    grid-area: aboutmesection_titel;
}


#aboutmesection_paragraph{
    grid-area: aboutmesection_paragraph;
}

#aboutmesection_paragraph p{
    color: var(--yellow);
}

hr{
   
    height: 2px;
    background: var(--browndark)
} 

.experience_grid{
    margin: 0px 30px;
    display: grid;
    grid-template-columns: 1fr  1fr  ;
    grid-template-rows: 1fr 1fr ;
    grid-template-areas: 
    "experience_title  ."
    "highschool mbo";
}

#experience_titel{
    grid-area: experience_titel;
}


#highschool{
    grid-area: highschool;
}

#mbo{
    grid-area: mbo;
}

.skills_grid{
    margin: 0px 30px ;
    display: grid;
    grid-template-columns: 1fr  1fr  ;
    grid-template-rows: 1fr 1fr ;
    grid-template-areas: 
    "skills_title ."
    "skills_column1 skills_column2";
   
}

#skills_title{
    grid-area: skills_title;
}

#skills_column1{
    grid-area: skills_column1;
}

#skills_column2{
    grid-area: skills_column2;
}

.tools_grid{
    margin: 0px 30px ;
    display: grid;
    grid-template-columns: 1fr  1fr  ;
    grid-template-rows: 1fr 1fr ;
    grid-template-areas: 
    "tools_title ."
    "tools_column1 tools_column2";
}

#tools_title{
    grid-area: tools_title;
}

#tools_column1{
    grid-area: tools_column1;
}

#tools_column2{
    grid-area: tools_column2;
}

.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;
}
#cvpagehero_text{
    margin: 45px;
}

.aboutmesection_grid{

    grid-template-columns: 1fr ;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "aboutmesection_picture"
    "aboutmesection_titel"
    "aboutmesection_paragraph" ;
}

.experience_grid{
    margin: 0px 30px;
    gap: 15px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .1fr 1fr 1fr;
    grid-template-areas: 
    "experience_title"
    "highschool"
    "mbo";
}

.skills_grid{
    margin: 10px 40px;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .1fr 1fr 1fr ;
    grid-template-areas: 
    "skills_title"
    "skills_column1" 
    "skills_column2";
}

.skills_grid ul{
    line-height: 25px;
}

.tools_grid{
    margin: 10px 40px;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .1fr 1fr 1fr ;
    grid-template-areas: 
    "tools_title"
    "tools_column1" 
    "tools_column2";
}

.tools_grid ul{
    line-height: 25px;
}


.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" ;
}


}

@media print{ /*=== met deze query geef je aan hoe je wilt dat de pagina eruit ziet wanneer je control + p drukt. Hierbij heb ik de meeste tekstkleuren naar zwart veranderd en de 
    background naar wit zodat het makkelijker te printen wordt ===*/
    h1{
        color: #000000;
     }

     #cvpagehero h1 span{
        color: #000000;
     }
    
     h2{
        color: #000000;
     }

     h2 span{
        color: #000000;
     }

     h3{
        color: #000000;
     }
    
     #aboutmesection_titel span{
        color: #000000; 
        text-align: center;
      }

     p{
        color: #000000;
     }

     li{
        color: #000000;
     }
    
     body {
        background-color: #ffffff;
     }
    header{
        display: none;
    }
    .header_grid{
        display: none;
    }

    nav{
        display: none;
    }

    .aboutmesection_grid{
        display: grid;
       margin: 100px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: .1fr .1fr .1fr .1fr;
        grid-template-areas:
        " aboutmesection_titel aboutmesection_titel aboutmesection_titel  "  
        ". aboutmesection_picture ." 
        "aboutmesection_paragraph aboutmesection_paragraph aboutmesection_paragraph";
    }


    #aboutmesection_picture{
        border: none;
        align-content: center;
    }

    #aboutmesection_titel h2{
        color:#000000;
    }


    #aboutmesection_paragraph p{
        color: #000000;
    }

    footer{
        display: none;
    }
.calltoaction_container{
    display: none;
}


}