:root {
    --pixel-size: 8px;

    --rainbow-element-width: calc(var(--pixel-size) * 8);
    --rainbow-color-pixel-height: 3;
    --rainbow-height: calc(var(--pixel-size) * var(--rainbow-color-pixel-height) * 6);

    --rainbow-color-1: #f00;
    --rainbow-color-2: #f90;
    --rainbow-color-3: #ff0;
    --rainbow-color-4: #3f0;
    --rainbow-color-5: #09f;
    --rainbow-color-6: #63f;

    --animation-speed: 600ms;
    --parralax: 1.5;
    --spark-gap-multiplyer: 120;
    --spark-gap-size: calc(var(--pixel-size) * var(--spark-gap-multiplyer));

    --background-color: #114474;
}

body {
    background-color: var(--background-color);
    overflow: hidden;
}

.cat {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-30%, -50%);
    z-index: 4;
}

/* hacky workaround */
.rainbow-concealer {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(calc(-1 * var(--pixel-size)), calc(-1 * (var(--rainbow-height) / 2 + var(--pixel-size))));
    z-index: 2;

    background: var(--background-color);
    width: 25vw;
    height: calc(var(--rainbow-height) + 2 * var(--pixel-size));
}
.rainbow-concealer-addon {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(calc(-1 * var(--pixel-size) * 3), 0);
    z-index: 2;

    background: var(--background-color);
    width: calc(var(--pixel-size) * 18);
    height: calc(var(--pixel-size) * 10);
}

/* rainbow */
.rainbow {
    position: relative;
    top: 50vh;

    animation: woosh-rainbow calc(var(--animation-speed) * .4) 0ms linear infinite both;
}
.rainbow-color {
    position: absolute;
    margin-right: var(--pixel-size); /* start at end of cat - TODO: why this value?*/
    z-index: 1;

    background: none;
    height: var(--rainbow-height);
    width: 70vw;
}
.first-color::after,
.first-color::before,
.last-color::after,
.last-color::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
}
.first-color::after,
.first-color::before {
    top: 0;
}
.last-color::after,
.last-color::before {
     bottom: 0;
}
#wave-a {
    animation: wavy var(--animation-speed) 0ms steps(2) infinite both;
}
#wave-b {
    animation: wavy var(--animation-speed) calc(var(--animation-speed) / 2) steps(2) infinite both;
}
/* red */
.first-color {
     background-image: linear-gradient(to right, var(--rainbow-color-1) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2)); /* rainbow-element-width: 8 */
}
/* orange */
.first-color::after {
    background-image: linear-gradient(to right, var(--rainbow-color-2) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2));
}
/* yellow */
.first-color::before {
     background-image: linear-gradient(to right, var(--rainbow-color-3) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2));
}
/* green */
.last-color::after {
    background-image: linear-gradient(to right, var(--rainbow-color-4) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2));
    background-position: left top;
}
/* blue */
.last-color::before {
    background-image: linear-gradient(to right, var(--rainbow-color-5) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2));
}
/* purple */
.last-color {
     background-image: linear-gradient(to right, var(--rainbow-color-6) var(--rainbow-element-width), transparent var(--rainbow-element-width), transparent calc(var(--rainbow-element-width) * 2));
}
.rainbow-color,
.first-color::after,
.first-color::before,
.last-color::after,
.last-color::before {
    background-size: calc(var(--rainbow-element-width) * 2) calc(var(--pixel-size) * var(--rainbow-color-pixel-height));
    background-repeat: repeat-x;
}
#wave-a.first-color,
#wave-a.last-color::after {
     background-position: left top;
}
#wave-a.first-color::after,
#wave-a.last-color::before {
    background-position: left center;
}
#wave-a.first-color::before,
#wave-a.last-color {
     background-position: left bottom;
}
#wave-b.first-color,
#wave-b.last-color::after {
     background-position: var(--rainbow-element-width) top;
}
#wave-b.first-color::after,
#wave-b.last-color::before {
    background-position: var(--rainbow-element-width) center;
}
#wave-b.first-color::before,
#wave-b.last-color {
     background-position: var(--rainbow-element-width) bottom;
}
@keyframes wavy {
    0% {
        margin-top: calc(-1 * var(--pixel-size) * (var(--rainbow-color-pixel-height) * 3 + 0.5));
    }
    100% {
        margin-top: calc(-1 * var(--pixel-size) * (var(--rainbow-color-pixel-height) * 3 + 2.5));
    }
}
@keyframes woosh-rainbow {
    0% {
        left: 0px;
    }
    100% {
        left: calc(-1 * var(--rainbow-element-width) * 2);
    }
}

/* sparks */
.sparks-row {
    height: calc(var(--spark-gap-size) / 1.15);
    width: 200%;
    position: relative;
    animation: woosh-stars calc(var(--animation-speed) * var(--parralax) * var(--spark-gap-multiplyer) / 100) 0ms linear infinite both;
}
.spark {
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x;
}
.spark::before {
    background: linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x;
}
.spark::after {
    background: linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white var(--pixel-size), transparent var(--pixel-size), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white calc(var(--pixel-size) * 2), transparent calc(var(--pixel-size) * 2), transparent var(--spark-gap-size)) repeat-x, linear-gradient(to right, white 0px, white calc(var(--pixel-size) * 2), transparent calc(var(--pixel-size) * 2), transparent var(--spark-gap-size)) repeat-x;
}
.spark::before,
.spark::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.spark:nth-child(1) {
    top: 0;
    left: calc(var(--spark-gap-size) / 20);
    animation: sparkly 700ms 0ms steps(1) infinite both;
}
.spark:nth-child(1)::before {
    animation: sparkly-before 700ms 0ms steps(1) infinite both;
}
.spark:nth-child(1)::after {
    animation: sparkly-after 700ms 0ms steps(1) infinite both;
}
.spark:nth-child(2) {
    top: calc(var(--spark-gap-size) / 10);
    left: calc(var(--spark-gap-size) / 3);
    animation: sparkly 700ms 200ms steps(1) infinite both;
}
.spark:nth-child(2)::before {
    animation: sparkly-before 700ms 200ms steps(1) infinite both;
}
.spark:nth-child(2)::after {
    animation: sparkly-after 700ms 200ms steps(1) infinite both;
}
.spark:nth-child(3) {
    top: calc(var(--spark-gap-size) / 4);
    left: calc(var(--spark-gap-size) / 1.25);
    animation: sparkly 700ms 400ms steps(1) infinite both;
}
.spark:nth-child(3)::before {
     animation: sparkly-before 700ms 400ms steps(1) infinite both;
}
.spark:nth-child(3)::after {
     animation: sparkly-after 700ms 400ms steps(1) infinite both;
}
.spark:nth-child(4) {
    top: calc(var(--spark-gap-size) / 1.8);
    left: calc(var(--spark-gap-size) / 1.5);
    animation: sparkly 700ms 600ms steps(1) infinite both;
}
.spark:nth-child(4)::before {
    animation: sparkly-before 700ms 600ms steps(1) infinite both;
}
.spark:nth-child(4)::after {
     animation: sparkly-after 700ms 600ms steps(1) infinite both;
}
.spark:nth-child(5) {
    top: calc(var(--spark-gap-size) / 2);
    left: calc(var(--spark-gap-size) / 10);
    animation: sparkly 700ms 500ms steps(1) infinite both;
}
.spark:nth-child(5)::before {
     animation: sparkly-before 700ms 500ms steps(1) infinite both;
}
.spark:nth-child(5)::after {
     animation: sparkly-after 700ms 500ms steps(1) infinite both;
}
.spark:nth-child(6) {
    top: calc(var(--spark-gap-size) / 3.5);
    left: calc(var(--spark-gap-size) / 2.5);
    animation: sparkly 700ms 100ms steps(1) infinite both;
}
.spark:nth-child(6)::before {
    animation: sparkly-before 700ms 100ms steps(1) infinite both;
}
.spark:nth-child(6)::after {
     animation: sparkly-after 700ms 100ms steps(1) infinite both;
}
.spark:nth-child(7) {
    top: calc(var(--spark-gap-size) / 1.5);
    left: calc(var(--spark-gap-size) / 3.25);
    animation: sparkly 700ms 300ms steps(1) infinite both;
}
.spark:nth-child(7)::before {
     animation: sparkly-before 700ms 300ms steps(1) infinite both;
}
.spark:nth-child(7)::after {
     animation: sparkly-after 700ms 300ms steps(1) infinite both;
}
.spark:nth-child(8) {
    top: calc(var(--spark-gap-size) / 6);
    left: calc(var(--spark-gap-size) / 6);
    animation: sparkly 700ms 400ms steps(1) infinite both;
}
.spark:nth-child(8)::before {
    animation: sparkly-before 700ms 400ms steps(1) infinite both;
}
.spark:nth-child(8)::after {
     animation: sparkly-after 700ms 400ms steps(1) infinite both;
}
@keyframes woosh-stars {
    0% {
        left: 0px;
    }
    100% {
        left: calc(-1 * var(--spark-gap-size));
    }
}
@keyframes sparkly {
    0% {
        background-size: var(--spark-gap-size) var(--pixel-size), 0 0, 0 0, 0 0;
        background-position: calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 3), 0 0, 0 0, 0 0;
    }
    16% {
        background-size: var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 2), calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 4);
    }
    33% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    50% {
        background-size: var(--spark-gap-size) var(--pixel-size), 0 0, 0 0, 0 0;
        background-position: calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 3), 0 0, 0 0, 0 0;
    }
    66% {
        background-size: var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: calc(var(--pixel-size) * 3) 0, calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 6), 0 calc(var(--pixel-size) * 3);
    }
    83% {
        background-size: var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: calc(var(--pixel-size) * 3) 0, calc(var(--pixel-size) * 6) calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 6), 0 calc(var(--pixel-size) * 3);
    }
    100% {
        background-size: var(--spark-gap-size) var(--pixel-size), 0 0, 0 0, 0 0;
        background-position: calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 3), 0 0, 0 0, 0 0;
    }
}
@keyframes sparkly-before {
    0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    33% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    50% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    66% {
        background-size: var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: var(--pixel-size) var(--pixel-size), calc(var(--pixel-size) * 5) var(--pixel-size), calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 5), var(--pixel-size) calc(var(--pixel-size) * 5);
    }
    83% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
}
@keyframes sparkly-after {
    0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    33% {
        background-size: var(--spark-gap-size) calc(var(--pixel-size) * 2), var(--spark-gap-size) calc(var(--pixel-size) * 2), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: calc(var(--pixel-size) * 3) var(--pixel-size), calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 4), var(--pixel-size) calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 4) calc(var(--pixel-size) * 3);
    }
    50% {
        background-size: var(--spark-gap-size) calc(var(--pixel-size) * 2), var(--spark-gap-size) calc(var(--pixel-size) * 2), var(--spark-gap-size) var(--pixel-size), var(--spark-gap-size) var(--pixel-size);
        background-position: calc(var(--pixel-size) * 3) 0, calc(var(--pixel-size) * 3) calc(var(--pixel-size) * 5), 0 calc(var(--pixel-size) * 3), calc(var(--pixel-size) * 5) calc(var(--pixel-size) * 3);
    }
    66% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    83% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
}