@keyframes bouncing-loader {
    from {
        text-shadow: 0 0.5em 0.6em var(--accent-1);
    }
    to {
        opacity: 0.2;
        transform: translate3d(0, -0.5em, 0);
    }
}

.bouncing-loader {
    font-weight: bolder;
    font-size: xxx-large;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 90vw;
    margin: auto;
    transition: opacity 1s ease-in-out;
}

.bouncing-loader > div {
    animation: bouncing-loader 0.5s infinite alternate; /* Apply animation */
}

.bouncing-loader > div:nth-child(2) {
    animation-delay: 0.1s; /* Delay animation */
}
.bouncing-loader > div:nth-child(3) {
    animation-delay: 0.2s; /* Delay animation */
}
.bouncing-loader > div:nth-child(4) {
    animation-delay: 0.15s; /* Delay animation */
}
.bouncing-loader > div:nth-child(5) {
    animation-delay: 0.3s; /* Delay animation */
}
.bouncing-loader > div:nth-child(6) {
    animation-delay: 0.1s; /* Delay animation */
}
.bouncing-loader > div:nth-child(7) {
    animation-delay: 0.2s; /* Delay animation */
}
.bouncing-loader > div:nth-child(8) {
    animation-delay: 0.15s; /* Delay animation */
}
.bouncing-loader > div:nth-child(9) {
    animation-delay: 0.3s; /* Delay animation */
}
.bouncing-loader > div:nth-child(10) {
    animation-delay: 0.1s; /* Delay animation */
}
.bouncing-loader > div:nth-child(11) {
    animation-delay: 0.2s; /* Delay animation */
}
.bouncing-loader > div:nth-child(12) {
    animation-delay: 0.15s; /* Delay animation */
}