body {
    height: 200vh;
    margin: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
header {
    background-color: #2E8B57;
    padding: 0px;
    text-align: right;
    align-items: left;
    font-size: 25px;
    margin: 0px;
    padding: 40px;
    word-spacing: 20px;
    color: white;
}
#logo {
    position: absolute;
    top: 1vh;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: #264653;
}
main {
    height: 150vh;
    background-image: url(../img/home_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Voor kleinere schermen zoals tablets */
@media screen and (max-width: 768px) {
    main {
        height: 100vh; /* Verklein de hoogte voor betere weergave */
        background-size: contain; /* Zorg dat de afbeelding volledig zichtbaar blijft */
        background-position: top; /* Pas de positie aan indien nodig */
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    a {
        display: block;
        margin: 5px 0;
        font-size: 18px;
    }

    #logo {
        margin-bottom: 10px;
        height: 40px;
        width: auto;
    }

}

/* Voor smartphones */
@media screen and (max-width: 480px) {
    main {
        height: 50vh; /* Nog verder verkleinen voor kleine schermen */
        background-size: contain; /* Houd de afbeelding schaalbaar */
        background-position: center; /* Zorg dat de afbeelding gecentreerd blijft */
    }
    header {
        font-size: 18px;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    a {
        font-size: 16px;
        margin: 3px 0;
    }
}
#avg_fatbiker {
    height: 150vh;
}

@media (max-width: 1200px) {
    #avg_fatbiker {
        height: 60vh; /* kleinere hoogte voor medium schermen */
    }
}

@media (max-width: 768px) {
    #avg_fatbiker {
        height: 35vh; /* nog kleinere hoogte voor tablets */
    }
}

@media (max-width: 480px) {
    #avg_fatbiker {
        height: 80vh; /* aangepaste hoogte voor mobiele schermen */
    }
}
#white {
    font-family: "Lucida Console", monospace, Sansation;
    background-color: white;
    height: 45vh;
    padding: 20px;
    text-align: center;
    font-size: 3.5vh;
    color: #2E8B57;
}
#button {
    height: 7vh;
    width: 25vh;
    border: #658959;
    background-color: #658959;
    border-radius: 11px;
    font-size: 3vh;
    color: white;
}
#button:hover {
    background-color: #264653;
}

@media (max-width: 768px) {
    #white {
        font-size: 2.5vh;
        padding: 15px;
    }

    #white h1 {
        font-size: 3.5vh;
    }

    #white p {
        font-size: 2vh;
    }

    #button {
        width: 20vh;
        height: 6vh;
        font-size: 2vh;
    }
}

@media (max-width: 768px) {
    #white {
        font-size: 2.5vh;
        padding: 15px;
    }

    #white h1 {
        font-size: 3.5vh;
    }

    #white p {
        font-size: 2vh;
    }

    #button {
        width: 20vh;
        height: 6vh;
        font-size: 2vh;
    }
}

/* Media Query voor mobiele apparaten (breedte ≤ 480px) */
@media (max-width: 480px) {
    #white {
        font-size: 2vh;
        padding: 10px;
    }

    #white h1 {
        font-size: 3vh;
    }

    #white p {
        font-size: 1.8vh;
    }

    #button {
        width: 18vh;
        height: 5vh;
        font-size: 1.8vh;
    }
}
#green {
    background-color: #BFD8B7;
    height: 55vh;
    text-align: center;
    align-items: center;
    font-size: 3vh;
    color: #2E8B57;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat de titel bovenaan blijft */
}

#green h1 {
    margin: 0px;
    padding: 5px;
}

/* Standaard styling */
#green {
    background-color: #BFD8B7;
    height: auto; /* Zorgt dat de hoogte afhankelijk is van de inhoud */
    min-height: 55vh; /* Minimale hoogte blijft behouden */
    text-align: center;
    align-items: center;
    font-size: 3vh;
    color: #2E8B57;
    margin: 0px;
    padding: 20px; /* Voeg padding toe voor meer ademruimte */
    display: flex;
    flex-direction: column; /* Titel bovenaan, gevolgd door de inhoud */
}

/* Styling voor de titel */
#green h1 {
    margin: 0px;
    padding: 10px;
    font-size: 3.5vh; /* Iets grotere titel voor betere zichtbaarheid */
}

/* Responsieve aanpassingen voor tablets */
@media (max-width: 768px) {
    #green {
        min-height: 45vh; /* Verklein de minimale hoogte */
        padding: 15px; /* Pas de padding aan */
        font-size: 2.5vh; /* Iets kleinere tekst */
    }

    #green h1 {
        font-size: 3vh; /* Titel wordt iets kleiner */
    }
}

/* Responsieve aanpassingen voor mobiele apparaten */
@media (max-width: 480px) {
    #green {
        min-height: 35vh; /* Nog kleinere minimale hoogte */
        padding: 10px; /* Minder padding voor kleinere schermen */
        font-size: 2vh; /* Tekst wordt kleiner */
    }

    #green h1 {
        font-size: 2.5vh; /* Titelgrootte aangepast */
    }
}

#product-container {
    display: flex;
    justify-content: center; /* Plaatst de producten horizontaal gecentreerd */
    gap: 100px; /* Ruimte tussen de divs */
    margin-top: 10px;
}

#product1, #product2, #product3 {
    padding: 10px;
    border: 3px solid #2E8B57;
    width: 40vh;
    height: 40vh;
    border-radius: 39px;
}

@media (max-width: 768px) {
    #product-container {
        flex-direction: column; /* Stapel de categorieën verticaal */
        gap: 30px; /* Geef ruimte tussen de categorieën */
        align-items: center;
    }

    #product1, #product2, #product3 {
        width: 90%; /* Laat ze de breedte van het scherm gebruiken */
        height: auto; /* Pas de hoogte automatisch aan */
    }
}

/* Media Query voor mobiele apparaten (breedte ≤ 480px) */
@media (max-width: 480px) {
    #product-container {
        gap: 20px; /* Minder ruimte tussen de categorieën */
    }

    #product1, #product2, #product3 {
        width: 95%; /* Nog iets smaller voor kleinere schermen */
    }
}

#green img {
margin: 20px;
}

#green button {
    height: 7vh;
    width: 25vh;
    border: #658959;
    background-color: #658959;
    border-radius: 11px;
    font-size: 3vh;
    color: white;
}
#green button:hover {
    background-color: #264653;
}

#avg_fatbiker2 {
    background-color: #2E8B57;
    height: 15vh;
    width: 100%;
}
@media (max-width: 768px) {
    #avg_fatbiker2 {
        height: auto; /* Laat de hoogte automatisch aanpassen aan de inhoud */
        padding: 10px; /* Voeg wat padding toe voor meer ademruimte */
        font-size: 1.8vh; /* Pas de tekstgrootte aan */
    }
}

/* Media Query voor mobiele apparaten (breedte ≤ 480px) */
@media (max-width: 480px) {
    #avg_fatbiker2 {
        font-size: 1.5vh; /* Maak de tekst nog iets kleiner */
        padding: 15px;
        line-height: 1.4; /* Zorg ervoor dat de tekst leesbaar blijft */
    }
}