html, body, * {
    -webkit-touch-callout: none; /*no touch & hold feature*/
    -webkit-user-select: none; /* no select text feature*/
    -moz-user-select: none; /* no select text feature*/
    -ms-user-select: none; /* no select text feature*/
    user-select: none; /* no select text feature*/
    -webkit-appearance: none; /* no platform-native styling*/
}

html, body {
    height: 100%;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.pijltjen {
    width: 100%;
}

.w3-top {
    width: 10%;
}

.spectrum-background {
    background: #808ea5;
}

.fontje {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5vw;
    color: grey;
    text-align: center;
    background: rgb(255, 255, 255);
}

/* Algemene stijl voor de container */
.flex-container {
    display: flex;
    justify-content: space-between; /* Ruimte tussen de items */
    margin: 80px 0% 10px 0%; /*Boven, rechts, onder, links */
    flex-wrap: wrap; /* Zorg dat items nooit op een nieuwe rij springen */
    padding: 10px 0;
    overflow: hidden; /* Zorg dat er geen elementen naar buiten gaan */
}

/* Algemene stijl voor flex-items */
.flex-item {
    flex: 0 0 calc((100% - 20%) / 3); /* Bereken breedte: 100% - 10% links - 10% rechts, gedeeld door 3 */
    box-sizing: border-box;
    text-align: center;
    margin: 1%;
    border-radius: 10px;
    padding: 0.5rem;
}

/* Media queries */

/* Smartphones (<576px) */
@media (max-width: 576px) {
    .flex-container {
        margin: 60px 0% 10px 0%; /*Boven, rechts, onder, links */
        justify-content: center;
    }

    .flex-item {
        flex: 0 0 calc((100% - 10%) / 3); /*Pas de breedte aan voor nieuwe marge*/
        padding: 0.2rem;
    }

    .pijltjen {
        width: 180%;
    }
}

/* Tablets (576px tot 768px) */
@media (min-width: 576px) and (max-width: 768px) {
    .flex-container {
        margin: 80px 0% 10px 0%; /*Boven, rechts, onder, links */
        justify-content: center;
    }

    .flex-item {
        flex: 0 0 calc((100% - 15%) / 3); /* Houd rekening met de marges */
        box-sizing: border-box;
        text-align: center;
        padding: 0.3rem;
    }

    .pijltjen {
        width: 150%;
    }
}

/* Kleinere desktops (768px tot 1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    .flex-container {
        margin: 110px 1% 10px 1%; /*Boven, rechts, onder, links */
        justify-content: center;
    }

    .flex-item {
        flex: 0 0 calc((100% - 15%) / 3); /* Houd rekening met de marges */
        box-sizing: border-box;
        text-align: center;
        padding: 0.3rem;
    }

    .pijltjen {
        width: 140%;
    }
}

/* Grotere desktops (>1200px) */
@media (min-width: 1200px) {
    .flex-container {
        margin: 110px 1% 10px 1%; /*Boven, rechts, onder, links */
        justify-content: center;
    }
}