:root {
     --ff-main: "Archivo Narrow", sans-serif;
 }

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

 body {
    width: 100%;
     height: 150vh;
     font-family: var(--ff-main);
     font-size: 18px;
     font-weight: 400;
     color: white;
     background-color: black;
     background-image: linear-gradient(to bottom right, black, black, rgb(80, 80, 80));
 }

 
.background-mic {
    position: fixed;
    top: 40%;
    left: 25%;
    width: 400px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
    transition: transform 0.1s ease-out, filter 0.1s ease-out;
}

.circle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.circle {
    position: fixed;
    top: 8%;
    left: 95%;
    width: 200px;
    height: 200px;
    background-image: url(assets/Ellipse.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
    animation: growCircle 15s linear forwards;
}


/* Animatie: laten groeien + vervagen */
@keyframes growCircle {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
    }
}

.sound-button {
    width: 65px;
    height: 25px;
    background-color: black;
    border: 2px solid white;
    border-radius: 50px; 
    font-family: var(--ff-main);   
    font-size: 10;
    color: white;
}

.sound-button:hover {
    background-color: white;
    color: black;
    cursor: pointer;
}

.fixed-display-left {
    position: fixed;
    top: 65%;
    left: 5%;
    width: 100%;
    max-width: 800px;
}

.zingen-bij {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
}

.logo-name {
    width: 335px;
    height: 197px;
}

.main-title {
    font-size: 80px;
}

 .fixed-display-right {
     position: fixed;
     top: 50%;
     left: 70%;
     transform: translate(-50%, -50%);
     width: 100%;
     max-width: 350px;
     text-align: left;
     z-index: 10;
     pointer-events: none;
 }

 .info-text {
     position: absolute;
     width: 100%;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s ease, transform 0.6s ease;
     pointer-events: none;
 }

 .info-text.active {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 .scroll-trigger {
     height: 50vh;
 }

 .scroll-down {
    position: fixed;
    top: 70%;
    left: 85%;
    width: 10%;    
}

.arrow {
    margin-bottom: 2rem;
}

 .motto {
     color: rgb(234, 105, 6);
     padding-top: 1rem;
 }