body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Helvetica", "Roboto", serif;
}

.container {
    text-align: center;
}

.title {
    color: #ee7c01;
    font-size: calc(4vw + 4vh + 2vmin);
}

.infotext {
    font-size: calc(1vw + 1vh + 1vmin);
}

.visualizer {
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 0;
}

.bar {
    height: 10vh;
    width: 4vw;
    margin: 1vw;
    background-color: #ffa601;
    animation: pulse 1.2s infinite ease-in-out;
    animation-delay: calc(-1.2s + var(--delay));
    transform-origin: bottom;
}

.bar:nth-child(2n) {
    background-color: #ee7c01;
}

/* Each bar has a unique delay and duration */
.bar:nth-child(1)  { --delay: 0.1s; animation-duration: 1.1s; }
.bar:nth-child(2)  { --delay: 0.3s; animation-duration: 0.9s; }
.bar:nth-child(3)  { --delay: 0.2s; animation-duration: 1.3s; }
.bar:nth-child(4)  { --delay: 0.4s; animation-duration: 1.0s; }
.bar:nth-child(5)  { --delay: 0.25s; animation-duration: 0.95s; }
.bar:nth-child(6)  { --delay: 0.15s; animation-duration: 1.25s; }
.bar:nth-child(7)  { --delay: 0.35s; animation-duration: 1.05s; }
.bar:nth-child(8)  { --delay: 0.2s; animation-duration: 1.1s; }
.bar:nth-child(9)  { --delay: 0.1s; animation-duration: 1.4s; }
.bar:nth-child(10) { --delay: 0.3s; animation-duration: 1.0s; }

@keyframes pulse {
    0%   { transform: scaleY(0.3); }
    20%  { transform: scaleY(1.2); }
    40%  { transform: scaleY(0.7); }
    60%  { transform: scaleY(1.5); }
    80%  { transform: scaleY(0.9); }
    100% { transform: scaleY(0.3); }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #282828;
    }

    .infotext {
        color: azure;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bar {
        display: none;
    }
}
