body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
    background-image: url('/afbeeldingen/hardbaseworking/achtergrondnieuw.jpg'); /* Vervang 'achtergrondafbeelding.jpg' door de werkelijke bestandsnaam en pad van je achtergrondafbeelding */
    background-size: cover; /* Hiermee wordt de achtergrondafbeelding op de volledige pagina weergegeven */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Keeps the background fixed while scrolling */
}

h1 {
    color: rgb(255, 0, 0);
}


/* Navigatie menu stijl */
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 15px;
}

nav ul li a {
    text-decoration: none;
    color: rgb(255, 0, 0);
    font-weight: bold;
}

nav ul li a:hover {
    color: blue;
}

/* CSS voor het centreren van de afspeellijst */
.container {
    display: flex;
    justify-content: center;
    align-items: center;    
}

/* Stijl voor de iframe (Spotify-afspeellijst) */
iframe {
    width: 450px; /* Aanpassen aan de gewenste breedte */
    height: 450px; /* Aanpassen aan de gewenste hoogte */
}


.container {
    position: relative;
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hidden class voor vertraagd laden van containers */
.hidden {
    display: none;
}