/*==== de root bevat alle elementen die vaak op de site terug komen hierdoor kun je makkelijk een kleur oproepen en deze ook makkelijk in een keer op de hele site aanpassen door de root aan te passen===*/
:root{
    --yellow: #fdfcdb;
    --yellowdark: #c4c066; 
    --brown: #4e4232;
    --browndark:#352d22;
    --green: #587B56;
    --greendark: #365034;
}

*{ /*==== de * selector selecteerd alle elementen in het document dus kun je deze allemaal een property geven  ===*/
    margin: 0; /*==== de margin bepaald de ruimte rond om elementen deze kunnen of gelijk zijn dus door een nummer weergegeven worden of door max 4 numers. hoe meer nummers hoe specifieker de ruimte om het object heen ===*/
    padding: 0; /*==== padding doet het zelfde als margin maar in een box dus zit dit in de margin en de margin zit erbuiten ===*/
} 

body{ /*==== alle selectors zonder een . of # ervoor worden elements genoemd deze veranderen de stijl van de tag met de zelfde naam dus bij deze wordt de body tag over de hele pagina veranderd===*/
    min-height: 100vh; /*==== deze property zet de minimale hoogte van de body. 
    vh betekend relative to the height of the viewport hiermee wordt bedoelt dat als de viewport (browser) 300cm breed is dat 1vw 3cm zou zijn ===*/
    background-color: var(--yellow); 
    font-family: Arial, Helvetica, sans-serif; /*==== met deze property kan je de font familie kiezen voor het document met font familie wordt dus alle soorten van deze font bedoeld zoals bold, regular, italic, etc. ===*/
    font-size: 1em;  /*====  je gebruikt em inplaats van px op een site die responsive moet zijn omdat deze unit de WCAG standaarden voltooien en makkelijker te schalen zijn ===*/
    color: var(--brown); /*==== met deze pas je de kleur van de tekst aan  ===*/
}

#homepagehero_text h1{
    font-size: 6em;
    line-height: 110%; /*====  line height bepaald hoe groot de afstand tussen de alineas is ===*/
}

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



header{
    padding: 20px 25px;
    display: flex; /*==== door dit te gebruiken komen alle elementen automatisch op de juiste hoogte, breedte, kolumn en rij er wordt dus een flex box gecreerd  ===*/
    justify-content: center; /*==== hierdoor gebruiken de items alle ruimte van de container  ===*/
    align-items: center; /*==== hierdoor worden alle flex items op een verticale lijn gecentreerd  ===*/
    gap: 50px; /*====  dit bepaald de ruimte tussen items ===*/
    flex-wrap: wrap; /*==== dit laat de items in een flex box niet alleen verticaal lopen  ===*/
}

.header_grid{
    
    display: grid; /*==== hiermee toon je aan dat je een  grid wilt gaan gebruiken die je helemaal zelf kan inordenen ===*/
    grid-template-columns:1fr; /*==== hiermee laat je zien hoe veel kolumen je wilt hebben deze woorden aangegeven door 1fr. deze unit gebruikt dus 1 fr aan ruimte   ===*/
    grid-template-rows: 1fr; /*==== deze bepaald hoe veel rijtjes jij wilt hebben  ===*/
    grid-template-areas: /*====  template areas bepaalen waar iedere item komt te staan zo zie je hier dat alles naast elkaar zou moeten staan ===*/
    "home aboutme contactme";

}
.header_item{
    display: flex;
    padding: 20px;
    text-align: center; /*==== de tekst wordt gecentreerd  ===*/
    
}
nav{
    margin-bottom: 10px; /*==== bepaald de afstand van de onderkant van wat je oproept met het geen wat daar onder zou moeten komen  ===*/
}

nav ul{
    list-style: none; /*==== haalt de bolletjes weg van de ul lijst stijl   ===*/
    display: flex;
    gap: 20px;
}

nav a{
    color: var(--browndark);
    text-decoration: none; /*==== haalt de lijntjes onder hyperlinks weg  ===*/
}

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

#toggle_button{
    display: none; /*==== verwijderd het hele hamburgermenu zodat deze op desktop niet te zien is  ===*/
}

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

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

#home{
    grid-area: home; /*====  bepaald waar de class home zou moeten komen te staan in een grid ===*/
}

#aboutme{
    grid-area: aboutme;
}

#contactme{
    grid-area: contactme;
}

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

.homepagehero_grid_container{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: .1fr 1fr;
gap: 25px;
grid-template-areas: 
" . . homepagehero_text . . "
" . . hompage_circle . . ";


}

.homepagehero_item{
    display: flex;
}

#circle{
    height: 600px;
    width: 600px;

    max-height: 80vw; /*==== bepaald de maximale hoogte dat deze element zou mogen worden ===*/
    max-width: 80vw;

    overflow: hidden; /*==== alles wat buiten de container komt wordt verborgen  ===*/
    border-radius: 50%; /*==== bepaald hoe afgerond een element is  ===*/
    border: 20px solid var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: hompage_circle;

}

#circle img{
    height: 100%;
    width: 100%;
}

#homepagehero_text{
    grid-area: homepagehero_text;
    text-align: center;
}

.workgrid_container{
    margin: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    grid-template-rows: .1fr 1fr;
    grid-template-areas:
    ". . favoritework_item . . " 
    ". eatvolution reisverslag showcasesite .";
    
}

#favoritework_item{
    
    background-color:var(--brown);
    width: 300px;
    border-radius: 60px;
    padding: 10px 0;
    grid-area: favoritework_item;

 }
 #favoritework_item h1{
    font-size: 3em;
    text-align: center;
    color: var(--yellow)
    }

.card{
    width: 350px;
    max-width: calc(90% - 40px);
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

#eatvolution{
    grid-area: eatvolution;
    
}

#reisverslag{
    grid-area: reisverslag;
}

#showcasesite{
    grid-area: showcasesite;
}

.card h2{
    text-align: center;
    font-size: 2em;
    
}

.card 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); /*==== bepaald de omranding van een element, de px bepaalden de dikte, solid betekend dat het een gehele lijn is en de var is voor de kleuren
     (var= variable, deze roept dus de root variable op om zo hier gebruikt te kunnen worden) ===*/
    transition: 150ms ease-in-out; /*==== bepaald de transitie die het element laat zien zodat het soepeler lijkt, ms is millisecond, 
    ease in en out betekend dat het langzaam erin en eruit gaat   ===*/

    
}

.card a:hover{
    background: transparent;
    color: var(--browndark);
}
.round_rectangle{
    height: 300px;
    width: 300px;

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

    overflow: hidden;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.round_rectangle img{
    object-fit: cover;
    overflow: hidden;
    height: 100%;
    width:100%;
}

.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 h1{
    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);
}

.socialmedia_text h1{
    font-size: 1.1rem;
}



.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){ /*==== een media query is net als een if statement dus als de breedte van een scherm onder de 500px valt gebeurt er dit
    zo kun je dus voor allerlei devices ontwerpen  ===*/
        h1{
            font-size: 12vw;
            text-align: center;
        }
    nav{
        position: fixed; /*==== deze code tot en met label heb ik niet zelf geschreven maar komt van een youtube video  ===*/
        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;
    }

    
        #favoritework_container h2{
            font-size: 9vw;
        }
        .workgrid_container{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;
            grid-template-areas: 
            "favoritework_item"
            "eatvolution"
            "reisverslag"
            "showcasesite";
        }
    
        .card {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .round_rectangle {
            align-self: center;
        }
    
        .card h3{
            font-size: 7vw;
        }
    
        .card a{
            font-size: 4vw;
        }
    
        .card p{
            font-size: 4vw;
        }
    
       .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" ;
    }
    }