/* Scrollbar visuals*/
    ::-webkit-scrollbar { width: 16px; }
    ::-webkit-scrollbar-thumb { background-color: #3B3B3B; }
    ::-webkit-scrollbar-track { background-color: #1B1B1B; }


/* Sky background */
    body {
        font-size: 32px;
        background: fixed url("../images/stars.png") repeat-x 0 0, fixed url("../images/gradient.png") no-repeat 0 0, #141414;
        background-size: 40em 21em, 100% 21em;
    }

/* Highlight of the dividing line */
    #highlightBackground {
        background: url("../images/highlight.png") no-repeat, url("../images/line.png") repeat-x;
        background-size: 100% 100%;

        position: fixed; top: 18.5em; left: 0;
        width: 100%; height: 4em;
        z-index:-100;
    }

/* Animated Moon slowly moving to the right */
    #animatedMoonBackground {
        background: url("../images/moon.png") no-repeat;
        background-size: auto 100%;

        position: fixed; top: 3.5em; left: 0;
        width: 100%; height: 17em;
        z-index:-120;

        animation: animatedMoonBackground 250s linear infinite;
        animation-delay: -68.85s;
    }
    @keyframes animatedMoonBackground {
        0% { background-position: -25em; }
        100% { background-position: 105vw; }
    }


/* Animated city moving to the right */
    #animatedCityBackground {
        background: url("../images/city.png") repeat;
        background-size: auto 100%;

        position: fixed; top: 0; left: 0;
        width: 100%; height: 21em;
        z-index:-110;

        animation: animatedCityBackground 450s linear infinite ;
        image-rendering: pixelated;
    }
    @keyframes animatedCityBackground {
        from { background-position: 0 0; }
        to { background-position: 10000px 0}
    }


/* Section for the perspective of the animated lines */
    #perspective, #perspective_overlay {
        position: fixed; top: 20.5em; left: 0;
        width: 100%; height: 180vh;
        perspective: 150vh;
        overflow: hidden;
        z-index: -110;
    }

/* Black gradient applied over the moving lines */
    #lineOverlay {
        background-image: linear-gradient(to top, rgba(20, 20, 20, 1), rgba(20, 20, 20, 0));
        height: inherit;
    }

/* Animated synthwave.html lines */
    #animatedLineBackground {
        background-image:
            linear-gradient(to right, rgba(200, 200, 200, .4) 3px, transparent 1px),
            linear-gradient(to bottom, transparent 47px, rgba(200, 200, 200, .4) 3px);
        background-size: 50px 50px;
        height: inherit;

        transform-origin: top center;
        transform: rotateX(49deg);
        animation: animatedCityBackground 420s linear infinite;
    }

#animatedCityBackground, #animatedLineBackground, #animatedMoonBackground { animation-play-state: paused; }
#animatedCityBackground.play, #animatedLineBackground.play, #animatedMoonBackground.play { animation-play-state: running; }

/* Mobile adjustments */
    @media screen and (max-width: 800px) {
        /* Animated city moving to the right */
    #animatedMoonBackground { background-position: 50%; }
    #animatedCityBackground, #animatedLineBackground, #animatedMoonBackground { animation: none; }

    }


#animation_status {
    background-color: rgba(255, 255, 255, 0);
    border: 0;
    color: white;

    position: fixed;
    cursor: pointer;
    bottom: 1.125vw;
    right: 1.6vw;
    font-family: "AbFont", sans-serif;
    font-size: 32px;
}