/*fonts*/
@font-face {
    font-family: "titel";
    src: url(/fonts/Sulphur_Point/SulphurPoint-Bold.ttf);
}

@font-face {
    font-family: "leestekst";
    src: url(/fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf);
}





/*algemene opmaak*/
main{
    display: grid;
    grid-gap: 10px; 
    background-color: rgb(3, 3, 58);
}

.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{
    background-color: rgb(226, 43, 70);
    font-family: "titel";
}

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

.block4{
    font-size: small;
    text-align: left;
    font-family: "leestekst";
    font-weight:normal;
    color: blanchedalmond;
    margin: 0 auto;
}

.block5{
    text-align: center;
}

.block6{
    font-family: "leestekst";
    font-size: small;
    font-weight: normal;
    text-align: left;
    padding-top: 50px;
    color:blanchedalmond;
}

.block7{
    font-family: "leestekst";
    font-weight: normal;
    font-size: small;
    color: white;
    background-color:rgb(226, 43, 70) ;
}





/*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;
    }
}