@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}


.hero-heading {
    color: #209cee;
    font-family: "Roboto", sans-serif;
    ;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.25rem, -1.429rem + 7.143vw, 5rem);
    line-height: clamp(1.25rem, -1.429rem + 7.143vw, 5rem);
    padding: 30vh 0 0 0;
    align-items: center;
    text-align: center;
}

.welcome-heading {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    align-items: center;
    text-align: center;
}

.track-heading {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    align-items: center;
    text-align: center;
}

.details-heading {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    align-items: center;
    text-align: center;
}

.hero-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    padding-top: 0px;
}

#hamburger {
    cursor: pointer;
}

/* CSS */
.modal-card.is-almost-fullscreen,
.modal-content.is-almost-fullscreen {
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
}

@media (max-width: 768px) {
    .hero-heading {
        margin-right: 10%;
    }
}

.hero-background {
    background-image: url('/assets/cs-1.webp');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
}

.track-image {
    width: 100%;
    height: auto;
    align-items: center;
}


/* De mobiele achtergrond voor schermen tot 768px breed */
@media (max-width: 768px) {
    .hero-background {
        background-image: url('/assets/cs-1.webp');
    }
}






.wtc-background-color {
    /* background-color: #209bee; */
    /* background-color: hsl(204, 86%, 53%); */
    background-color: rgb(50, 152, 220);

    /* Pas de kleur aan naar wens */
}

.navbar-sub-item {
    background-color: rgb(50, 152, 220);
}

/* Doel: de navbar-sub-items binnen de dropdown veranderen bij een hover */
.navbar-dropdown .navbar-item.navbar-sub-item:hover {
    background-color: rgb(50, 152, 220);
    /* background-color: #238cd1; */
    /* Vervang dit door jouw gewenste kleur */
    color: #ffffff;
    /* Optioneel: verandert de tekstkleur tijdens hover */
}

/* Doel: de navbar-sub-items binnen de dropdown veranderen bij een hover */
.navbar-item.navbar-sub-item:hover {
    background-color: rgb(50, 152, 220);
    /* background-color: #238cd1; */
    /* Vervang dit door jouw gewenste kleur */
    color: #ffffff;
    /* Optioneel: verandert de tekstkleur tijdens hover */
}

.navbar-link.navbar-sub-item:hover {
    background-color: rgb(50, 152, 220);
    /* background-color: #238cd1; */
    /* Vervang dit door jouw gewenste kleur */
    color: #ffffff;
    /* Optioneel: verandert de tekstkleur tijdens hover */

}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    /* Darkening color */
    opacity: 0.5;
    /* Starts fully transparent */
}



.roboto-600 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}


.arrow-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

.wtc-card {
    cursor: pointer;
}

/* Container holding the stacked elements */
.star-container {
    position: fixed;
    width: 200px;
    /* Size on large screens */
    height: 200px;
    /* Size on large screens */
    position: fixed;
    top: 20px;
    left: 20px;
    cursor: pointer;
    z-index: 99999;



}

.hidden-star {
    visibility: hidden;

}

/* Common layout properties for layered images */
.star-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.star-image {
    border-radius: 9999px;
    transform: rotate(var(--angle));
    animation: continuous-spin 8s linear infinite;
}





.star-image:hover {

    animation: none;
    /* Stop de actieve animatie */
    --angle: 0deg;
    /* Laat de variabele vloeiend teruglopen naar 0 graden */
    cursor: pointer;

    /* animation-play-state: paused;
    transform: rotate(0deg);
    cursor: pointer; */

}

@keyframes continuous-spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}



@media (max-width: 640px) {
    .star-container {
        width: 100px;
        /* Shrinks automatically on mobile screens */
        height: 100px;
        /* Shrinks automatically on mobile screens */
    }
}

.is-volle-hoogte {
    height: 90vh;
    /* Pas dit aan naar de gewenste hoogte (bijv. 80% van het scherm) */
    display: flex;
    justify-content: center;
}

#dynamische-foto {
    height: 100%;
    width: auto;
    /* Zorgt dat de breedte automatisch mee schaalt */
    object-fit: contain;
    /* Zorgt dat de foto niet vervormt */
}