body {
    margin: 0;
    background-color: #ac988e;
}


nav {
    background-color: #796656;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 68px;
}

h1 {
    grid-column-start: 2;
    display: flex;
    justify-content: center;
    color:  #523824; 
     font-size: 30px;
 
}

.klasi {
    grid-column-start: 3;
    display: flex;
    justify-content: end;
    margin-right: 70px;
    color: #523824;
     font-size: 30px;
}

h3 {
    display: flex;
    justify-content: center;
    margin-top: 115px;
    color: #523824;
    cursor: pointer;
    font-size: 30px;
    text-shadow: 2px 2px #daccc2;

}


.kaartje {
    border: 4px solid #796656;
    border-radius: 50px;
    display: relative;
    justify-content: center;
    height: 300px;
    margin-bottom: 80px;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ab9182;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 140px;
}

.logo {
    width: 100px;
    margin-top: -15px;
}

footer {
    background-color: #796656;
     height: 220px;
     
}

.column {
    float: left;
    width: 350px;
    padding: 8px;
}

.pijl {
    position: absolute;
    padding: 0px 300px;
    margin-top: -25px
    
}

@media (max-width: 480px){
    .pijl {
        padding: 0;
    }
    footer{
        height: 800px;
    }
}

@media (max-width: 768px) and (min-width: 481px){
    .pijl {
        padding: 0;
    }
    .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .column{
        float: none;
   }
   footer{
    height: 400px;
   }
}