.kaft {
    display: grid;
    grid-template-areas:
    'hoofding'
    'nav'
    'lich'
    'voet';
    /*grid-template-rows: 10vw 8vw 1fr 6vw ;*/
    grid-template-rows: minmax(45px, 5vw) minmax(40px, 7vw) 1fr minmax(30px, 4vw);
    grid-template-columns: 1fr;
    gap: 3px;
    margin: auto;
    width: 60%;
}

    img.kroniek {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.5vw;
    /*opacity: 0;
    animation: fadeIn 2s forwards;*/
}
/*img.kroniek.toon {
    opacity: 1;
}*/
p#titel {
    text-align:center;
    border-bottom:3px ridge  #FFFF33;
    border-top:3px solid  #FFFF33;
    font-family: Arial;
    font-weight: 600;
    background-color:  black;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    font-size: 1 rem;
    max-width: 95%;
    color: white;
    margin-left: auto;
    margin-right: auto;    
    max-width: 100%;
    padding-top: .5vw;
    padding-bottom: .5vw;
    color: white;
}
p#titelpluim {
    text-align: center;
     font-family: "Chelsea Market";
     font-size: 1rem;
     color:antiquewhite;
     margin-top: -1vh;
}
/* Zorg dat de afbeelding soepel in- en uitfadet */
#kroniek {
    transition: opacity 1s ease;
    opacity: 1;
    display: block;
    max-width: 100%;
    height: auto;
}

.hidden {
    opacity: 0;
}
/* Zorgt voor een vloeiende overgang van een halve seconde */
#kroniek, #titel {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

/* Deze klasse gebruiken we om de elementen onzichtbaar te maken */
.verborgen {
    opacity: 0 !important;
}

@media only screen and (max-width: 600px) {
    .kaft {
        width: 95%;
    }

    img.kroniek {
    max-width: 100%;
    height: auto;
    margin-left: 0%;
    }

    p#titelpluim {
        margin-top: 2vh;
    }


}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}