/*font*/
@font-face {
    font-family: "tekst";
    src: url(/Fonts/dastin/Dastin.otf)
}





/*algemeen*/
main{
    display: grid;
    grid-gap: 10px; 
    background-color: rgb(0, 0, 0);
}

.block{
    padding:20px; 
    color: white;
    font-size: 4em;
    font-weight:bold;
    text-align:center;
}

.lijst{
    font-size: large;
}

ul li{
    list-style-type: none;
    margin-left: 20px;
    padding: 5px;
    margin-top: 10px;
}


.block4 p{
    margin-bottom: 30px;
}






/*schaalbare foto*/
img{
    max-width: 100%;
    height: auto;
}

.img1, img{
    max-width: 100%;
    height: auto;
}

iframe{
    max-width: 100%;
    height: auto;
}





/*grid*/
.block1{
    margin: 10px;
    max-width: 100%;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
 }

.block2{
    font-family: "tekst";
}

.block3{
    text-align: center;
    align-content: center;
}

.block4{
    font-size: large;
    text-align: left;
    font-family: "tekst";
    font-weight:normal;
    color: rgb(151, 151, 151);
    margin: 0 auto;
}

.block5{
    text-align: center;
}

.block6{
    font-family: "tekst";
    font-size: large;
    font-weight: normal;
    text-align: left;
    padding-top: 50px;
    color:rgb(151, 151, 151);
}

.block7{
    font-family: "tekst";
    font-weight: normal;
    font-size: small;
    color: white;
}





/*mediaqueries*/
@media screen and (min-width:320px) {
    main {
        grid-template-columns: auto;        
    }

    .block.block1{
        grid-row: 1;
    }


    .block.block2{
        grid-row: 2;
    }


    .block.block3{
        grid-row: 3;
    }


    .block.block4{
        grid-row: 5;
    }


    .block.block5{
        grid-row: 4;
    }


    .block.block6{
        grid-row: 6;
    }


    .block.block7{
        grid-row: 7;

    }
}

@media screen and (min-width:992px) {
    main {
    grid-template-columns: 1fr 1fr;
    }

    .block.block1{
        grid-row: 1;
        grid-column: span 2;
        max-width: 100%;
        height: auto;
    }


    .block.block2{
        grid-row: 2;
        grid-column: span 2;
    }


    .block.block3{
        grid-row: 3;
        grid-column: 1;
    }


    .block.block4{
        grid-row: 3;
        grid-column: 2;
    }


    .block.block5{
        grid-row: 4;
        grid-column: 1;
    }


    .block.block6{
        grid-row: 4;
        grid-column: 2;
    }


    .block.block7{
        grid-row: 5;
        grid-column: span 2;
    }
}