div {box-shadow:inset 0 0 0 1px lightgray;}

:root
{
    /* LICHTE MODUS */

    --kleur-achtergrond:         #f4f4f4;
    --kleur-tekst:               #222222;
    --kleur-tekst-a:             #222222;

    --kleur-header:              #ffffff;
    --kleur-footer:              #ffffff;

    --kleur-navigatie:           #e8e8e8;
    --kleur-navigatie-hover:     #d0d0d0;

    --kleur-knop:                #222222;
    --kleur-knop-tekst:          #ffffff;
    --kleur-knop-hover:          #444444;

    --kleur-schaduw:			rgba(0,0,0,0.08);
}

/* DARKMODE VARIABELEN */

body.darkmode
{
    --kleur-achtergrond:         #121212;
    --kleur-tekst:               #01852A;
	--kleur-tekst-a:             #f0f0f0;

    --kleur-header:              #1c1c1c;
    --kleur-footer:              #1c1c1c;

    --kleur-navigatie:           #2c2c2c;
    --kleur-navigatie-hover:     #444444;

    --kleur-knop:                #f0f0f0;
    --kleur-knop-tekst:          #111111;
    --kleur-knop-hover:          #d9d9d9;

    --kleur-schaduw:			rgba(0,0,0,0.50);
}



/* HOOFDCONTAINER */
.page {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.header {
    width:100%;
    display:flex;
    gap:20px;
    padding:20px 0;
}

/* CONTAINER */
.container {
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 20px 0;
    flex: 1;
}

/* NAVIGATIE */
nav {
    width: 300px;
    background: #ddd;
    padding: 20px;
    flex-shrink: 0;
}

/* MAIN */
main {
    width: calc(100% - 300px);
    background: #fff;
    padding: 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* FOOTER */
.footer {
    width:100%;
    display:flex;
    gap:20px;
    padding:20px 0;
}

/* BLOCKS */
.block100 {
    flex: 1 1 100%;
    padding: 20px;
}

.block50 {
    flex: 1 1 calc((100% - 20px) / 2);
    padding: 20px;
}

.block33 {
    flex: 1 1 calc((100% - 40px) / 3);
    padding: 20px;
}

.block25 {
    flex: 1 1 calc((100% - 60px) / 4);
    padding: 20px;
}

.block20 {
    flex: 1 1 calc((100% - 80px) / 5);
    padding: 20px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width: 1200px) {

    .container {
        flex-direction: column;
    }

    aside {
        width: 100%;
    }

    main {
        width: 100%;
    }

    .block50-container {
        flex-direction: column;
    }

    .block50 {
        width: 100%;
    }

    .block20 {
        width: calc((100% - 20px) / 2);
    }
}

@media screen and (max-width: 768px) {

    .block20 {
        width: 100%;
    }
}