/*---Mijn index is desktop first (behalve navigatie, maar de rest van mijn website is mobile-first, hierom heeft index een aparte responsive pagina---*/

@Media screen and (max-width: 400px){
    h3 {font-size: 23px;}
    h4 {font-size: 21px;}
    p {font-size: 17px;}
}


/*---------------------HEADER--------------------------*/
@media screen and (max-width: 870px) {
    header{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: max-content;
        margin: 0;
        justify-content:left;
    }
    #headerLeft{
        grid-row-start: 2;
        width: 100%;
    }
    #headerRight{
        grid-row-start: 1;
        height: 40%;
        margin-top: 5em;
    }
}

/*------HEADER LINKS / ONDER------*/
@media screen and (max-width: 960px){
    #headerLeft{scale: 100%;}
}
@media screen and (max-width: 870px){
    #headerLeft{scale: 90%;}
}
@media screen and (max-width: 500px){
    #headerLeft{
        scale: 70%;
    }
}

/*------HEADER RECHTS / BOVEN------*/
@media screen and (max-width: 1100px){
    #portret{
        width: 50%;
    }
}
@media screen and (max-width: 870px){
    #portret{
        width: 30%;
    }
}

@media screen and (max-width: 500px){
    #portret{
        width: 40%;
    }
}


/*--------------------OVER MIJ----------------------*/
@media screen and (max-width:870px){
    #overMij{
        grid-template-columns: 1fr;
        grid-template-rows: max-content auto;
    }
    #overMijFotos{
        height: max-content;
        margin: 0 auto;
    }
    #overMijTekst{
        padding: 0;
    }
    #overMijTekst > p{
        padding: 0;
    }
}
@media screen and (max-width: 500px){
    #overMijFotos{
        scale: 80%;
    }
    #overMij{
        width: 97%;
        margin: auto;
    }
}

/*--------------------OVER MIJ----------------------*/
@media screen and (max-width:870px){
    #skillsGrid{
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        width: 97%;
        margin: 0;
    }
    #skillsRondjes, #skillsTekst{
        padding: 0;
        width: 90%;
    }
    .progressBar{
        font-size: smaller;
    }
}

/*--------------------OVER MIJ----------------------*/
@media screen and (max-width:870px){
    .projContent{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 2em;
    }
    .projTitel{
        margin: 0;
    }
    .projContent > p {
        margin: 0;
    }
}

/*--------------------CONTACT----------------------*/
@media screen and (max-width:870px){
    #contactGrid{
        grid-template-columns: auto;
    }
    #contactInformatie, #contactInformatie > p{
        margin: 0;
        width: 97%;
    }
    label, input, textarea{
        margin: auto;
        width: 90%;
    }
}