@font-face {
    font-family: 'Neue Regrade';
    src: url('Neue-Regrade-Regular.otf') format('opentype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Neue Regrade', sans-serif;
    background-color: #536878; /* Pantone 653 als beginkleur */
    transition: background-color 0.5s ease;
    min-height: 200vh;
}

/* Titel als achtergrond */
.background-title {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* Achtergrondlaag */
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: flex-start; /* Uitlijnen aan de bovenkant */
    justify-content: flex-start; /* Uitlijnen aan de linkerzijde */
    overflow: hidden;
}

.background-title h1 {
    font-size: 6rem; /* Vergroot de tekst */
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.1); /* Begint bijna onzichtbaar */
    margin: 20px; /* Ruimte rondom de titel */
    transition: transform 0.5s ease, font-size 0.5s ease;
}

/* Menu aan de linkerzijde zonder achtergrond */
.menu {
    position: fixed; /* Vastzetten aan de linkerzijde */
    top: 78px; /* 70px + 8px naar beneden */
    left: 20px;
    padding: 10px;
    background: none; /* Geen achtergrondkleur */
    transition: width 0.5s ease;
    width: 100px; /* Beginbreedte van het menu */
    display: flex;
    align-items: center;
    overflow: hidden; /* Verbergt de inhoud als het menu niet is uitgeklapt */
}

/* Menu titel */
.menu-title {
    cursor: pointer;
    color: #fff; /* Witte tekst voor contrast */
    font-size: 1.5rem;
    text-align: center;
    z-index: 1; /* Zorg ervoor dat de titel boven de menu-items staat */
}

/* Menu-items horizontaal uitlijnen */
.menu-items {
    list-style: none;
    display: flex;
    padding: 0;
    margin-left: 5px; /* Ruimte tussen titel en items */
    opacity: 0;
    transition: opacity 0.5s ease, width 0.5s ease;
    white-space: nowrap; /* Voorkomt dat items naar de volgende regel lopen */
}

.menu-items a {
    text-decoration: none; /* Verwijder onderstreping */
    color: #fff; /* Witte kleur voor links */
    display: block; /* Zorg ervoor dat de hele ruimte van het menu-item klikbaar is */
    padding: 10px 20px; /* Ruimte rondom de tekst in het menu-item */
    transition: color 0.3s ease; /* Vervaging van kleur bij hover */
}

/* Hover-effect voor menu-items */
.menu-items a:hover {
    color: #004e6f; /* Pantone 5415 kleur */
}

/* Uitklappen van het menu */
.menu.open {
    width: 400px; /* Uitgeklapt menu breedte */
}

.menu.open .menu-items {
    opacity: 1;
}


/* About container */

        /* Voeg hier specifieke stijlen toe voor de About Me pagina */
        .about-container {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
            color: #ffffff;
            border-radius: 8px;
            position: fixed; /* Vast op het scherm */
            top: 0; /* Plaatst de container bovenaan */
            left: 0;
            right: 0;
            bottom: 0; /* Stelt de hoogte in op de volledige viewporthoogte */
            overflow: auto; /* Zorgt ervoor dat als de inhoud te groot is, een scrollbar verschijnt */
            box-sizing: border-box; /* Inclusief padding en border in de hoogte en breedte */
        }

        .about-container h2 {
            font-size: 2rem;
            margin-top: 200px;
            margin-bottom: 20px;
        }

        .about-container p {
            font-size: 1rem;
            line-height: 1.6;
        }

        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: #004e6f; /* Pantone 5415 kleur */
            text-decoration: none;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        /* music emdbed */

        .music-container {
            width: 80%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        iframe {
            width: 100%;
            height: 166px; /* Standaard hoogte voor SoundCloud embed */
            border: none;
        }

        .carousel-container {
    width: 600px; /* Pas dit aan naar de gewenste breedte */
    overflow: hidden;
}