/**
 * Code stolen from https://ruby.gay/
 * Code modified by https://aichan.moe/
 */

/* Code stolen from https://ruby.gay/ */
.animated-letter {
    /* Because there are 12 letters, 4s for the whole animation*/
    animation: letter-bounce 4s linear calc(var(--i) * .3s) infinite;
}

/* Code stolen from https://ruby.gay/ */
@keyframes letter-bounce {
    0% {
        transform: translate(0);
    }

    5% {
        transform: translateY(-.2rem);
    }

    10% {
        transform: translateY(-.25rem);
    }

    15% {
        transform: translateY(-.2rem);
    }

    20% {
        transform: translate(0);
    }
}

/* Code stolen from https://ruby.gay/ */
@keyframes letter-rainbow {
    0% {
        color: #ff6978;
    }

    16.66% {
        color: #ee803c;
    }

    33.33% {
        color: #f5e26b;
    }

    50% {
        color: #89ce94;
    }

    66.66% {
        color: #008dd5;
    }

    83.33% {
        color: #6f73d2;
    }

    100% {
        color: #ff6978;
    }
}

.phrases {
    position: fixed;
    top: 0;
    right: 170px;
    z-index: -999;
    opacity: .15;
    pointer-events: none;
    transform: rotate(45deg) translate(100%);
    transform-origin: 100% 0%;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-family: 'ngnl', sans-serif;
}

.phrases p.even {
    animation: scroll-left 85s linear 0s infinite forwards;
}

@keyframes scroll-left {
    0% {
        left: -25%;
    }

    100% {
        left: -75%;
    }
}

@keyframes scroll-right {
    0% {
        left: -75%;
    }

    100% {
        left: -25%;
    }
}

.phrases p.odd {
    animation: scroll-right 85s linear 0s infinite forwards;
}

.phrases p {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 2rem;
    position: relative;
}

.phrases p:nth-child(6n+1) {
    color: #ffffff;
}

.phrases p:nth-child(6n+2) {
    color: var(--pink);
}

.phrases p:nth-child(6n+3) {
    color: var(--purple);
}

.phrases p:nth-child(6n+4) {
    color: var(--blue);
}

.phrases p:nth-child(6n+5) {
    color: #ffffff;
}

.phrases p:nth-child(6n) {
    color: #6f73d2;
}