@font-face{
    font-family: DMserif;
    src: url(../webfonts/DMSerifDisplay-Regular.ttf);
}

@font-face{ /* Eigen font ingevoegd, font-family is de zelf gekozen naam en src is de bron waarin de font lokaal is opgeslagen */
    font-family: TTHoves;
    src: url(../webfonts/TTHoves-Regular.ttf)
}

body{
    background-color: rgb(29, 29, 29);
    padding-bottom: 30px;
    height: 100%;
}

h1{
    font-family: DMserif;
    color: antiquewhite;
}

h2{
    color: rgb(209, 194, 174);
    font-family: DMserif;
}

h3{
    color: antiquewhite;
    font-family: DMserif;
}

p{
    color: rgba(245, 245, 245, 0.938);
    font-family: TTHoves;
}

a{
    font-family: TTHoves;
}

.container{
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(12, 1fr);
    max-width: 960px;
    margin: 0 auto;
}

/* Begin Navigatie */



/* Einde Navigatie */

/* Begin header */

#navcontainer{
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    height: 600px;
    background-image: url("../images/background2.png");
    background-position: center; /* Zodat het middelste gedeelte van de achtergrond-image wordt gebruikt */
    background-size: cover; /* Zorgt ervoor dat de afbeelding in zijn geheel als achtergrond wordt gebruikt */
    box-sizing: border-box; /* Zorgt ervoor dat de padding zich binnen d e gewenste grootte van de webpagina bevindt */
}

#navcontainer h1{
    font-size: 40px;
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
}

#navcontainer h2{
    padding-bottom: 30px;
    text-align: center;
}

#navcontainer .logo{
    height: 20px;
    padding-top: 20px; /* Zorgt ervoor dat het logo niet direct tegen de bovenrand aan staat, maar dat er een soort onzichtbare muur tussen komt */
    padding-left: 20px; /* Zorgt ervoor dat het logo niet direct tegen de linkerkant aan staat, maar dat er een soort onzichtbare muur tussen komt */
    max-height: 50px; /* De maximale hoogte van de afbeelding */
}

#nav{
    max-height: 70px;
    padding-top: 20px;
}

#nav .card:nth-child(1){
    height: 4%;
    grid-column: 1 / span 4;
    padding-left: 5px;
}

#nav .card:nth-child(2){
    grid-column: 6 / span 6;
}

#nav li{
    display: inline-block;
    padding-left: 5px;
}

#nav li a{
    text-decoration: none;
    color: white;
    font-size: 110%;
}

#nav .card:nth-child(3){
    height: 8%;
    grid-column: 12 / span 1;
    padding-right: 5px;
}


#socialcontainer{
    grid-template-columns: repeat(12, 1fr);
    text-align: center;
}

#socialcontainer img{
    height: 40px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

/* Einde header */


/* Begin homepageHero */

#homepageHero{
    padding-top: 20px;
    grid-gap: 20px; /* Add some gap between grid items */
}

#homepageHero .card:nth-child(1){
    grid-column: 2 / span 4;
}

#homepageHero .card:nth-child(2){
    grid-column: 2 / span 6;
}

#homepageHero .card:nth-child(3){
    height: 100px;
    grid-column: 8 / span 4;
    padding-bottom: 30px;
}

/* Einde homepageHero */

/* Begin Skills */

#skillTitle{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

#skillTitle h2{
    grid-column: 2 / span 4;
    padding-bottom: 20px;
}

#skills img{
    height: 40px;
}


#skills .card:nth-child(1){
    grid-column: 2 / span 6;
    padding: 20px 0px 20px 0px;
}

#skills .card:nth-child(2){
    grid-column: 2 / span 3;
    text-align: center;
}

#skills .card:nth-child(3){
    grid-column: 6 / span 3;
    text-align: center;
}

#skills .card:nth-child(4){
    grid-column: 10 / span 2;
    text-align: center;
    padding-bottom: 60px;
}


/* Einde Skills */

/* Begin Mijn Werk */

#mijnwerk .card:nth-child(1){
    grid-column: 2 / span 4;    
}

#mijnwerk .card:nth-child(2){
    grid-column: 2 / span 6;  
    padding-bottom: 30px;
}

#werk1 .card:nth-child(1){
    grid-column: 2 / span 4; 
}

#werk1 .card:nth-child(2){
    grid-column: 2 / span 4;
}

#werk1 .card:nth-child(3){
    grid-column: 2 / span 6;
}

#werk1 .card:nth-child(4){
    grid-column: 9 / span 3;
    height: 70px;
    padding-bottom: 30px;
}

#werk1 .card:nth-child(5){
    grid-column: 2 / span 4;
    margin-right: 35px;
}

#werk2 .card:nth-child(1){
    grid-column: 6 / span 5;
}

#werk2 .card:nth-child(2){
    grid-column: 6 / span 5;
}

#werk2 .card:nth-child(3){
    grid-column: 6 / span 5;
}

#werk2 .card:nth-child(4){
    grid-column: 2 / span 4; 
    height: 70px;

}

#werk2 .card:nth-child(5){
    grid-column: 6 / span 4;
    margin: 0px 30px 25px 0px;
}

#werk3 .card:nth-child(1){
    grid-column: 2 / span 4; 
}

#werk3 .card:nth-child(2){
    grid-column: 2 / span 4;
}

#werk3 .card:nth-child(3){
    grid-column: 2 / span 6;
}

#werk3 .card:nth-child(4){
    grid-column: 9 / span 3;
    height: 70px;
    padding-bottom: 30px;
}

#werk3 .card:nth-child(5){
    grid-column: 2 / span 4;
    margin-right: 35px;
}

#werk1{
    background-color: rgb(36, 36, 36);
    border-radius: 30px; 
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
}

#werk2{
    background-color: rgb(36, 36, 36);
    border-radius: 30px; 
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
}

#werk3{
    background-color: rgb(36, 36, 36);
    border-radius: 30px; 
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
}

#werk1 a{
    text-decoration: none;
    color: white;
    border: 2px solid white; 
    display: inline-block; 
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}

#werk2 a{
    text-decoration: none;
    color: white;
    border: 2px solid white; 
    display: inline-block; 
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}

#werk3 a{
    text-decoration: none;
    color: white;
    border: 2px solid white; 
    display: inline-block; 
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}


#allProjects {
    text-align: center;
    padding-bottom: 30px;
}
#allProjects a{
    color: antiquewhite;
    font-size: 22px;
}


/* Einde mijn Werk */

/* Begin CalltoAction */

#calltoAction{
    background-color: rgb(36, 36, 36);
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
}

#calltoAction img{
    height: 30px;
}

#calltoAction .card:nth-child(1){
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2 / span 10;
    padding-top: 15px;
    font-size: 20px;
}

#calltoAction .card:nth-child(2){
    text-align: center;
    grid-column: 3 / span 8;
    padding-bottom: 20px;
}

#calltoAction .card:nth-child(3){
    text-align: center;
    grid-column: 3 / span 1;
}

#calltoAction .card:nth-child(4){
    text-align: center;
    grid-column: 5 / span 1;
}

#calltoAction .card:nth-child(5){
    text-align: center;
    grid-column: 8 / span 1;
}

#calltoAction .card:nth-child(6){
    text-align: center;
    grid-column: 10 / span 1;
}

/* Einde call to action */

/* Begin Footer */

#siteFooter{
    background-color: #141414;
    height: 100px;
    margin-bottom: -30px;
    padding-top: 50px;
}

#siteFooter .card:nth-child(1){
    grid-column: 2 / span 2;
    height: 20px;
}

#siteFooter .card:nth-child(2){
    grid-column: 4 / span 4;
    margin-left: -20%;
}

#siteFooter .card:nth-child(3){
    grid-column: 9 / span 1;
    height: 20px;
}

#siteFooter .card:nth-child(4){
    grid-column: 10 / span 1;
    height: 20px;
}

#siteFooter .card:nth-child(5){
    grid-column: 11 / span 1;
    height: 20px;
}

/* Einde Footer */

/* Einde Index Pagina */

/* Begin CV Pagina */

/* Header CV */

#navcontainer2{
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    height: 50%;
    box-sizing: border-box; /* Zorgt ervoor dat de padding zich binnen de gewenste grootte van de webpagina bevindt */
}

#algemeneinfo{
background-color: #545454;
border-radius: 20px;
margin: 20px;
padding-top: 10px;
}

#algemeneinfo #cvHead img{
    height: 130px;
    padding-bottom: 9%;
}

#cvHead .card:nth-child(1){
    grid-column: 3 / span 2;
}

#cvHead .card:nth-child(2){
    grid-column: 7 / span 2;
    font-size: 150%;
    color: rgb(245, 232, 214);
    padding-bottom: 13%;
}

#cvHead .card:nth-child(3){
    grid-column: 7 / span 2;
    font-size: 130%;
    color: rgb(211, 199, 183);
    padding-bottom: 13%;
}

#basicInfo{
    padding-bottom: 20px;
}

#basicInfo a{
    text-decoration: none;
    color: #faebd7;
    padding-left: 5%;
}

#basicInfo .card{
    background-color: #919191;
    padding: 2% 2% 2% 2%;
    border-radius: 10px;
}

#basicInfo .card:nth-child(1){
    grid-column: 2 / span 10;
    padding: 3% 3% 3% 3%;
}

#basicInfo .card:nth-child(2){
    grid-column: 2 / span 10;
}

#basicInfo .card:nth-child(3){
    grid-column: 2 / span 10;
}

#basicInfo .card:nth-child(4){
    grid-column: 2 / span 10;
}

#knowledge{
    padding-bottom: 20px;
}

#knowledge .card{
    background-color: #919191;
    padding: 2% 2% 2% 2%;
    border-radius: 10px;
}

#knowledge ul{
    padding: 10px 0px 0px 20px;
    color: white;
    font-family: TThoves;
    list-style: circle;
}

#knowledge .card:nth-child(1){
    grid-column: 2 / span 10;
}

#languages{
    padding-bottom: 20px;
}

#languages .card{
    background-color: #919191;
    padding: 2% 2% 2% 2%;
    border-radius: 10px;
}

#languages ul{
    padding: 10px 0px 0px 10px;
    color: white;
    font-family: TThoves;
}

#languages .card:nth-child(1){
    grid-column: 2 / span 10;
}

#languages li svg{
    padding-left: 5%;
}
#hobbies{
    padding-bottom: 20px;

}

#hobbies .card{
    background-color: #919191;
    padding: 2% 2% 2% 2%;
    border-radius: 10px;
    grid-column: 2 / span 10;
}

#hobbies ul{
    padding: 10px 0px 0px 10px;
    color: white;
    font-family: TThoves;
}

#hobbies img{
    padding-right: 20px;
}

/* Begin Ervaring */

#ervaring{
    background-color: #E5DDC9;
    border-radius: 20px;
    margin: 20px;
    padding-top: 10px;
}

#ervaring h2{
    color: white;
    font-family: TThoves
}

#ervaring .card h2{
    color: #545454;
    font-size: 150%;
    padding-bottom: 10px;
    font-weight: bold;
}

#ervaring .card h3{
    color: #343434;
    font-size: 130%;
    padding-bottom: 10px;
    font-family: TThoves;
}

#ervaring .card h4{
    color: #73808D;
    font-size: 110%;
    padding-bottom: 10px;
    font-family: TThoves;
}

#ervaring .card p{
    color: #000000;
    font-size: 100%;
    padding-bottom: 10px;
    font-family: DMserif;
}

/* Einde ervaring */

#experience .card:nth-child(1){
    grid-column: 2 / span 5;
    text-align: center;
    padding: 3%;
    background-color: #919191;
    border-radius: 10px;
}

#experience .card:nth-child(2){
    grid-column: 2 / span 10;
    padding: 3%;
}

#experience .card:nth-child(3){
    grid-column: 2 / span 10;
    padding: 3%;
}

#experience .card p{
    font-family: TThoves
}

/* Einde experience */

/* Begin education */

#educationh2{
    color: white;
    font-family: TThoves
}

#education .card h2{
    color: #545454;
    font-size: 150%;
    padding-bottom: 10px;
    font-weight: bold;
}

#education .card h3{
    color: #343434;
    font-size: 130%;
    padding-bottom: 10px;
    font-family: TThoves;
}

#education .card h4{
    color: #73808D;
    font-size: 110%;
    padding-bottom: 10px;
    font-family: TThoves;
}

#education .card p{
    color: #000000;
    font-size: 100%;
    padding-bottom: 10px;
    font-family: DMserif;
}


#education .card:nth-child(1){
    grid-column: 2 / span 5;
    text-align: center;
    padding: 3%;
    background-color: #919191;
    border-radius: 10px;
}

#education .card:nth-child(2){
    grid-column: 2 / span 10;
    padding: 3%;
}

#education .card:nth-child(3){
    grid-column: 2 / span 10;
    padding: 3%;
}

/* einde education */

/* Begin skills2 */

#skills2 img{
    padding: 2% 15% 2% 2%;
}

#skills2 .card h2{
    color: #545454;
    font-size: 150%;
    padding-bottom: 10px;
    font-weight: bold;
}

#skills2 .card:nth-child(1){
    grid-column: 2 / span 5;
    text-align: center;
    padding: 3%;
    background-color: #919191;
    border-radius: 10px;
}

#skills2 .card:nth-child(2){
    grid-column: 2 / span 10;
}

#skills2  .card:nth-child(3){
    grid-column: 2 / span 10;
}

#skills2  .card:nth-child(4){
    grid-column: 2 / span 10;
}

/* Einde CV Pagina */

/* Begin Contact pagina */

#contactcalltoaction .card{
    text-align: center;
    grid-column: 2 / span 10;
    font-family: TThoves;
    font-weight: bold;
}

#contactcalltoaction .card:nth-child(1){
    font-size: 150%;
    padding: 10% 0% 10% 0%;
}

#contactcalltoaction .card:nth-child(2){
    font-size: 120%;
    padding: 10% 0% 0% 0%;
}

#contactcalltoaction .card:nth-child(3){
    font-size: 120%;
    padding: 0% 0% 30% 0%;
}

#contactinfo{
    background-color: antiquewhite;
    margin: 0% 5% 0% 5%;
    border-radius: 10px;
    padding: 0px 0px 20px 0px;
}

#contactinfo .card:nth-child(1){
    color: #000000;
    padding: 20px 0px 0px 0px;
}

#contactinfo a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
}

#contactinfo .card{
    text-align: center;
    grid-column: 3 / span 9;
    margin-left: -5%;
}

#contactform .card{
    grid-column: 2 / span 9;

}

input[type=text] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid rgb(255, 255, 255);
    background-color: rgb(29, 29, 29);
    color: white;
    transition: width 0.4s ease-in-out;
  }

input[type="submit"] {
    background-color: #000000;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    font-family: TThoves;
    font-weight: bold;
}

input[type=text]:focus {
    width: 60%;
  }

#contactform .card:nth-child(9){
    background-color: #343434;
    color: white;
    resize: both;
    border: 1px solid wheat;
    border-radius: 10px;
}

#contactform .card:nth-child(11){
    grid-column: 4 / span 4;
    height: 100%;
    padding-bottom: 40%;
    margin-top: -15%;
}


#contactform{
    padding: 10% 0% 0% 0%;
    font-family: TThoves;
    color: white;
}

/* Media queries */

@media print {
    header, nav, footer, aside, form, … {
        display: none;
    }
    h1, h2, h3, a, p, li, …{
        color: rgb(0, 0, 0);
    }

    article {
        width:100%!important;
        padding:0!important;
        margin:0!important;
      }


      #basicInfo .card a{
        color: #000000;
        background-color: #343434;
    }
}


@media only screen and (min-width: 1200px){
    #werk1 a{
        margin-right: 180px!important;
    }

    #werk2 .card:nth-child(5){
        margin: 0px 180px 30px 0px!important;
    }

    #werk3 .card:nth-child(5){
        margin-right: 180px!important;
    }
}

@media only screen and (min-width: 992px){
    h2{
        font-size: 25px;
    }
    
    #navcontainer{
        height: 1000px;
    }

    #homepageHero .card:nth-child(2){
        max-width: 300px;
    }

    #homepageHero .card:nth-child(3){
        height: 140px;
    }

    #nav .card:nth-child(1){
        height: 8%;
    }
    #nav .card:nth-child(2){
        font-size: 30px;
    }

    #nav .card:nth-child(3){
        height: 12%;
    }

    header{
        padding-top: 100px;
    }
    header h1{
            font-size: 60px!important;
        }
    header h2{
            font-size: 35px!important;
    }
    #werk1, #werk2, #werk3, … {
            width: 50%;
            margin-left: 25%;
    }

    #werk1 .card:nth-child(5){
        margin-right: 85px;
    }

    #werk2 .card:nth-child(5){
        margin: 0px 85px 30px 0px;
    }

    #werk3 .card:nth-child(5){
        margin-right: 85px;
    }

    #werk1 .card:nth-child(4){
        height: 150px;
        margin-bottom: -50px;
        margin-top: -50px;
    }

    #werk2 .card:nth-child(4){
        height: 150px;
        margin-top: -100px;
    }

    #werk3 .card:nth-child(4){
        height: 150px;
        margin-bottom: -50px;
        margin-top: -50px;
    }

    #calltoAction{
        width: 50%;
        margin-left: 25%;
    }

    #siteFooter .card:nth-child(1){
        margin: 0px 50px 0px 50px
    }

    #siteFooter .card:nth-child(3), #siteFooter .card:nth-child(4), #siteFooter .card:nth-child(5){
        margin: 0px -50px 0px -50px;
        height: 30px;
    }

    /* Begin CV */

    #cv{
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(12, 1fr) ;
        margin: 20px 130px;
    }

    #algemeneinfo{
        grid-column: 1 / span 5;
        background-color: #545454;
        border-radius: 20px;
        margin-left: 10%!important;
        }   


    #ervaring{
        grid-column: 6 / span 6;
    }

    /* Einde CV */

    #contactcalltoaction .card:nth-child(1){
        font-size: 50px!important;
        padding-bottom: 5%!important;
    }

    #contactcalltoaction .card:nth-child(2){
        font-size: 30px!important;
        padding-bottom: 5%!important;
    }

    #contactcalltoaction .card:nth-child(3){
        font-size: 30px!important;
        padding-bottom: 5%!important;
    }

    #contactinfo{
        margin: 0% 30% 0% 30%;
    }

    #contactform{
        margin-top: -80px;
    }
    }