:root {
    --size: 256px;
    --anim-speed: 15s;
}

#backdrop {
    background-color: #251534;
    background-image: url("bg1.png");
    width: 100%;
    height: 100%;

    position: relative;
}

#bgbox {
    z-index: -1;

    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Rounding is supported */
@supports (left: round(up, 0.1px, 1px)) {
    @media only screen and (min-width: 800px) {
        @keyframes scroll {
            from {
                transform: translate(0%, 0%);
            }

            to {
                transform: translate(round(up, -50%, var(--size)), round(up, -50%, var(--size)))
            }
        }

        #backdrop {
            width: round(up, 200vw, var(--size));
            height: round(up, 200vh, var(--size));

            animation: scroll var(--anim-speed) linear infinite;
        }
    }
}