body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    background-color: black;
}

scrolling-rainbow {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 50%;

    &[up] {
        left: 0px;
        animation-name: scroll-up;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &[down] {
        right: 0px;
        animation-name: scroll-down;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &[text] {
        height: 95%;
        line-height: 1em;
        z-index: 1;
        background-clip: text;
        width: 27.5%;

        text-transform: uppercase;
        text-align: center;
        font-family: monospace;
        font-size: 3.5vi;
        font-weight: 700;
        color: transparent;
        display: flex;
        flex-direction: column;
    }
    
    background: linear-gradient(in hsl longer hue, red, red);
    background-repeat: repeat;
    background-size: 50% calc(100% / 3);
}

side-text {
    display: block;
    width: 90%;
    align-self: center;
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;

    &[bottom] {
        margin-top: auto;
    }
}

@keyframes scroll-up {
    0% {background-position: 0% 100%;}
    100% {background-position: 0% 0%;}
}

@keyframes scroll-down {
    0% {background-position: 0% 0%;}
    100% {background-position: 0% 100%;}
}

v-chains {
    display: block;
    position: absolute;
    height: 95%;
    width: 16px;
    z-index: 1;
    &[left] {
        left: calc(27.5% - 10px)
    }
    &[right] {
        right: calc(27.5% - 10px)
    }
    background-image: url("vchain.png");
    background-repeat: repeat;
}

center-area {
    display: block;
    position: absolute;
    height: 95%;
    width: 45%;
    left: 27.5%;
}

bouncing-text-v {
    text-align: center;
    display: block;
    height: 100%;

    animation-name: bounce-y;
    animation-duration: calc(121s/60);
    animation-iteration-count: infinite;
}

@keyframes bounce-y {
    0% {transform: translateY(80%); animation-timing-function: cubic-bezier(0, 0, 0.25, 1);}
    50% {transform: translateY(0%); animation-timing-function: cubic-bezier(0.7, 0, 1, 1)}
    100% {transform: translateY(80%); animation-timing-function: cubic-bezier(0, 0, 0.25, 1);}
}
 
bouncing-text-h {
    display: block;
    color: white;
    line-height: 1em;
    font-size: 7.5vi;
    -webkit-text-stroke: 4px black;
    paint-order: stroke fill;
    font-family: monospace;
    font-weight: 700;

    animation-name: bounce-h;
    animation-duration: calc(15s/16);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes bounce-h {
    0% {transform: translateX(-20%);}
    50% {transform: translateX(20%);}
    100% {transform: translateX(-20%);}
}

side-area {
    display: block;
    position: absolute;
    overflow: hidden;
    height: 95%;
    width: 27.5%;

    &[left] {
        left: 0px;
    }
    &[right] {
        right: 0px;
    }
}

side-bg {
    display: block;
    height: 200%;
    width: 800%;
    background: linear-gradient(0deg, #404040 0%, white 50%, #404040 100%);
    background-repeat: repeat;
    background-size: 18px 18px;
    transform: rotate(-45deg) translateX(-25%) translateY(-75%);
}

bottom-area {
    display: block;
    position: absolute;
    height: 5%;
    width: 100%;
    bottom: 0px;
    background-color: black;
    color: white;
    mix-blend-mode: multiply;
}

half-height-text {
    display: block;
    position: absolute;

    line-height: 0px;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 3.5vi;
    font-weight: 800;
    font-family: monospace;
    top: 50%;

        animation-name: bottom-text-scroll;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes bottom-text-scroll {
    0% {transform: translateX(110vi) scaleY(0.5)}
    100% {transform: translateX(-1950vi) scaleY(0.5)}
}