* {
    box-sizing: border-box;
    transition: all 0.2s;
}

body { 
    max-width: 50em;
    margin: 2em auto;
    font-family: "Noto Serif", "Georgia", serif;
}
a {
    color: #00420f;
}

.report-list {
    padding: 0;
}
    .report-list li {
        list-style-type: none;
    }
    .report-list a {
        padding: .5em;
        display: block;
        background-color: whitesmoke;
        margin-bottom: .25em;
        color: black;
        text-decoration: none;
    }
    .report-list a:hover {
        background-color: gainsboro;
    }

.top {
    float: right;
    background: #00420f;
    color: white;
    padding: 0.5em;
}


.flexbox-container {
    display: flex;
    height: 100vh; /* Volledige hoogte van het venster */
}

.sidebar {
    flex: 1; /* Of een vaste breedte: bijvoorbeeld 200px */
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box; /* Zorg ervoor dat padding niet de breedte beïnvloedt */
    height: 100%; /* Zorg ervoor dat de inhoudsopgave de volledige hoogte van de container inneemt */
}

.content {
    flex: 3; /* Of een variabele breedte afhankelijk van de rest van de ruimte */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.screenshot {
    border: 1px solid #ddd;
}