body{
    background-color: beige;
    display: fixed;
    font-family: Bodoni,sans-serif;
}

.container{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    
}
@font-face {
    font-family: "Bodoni";
    src: url("../fonts/Bodoni\ 72.ttc");
}
.container .block{
    font-weight: bold;
}

/*voor schermen*/

.block.block1{
    grid-row: 1;
    grid-column: 1 / span 4;

 }

.block.block2{
    border: 6px solid #641e1e;
    color: black;
    grid-row: 2 ;
    grid-column: 1 / span 4;
}
.block.block3{
    grid-row: 3 ;
    grid-column: 1 / span 2;
}
.block.block4{
    grid-row: 3 ;
    grid-column: 3 / span 2;
}
.block.block5{
    grid-row: 4;
    grid-column: 1 / span 2;
    
}
.block.block6{
    grid-row: 4;
    grid-column: 3 / span 2;
}
.block.block7{
    grid-row: 5;
    grid-column: 1 / span 4;
}

/*voor gsm-screen*/
@media screen and (min-width: 320px) {
    .container {
        grid-template-columns: auto;

    }
    .block.block1,
    .block.block2,
    .block.block3,
    .block.block4,
    .block.block6,
    .block.block7
    {
        grid-column: auto;
        grid-row: auto;
    }
   
    .tekstvier{
        font-size: 12px;
        color: black;
        padding: 20px;
        font-weight: bold;
        text-align: justify;
        line-height: 1.5em;
    }
    .block.block5 {
        grid-column: 1;
        grid-row:4;
    }
    .block.block2{
        color: black;
        font-size: 24px;
        background-color: beige;
    }
   
    .block.block4{
        font-size: 13px;
        line-height: 1.5em;
        text-align: justify;
    }
    .block.block6{
        font-size: 16px;
        line-height: 3.6em;
    }
    .bullets{
            list-style-type: circle;
    }

  }
  /*voor tablets*/

  @media screen and (min-width: 768px) {
    .container {
        grid-template-columns: auto;
    }
    .block.block1{
        grid-row: 1;
        grid-column: 1 / span 4;
     }
     .eerstefoto{
        position: absolute;
        margin: 39px;
        width: 230px;
        left: 22%;
        right:0;
        z-index: 1;
        opacity: 0.9;
     }
    
     .anderfoto{
        position: absolute;
        margin: 39px;
        width: 230px;
        left: 22%;
        right:0;
        z-index: 1;
        opacity: 0.8;
    
     }
     .tekstvier{
        font-size: 14px;
        color: black;
        padding: 20px;
        font-weight: bold;
        text-align: justify;
        line-height: 1.5em;
    }
    .block.block2{
        background-color: beige;
        color: black;
        grid-row: 2 ;
        grid-column: 1 / span 4;
    }
    .block.block3{
        grid-row: 3 ;
        grid-column: 1 / span 2;
    }
    .block.block4{
        grid-row: 3 ;
        grid-column: 3 / span 2;
    }
    .block.block5{
        grid-row: 4;
        grid-column: 1 / span 2;
        
    }
    .block.block6{
        grid-row: 4;
        grid-column: 3 / span 2;
    }

    .bullets{
        list-style-type: circle;
    }

    .list{
        font-size: 16px;
        line-height: 3.6em;
        margin-top: 15%;
        text-align: justify;
    }
    .block.block7{
        grid-row: 5;
        grid-column: 1 / span 4;
    }
  }

  /*voor computer schermen*/

  @media screen and (min-width:1200px) {
    main{
        grid-template-columns: auto auto auto ;
    }
    .block.block1{
        grid-row: 1;
        grid-column: 1 / span 4;
     }
     .eerstefoto{
        position: absolute;
        margin: 39px;
        width: 230px;
        left: 22%;
        right:0;
        z-index: 1;
        opacity: 0.9;
     }
    
     .anderfoto{
        position: absolute;
        margin: 39px;
        width: 230px;
        left: 22%;
        right:0;
        z-index: 1;
        opacity: 0.8;
    
     }

    .block.block2{
        background-color: beige;
        grid-row: 2 ;
        grid-column: 1 / span 4;
    }
    .titel{
        font-size: 24px;
        background-color: none;
        color: black;
    }
    .block.block3{
        grid-row: 3 ;
        grid-column: 1 / span 2;

    }
    .block.block4{
        grid-row: 3 ;
        grid-column: 3 / span 2;
    }
    .tekstvier{
        font-size: 14px;
        color: black;
        padding: 20px;
        font-weight: bold;
        text-align: justify;
        line-height: 1.5em;
    }
   
    .block.block5{
        grid-row: 4;
        grid-column: 1 / span 2;
        
    }
    .block.block6{
        grid-row: 4;
        grid-column: 3 / span 2;
    }
    /*footer*/
    .list{
        font-size: 16px;
        line-height: 3.6em;
        margin-top: 15%;
        text-align: justify;
    }

    /*footer*/

    .bullets{
        list-style-type: circle;
    }

    .block.block7{
        grid-row: 5;
        grid-column: 1 / span 4;
    }
    .footer{
        font-size: 12px;
        text-transform: uppercase;
    }
}