body {
    font-family: "Poppins", sans-serif;
}

.shimmer-text {
    background: linear-gradient(to right, #9AA0A6 20%, #202124 50%, #9AA0A6 80%);

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: shimmer 2s linear infinite;
}

.shimmer-text-card {
    background: linear-gradient(to right, #FFFFFF 20%, #9AA0A6 50%, #FFFFFF 80%);

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: -200% center;
    }
}

#typewriter::after {
    content: '|';
    animation: blink 0.8s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes dotScroll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

.scroll-indicator {
    animation: floatDown 2s ease-in-out infinite;
}

.scroll-dot {
    animation: dotScroll 2s ease-in-out infinite;
}

.wave {
    position: absolute;
    width: 133.33%;
    aspect-ratio: 1 / 1;
    opacity: 0.8;
    left: 0;
    top: 0;
    margin-left: -50%;
    margin-top: -50%;
    background: linear-gradient(360deg, #174c7c, #061b48 60%, #174c7c);
}

.wave:nth-child(2),
.wave:nth-child(3) {
    top: 62.5%;
}

.playing .wave {
    border-radius: 40%;
    animation: wave 7000ms infinite linear;
}

.playing .wave:nth-child(2) {
    animation-duration: 10000ms;
}

.playing .wave:nth-child(3) {
    animation-duration: 14000ms;
}

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}