html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
}

#custom-preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important; /* Zorg dat dit echt boven alles staat */
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* 2. Zet de runen netjes naast elkaar */
.rune-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* 3. Styling en Animatie voor de Runen */
.rune {
    font-size: 3.5rem !important;
    color: #1a1a1a !important; /* Start heel donker */
    font-family: serif;
    animation: rune-glow 2.5s infinite ease-in-out;
}

/* De paarse gloed die per rune verspringt */
@keyframes rune-glow {
    0%, 10% { color: #1a1a1a; text-shadow: none; }
    40%, 60% { 
        color: #bf94ff; 
        text-shadow: 0 0 15px #8a2be2, 0 0 30px #8a2be2; 
    }
    90%, 100% { color: #1a1a1a; text-shadow: none; }
}

/* Vertraging per rune voor het 'loop-effect' */
.rune:nth-child(1) { animation-delay: 0.1s; }
.rune:nth-child(2) { animation-delay: 0.3s; }
.rune:nth-child(3) { animation-delay: 0.5s; }
.rune:nth-child(4) { animation-delay: 0.7s; }
.rune:nth-child(5) { animation-delay: 0.9s; }

/* 4. De tekst onder de runen */
.loading-text {
    color: #444 !important;
    font-family: 'IM Fell English SC', serif;
    letter-spacing: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0 !important;
}

/* 5. Zorg dat de preloader weg kan faden via je JS */
#custom-preloader.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}