:root {
    --donkergroen: #30423F;
    --blauwgrijs: #87A4A6;
    --lichtblauw: #C1D4D2;
    --offwhite: #FFFBF0;
    --geel: #FFC100;
}

html {
    height: 100%;
}



body {
    margin-top: 10%;
    background-color: var(--lichtblauw);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--donkergroen);
}


h1 {
    font-size: 27px;
    text-align: center;
}

h2 {
    font-size: 20px;
    text-align: center;
}

a {
    color: var(--blauwgrijs);
}

a:hover {
    color: var(--donkergroen);
}

img {
    display: block;
    margin-inline: auto;
    width: 30%;
    margin-top: 5%;
}

.mobile {
    display: none;
}

@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    body {
        margin-top: 35%;
    }

    h2 {
        margin-top: 10%;
    }

    a {
        text-align: center;
        font-size: 20px;
    }

    img {
        width: 50%;
        margin-top: 15%;
    }

}