@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

:root {
    --color-background: #31037D;
    --axis-x: 1px;
    --axis-y: 1rem;
    --delay: 10;
    --color-black: #000;
    --color-white: #fff;
    --color-orange: #D49C3D;
    --color-red: #D14B3D;
    --color-violet: #CF52EB;
    --color-blue: #44A3F7;
    --color-green: #5ACB3C;
    --color-yellow: #DEBF40;
    --color-foreground: var(--color-white);
    --font-logo: 'Righteous', cursive;
}

.c-rainbow {
    font-family: var(--font-logo);
    counter-reset: rainbow;
    position: relative;
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-rainbow__layer {
    color: var(--color-foreground);
    counter-increment: rainbow;
    font-size: 6rem;
    color: var(--text-color);
    text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, 0.2);
    animation: rainbow 1.5s ease-in-out infinite;
}

.c-rainbow__layer:nth-child(1) {
    animation-delay: calc(1 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 1);
    z-index: -10;
}

.c-rainbow__layer:nth-child(2) {
    animation-delay: calc(2 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 2);
    z-index: -20;
}

.c-rainbow__layer:nth-child(3) {
    animation-delay: calc(3 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 3);
    z-index: -30;
}

.c-rainbow__layer:nth-child(4) {
    animation-delay: calc(4 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 4);
    z-index: -40;
}

.c-rainbow__layer:nth-child(5) {
    animation-delay: calc(5 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 5);
    z-index: -50;
}

.c-rainbow__layer:nth-child(6) {
    animation-delay: calc(6 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 6);
    z-index: -60;
}

.c-rainbow__layer:nth-child(7) {
    animation-delay: calc(7 / var(--delay) * 1s);
    left: calc(var(--axis-x) * 7);
    z-index: -70;
}

.c-rainbow__layer:not(:first-child) {
    position: absolute;
    top: 0;
}

.c-rainbow__layer--white {
    color: var(--color-white);
}

.c-rainbow__layer--orange {
    color: var(--color-orange);
}

.c-rainbow__layer--red {
    color: var(--color-red);
}

.c-rainbow__layer--violet {
    color: var(--color-violet);
}

.c-rainbow__layer--blue {
    color: var(--color-blue);
}

.c-rainbow__layer--green {
    color: var(--color-green);
}

.c-rainbow__layer--yellow {
    color: var(--color-yellow);
}

@keyframes rainbow {
    0%, 100% {
        transform: translatey(var(--axis-y));
    }
    50% {
        transform: translatey(calc(var(--axis-y) * -1));
    }
}