@font-face {
    font-family: Crash;
    src: url(../font/CrashSite.ttf);
  }
body{
    background-color: rgb(49, 49, 49);
}
nav ul{
    list-style-type: none;
    padding-top: 1.5%;
}
nav ul{
    display: grid;
    grid-template-columns: 16% 16% 16% 16%;
    grid-row: 1;
    grid-column: 2;
}
nav ul li a{
    text-decoration: none;
    color: black;
    font-size: 40px;
    margin-left: 148px;
     
}
nav ul li:nth-child(1){
    grid-column: 1;
    font-family: Crash;
    margin-left: -111px;
}
nav ul li:nth-child(2){
    grid-column: 2;
    font-family: Crash;
    margin-left: -78px;
}
nav ul li:nth-child(3){
    grid-column: 3;
    font-family: Crash;
    margin-left: -40px;
}
nav ul li:nth-child(4){
    grid-column: 4;
    font-family: Crash;
    margin-left: -42px;
}
nav{
    background-color: rgb(139, 226, 183);
    display: grid;
    grid-template-columns: 20% 80%;
    padding-bottom: 25px;
    height: 80px;
}
nav img{
    width: 200px;
    padding-top: 10px;
    margin-top: 1%;
    margin-left: 4%;
}
nav p{
    grid-column: 1;
    font-size: 30px;
    margin-left: 41px;
}
nav img{
    width: 30px;
    margin-top: -70px;

}

#sectionindex{
        display: grid;
        grid-template-columns: 19% 10% 14% 40%;
        grid-template-rows: 30px 800px;
        grid-column-gap: 5%;
    img{
        width: 350px;
        grid-column: 1/2;
        margin-left: 100px;
        grid-row: 2;
    }
    a img:nth-child(1){
        width: 69px;
        grid-column: 1;
        grid-row: 1;
        margin-top: 50px;
        margin-left: 12px
    }
    p:nth-child(3){
        color: white;
        grid-column: 1;
        grid-row: 2;
        text-align: center;
        font-size: 20px;
        margin-left: -198px;
        margin-top: 68px;
    }
}
#asideindex{
    grid-column: 4;
    grid-row: 2;
    p:nth-child(1){
        color: white;
        width: 486px;
    }
    p:nth-child(2){
        color: white;
        width: 486px;
        margin-left: -110px;   
    }
    p:nth-child(3){
        color: white;
        width: 486px;
        margin-left: 61px;
    }
    p:nth-child(4){
        color: white;
        width: 486px;
        margin-left: -41px;
    }
    p:nth-child(5){
        color: white;
        width: 486px;
        margin-left: -162px;
    }
    p:nth-child(6){
        color: white;
        width: 486px;
        margin-left: 42px;
    }
    #Matteo{
        color: rgb(139, 226, 183);
    }
    #programmeren{
        color: rgb(139, 226, 183);
    }
    #pulserende{
        color: rgb(139, 226, 183);
    }
    #verbetering{
        color: rgb(139, 226, 183);
    }
    #brommers{
        color: rgb(139, 226, 183);
    }
    #vrienden{
        color: rgb(139, 226, 183);
    }
}
#articleindex{
    grid-row: 2;
    grid-column: 3;
    display: grid;
    grid-template-rows: 30px 30px 30px 30px;
}

#articleindex button:nth-child(1){
    color: white;
    background-color: black;
}
#articleindex button:nth-child(3){
    color: white;
    background-color: black;
}
#footerindex{
    display: grid;
    grid-template-columns: 38% 33% 33%;
    img:nth-child(1){
        width: 50px;
        grid-column: 2;
    }
    a:nth-child(2){
        font-size: 30px;
        grid-column: 2;
        margin-left: 57px;
        margin-top: -45px;
        text-decoration: none;
        color: white;
    }
}

#headindex{
    display: grid;
    grid-template-columns: 10% 20% 30% 40%;
    grid-template-rows: 462px 130px;

    p:nth-child(1){
        color: white;
        grid-column: 4;
        font-size: 60px;
    }
    img:nth-child(2){
        color: white;
        grid-column: 2;
        grid-row: 1;
        width: 240px;
        margin-top: 20px;
    }
    img:nth-child(3){
        color: white;
        grid-column: 3;
        grid-row: 1;
        width: 247px;
        margin-top: 20px;
    }
}
#vakken{
    display: grid;
    grid-template-columns: 5% 10% 20% 20% 27% 10% 5%;
    grid-template-rows: 78px 303px 200px;
    img:nth-child(2){
        width: 300px;
        grid-column: 3;
        grid-row: 2;
    }
    img:nth-child(3){
        width: 420px;
        grid-column: 5;
        grid-row: 2;
    }
    p:nth-child(4){
        color: white;
        grid-column: 3;
        grid-row: 3;
        text-align: center;
    }
    p:nth-child(5){
        color: white;
        grid-column: 5;
        grid-row: 3;
        text-align: center;
    }
    h1:nth-child(1){
        color: white;
        grid-column: 2;
        grid-row: 1;
        text-align: center;
    }
    a img:nth-child(1){
        width: 69px;
        grid-column: 1;
        grid-row: 1;
        margin-top: 50px;
    }
    p:nth-child(7){
        color: white;
        grid-column: 1;
        grid-row: 2;
        text-align: center;
        font-size: 20px;
    }
    
}
#dier{
    display: grid;
    grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px
    20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 100px;
    h1{
        color: white;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        grid-column: 2/4; 
        grid-row: 3/4;
    }
    img{
        width: 400px;
    }
    p{
        grid-column:2/5 ;
        grid-row: 8/31;
        color: white;
        font-size: 20px;
        text-align: center;
    }
    img:nth-child(2){
        width: 200px;
        grid-column: 16/18 ;
        grid-row: 5/10;
    }
    img:nth-child(6){
        width: 200px;
        grid-column: 16/18 ;
        grid-row: 13/26;
    }
    img:nth-child(5){
        width: 384px;
        grid-column: 7/12 ;
        grid-row: 5/26;
        
    }
    img:nth-child(4){
        width: 200px;
        grid-column: 13/16 ;
        grid-row: 13/26;
        margin-left: -20px;
    }
    img:nth-child(3){
        width: 250px;
        grid-column: 12/16 ;
        grid-row: 5/10;
        margin-left: 27px;
    }
    a img:nth-child(1){
        width: 69px;
        grid-column: 1;
        grid-row: 1;
        margin-top: 50px;
    }
    p:nth-child(9){
        color: white;
        grid-column: 1;
        grid-row: 5;
        text-align: center;
    }
}