<style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            position: relative;
            overflow: hidden;
            height:200px;
            color: white;
            text-align: center;
            padding: 60px 0;
        }

        header h1 {
            font-size: 3em;
            margin: 0;
            position: relative;
            z-index: 2;
        }

        header p {
            font-size: 1.2em;
            margin: 10px 0 0;
            position: relative;
            z-index: 2;
        }

        .header-bg {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: url('./images/header-bg.jpg') no-repeat center center;
            background-size: cover;
            #animation: slide 720s linear infinite;
            #z-index: 1;
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
            display: flex;
            justify-content: center;
            padding: 14px 16px;
        }

        .navbar a {
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Hamburger menu styles */
        .menu-icon {
            display: none;
            font-size: 28px;
            cursor: pointer;
            color: white;
            position: absolute;
            right: 20px;
            top: 20px;
            z-index: 3;
        }

        .content {
            padding: 20px;
            text-align: center;
        }

        /* Media queries to enable mobile view */
        @media screen and (max-width: 768px) {
            .navbar {
                display: none;
                flex-direction: column;
                align-items: center;
            }

            .navbar a {
                padding: 10px;
                width: 100%;
                text-align: center;
            }

            .menu-icon {
                display: block;
            }
        }

        footer {
            background-color: #333;
            color: #f2f2f2;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
		img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}



           
/* De container waarin de afbeeldingen staan */
.gallery-container {
    display: flex;
    flex-wrap: nowrap; /* Zorgt ervoor dat de afbeeldingen naast elkaar staan in één rij */
    overflow-x: auto; /* Horizontale scroll mogelijk maken */
    -webkit-overflow-scrolling: touch; /* Soepel scrollen op mobiele apparaten */
    scroll-snap-type: x mandatory; /* Voeg scroll-snap toe tijdens het scrollen */
    padding: 10px; /* Optionele ruimte rondom de afbeeldingen */
    scrollbar-width: auto; /* Zichtbare scrollbar voor Firefox */
}

/* Scrollbar stijl voor WebKit-browsers zoals Chrome en Safari */
.gallery-container::-webkit-scrollbar {
    height: 12px; /* Hoogte van de scrollbar */
}

.gallery-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Achtergrondkleur van de scrollbar-track */
}

.gallery-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Kleur van de scrollbar */
    border-radius: 10px; /* Ronde hoeken voor de scrollbar */
}

.gallery-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Donkerdere kleur bij hover */
}

/* Stijl voor elke afbeelding */
.gallery-container img {
    height: 400px; /* Stel de hoogte van alle afbeeldingen in op 300px, je kunt dit aanpassen */
    width: auto; /* Breedte wordt automatisch aangepast op basis van de verhoudingen van de afbeelding */
    margin-right: 10px; /* Ruimte tussen de afbeeldingen */
    scroll-snap-align: start; /* Zorg ervoor dat de afbeeldingen netjes uitlijnen bij scrollen */
    object-fit: contain; /* Behoud de volledige afbeelding zonder bijsnijden */
}

/* Responsieve aanpassing voor mobiele apparaten */
@media screen and (max-width: 768px) {
    .gallery-container img {
        height: 400px; /* Stel een kleinere hoogte in voor mobiele apparaten */
    }
}


.video-container {
    position: relative;
    width: 100%;
    max-width: 560px; /* Maximaal xxxpx breed */
    margin: 0 auto; /* Centreert de video als de breedte kleiner is dan 800px */
    height: 0;
    padding-bottom: 75%; /* 3:4 verhouding */
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: -30%; /* Verschoven om de hoogte aan te passen */
    left: 0;
    width: 100%;
    height: 200%; /* Vergroot de video om zijkanten te vullen */
  }
/* Specifieke container voor deze video */
  .vegetable-video-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Maximaal 800px breed */
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%; /* Verhouding 16:9 */
    overflow: hidden;
  }
  
  /* Specifieke stijl voor het iframe binnen de video container */
  .vegetable-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }



  


// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.edu-au-vic-wa-nt-guides-<.avontuurlijke-tekst> {
  font-family: "Edu AU VIC WA NT Guides", cursive;
  font-optical-sizing: auto;
  font-weight: <400>;
  font-style: normal;
}


    </style>

   
</head>