harvesting_the_net/axios-example/static/style.scss

:root {
    --scenePerspective: 1;
    --scenePerspectiveOriginX: 50;
    --scenePerspectiveOriginY: 0;
    --itemZ: 2;
    --cameraSpeed: 20; // Where 1 is the fastest
    --cameraZ: 0;
    --viewportHeight: 105;
}

$n : 1000;


.viewport {
    height: calc(var(--viewportHeight) * 1px);

    .scene3D-container {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
        perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
        will-change: perspective-origin;
        transform: translate3d(0, 0, 0); //Allow Hardware-Accelerated CSS

        .scene3D {
            position: absolute;
            top: 0;
            height: 100vh;
            width: 100%;
            transform-style: preserve-3d;
            transform: translateZ(calc(var(--cameraZ) * 1px));
            will-change: transform;
            // transform: rotateX(20deg);

            >div {
                position: absolute;
                display: block;
                width: 70%;
                top: 100%;

                &:nth-child(2n) {
                    left: 80%;
                    bottom: 10%;
                }

                &:nth-child(2n + 1) {
                    right: 80%;
                    bottom: 10%
                }


                @for $i from 0 through $n {
                    &:nth-child(#{$i}) {
                        transform: translate3D(random(200) * .1%, random(300) * 1%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -.5px));
                        // transform: translate3D(15.4%, 250%s, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -.5px));

                    }
                }
            }
        }


        // >div {
        //     position: absolute;
        //     display: block;
        //     width: 100%;
        //     top: 70%;

        //     @media only screen and (min-width: 600px) {
        //         width: 100%;
        //     }

        //     @media only screen and (max-width: 600px) {
        //         width: 100%;
        //     }

        //     &:nth-child(2n) {
        //         left: 0;
        //     }

        //     &:nth-child(2n + 1) {
        //         right: 0;
        //     }

        //     @for $i from 0 through $n {
        //         &:nth-child(#{$i}) {
        //             transform: translate3D(random(50) - 25 * 1%, random(100) - 50 * 1%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -1px));
        //         }
        //     }

        //     @media only screen and (max-width: 600px) {
        //         @for $i from 0 through 20 {
        //             &:nth-child(#{$i}) {
        //                 transform: translate3D(1%, -80%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -1px));
        //             }
        //         }
        //     }
        // }
        // }
    }
}

// ----------
// Styling
// ----------
@font-face {
    font-family: "Cotham";
    src: url("/assets/fonts/CothamSans.otf");
}

$main: #0f0;
$second: #ffffff;
$third: #000;
$reg: 5vw;
$tit: 6vw;
$regRes: 7vw;
$titRes: 9vw;

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Cotham";
    background-color: $second;
    background-color: rgba(0, 0, 0, 0.17);
    background-color: black;
    color: hsl(231, 15%, 18%);
    padding: 0;
    margin: 0;
}

#loading {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}


#text {
    position: fixed;
    z-index: 100;
    left: 0;
    bottom: 0;
    width: 150%;
    display: flex;
}

.marquee {
    font-size: 40px;
    font-family: sans-serif;
    color: #0f0;
    white-space: nowrap;
    animation: marquee 50s infinite linear;
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}


span {
    position: relative;
    color: black;
    color: #0f0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    // white-space: nowrap;

}




.scene3D {
    @media only screen and (min-width: 600px) {
        h1 {
            font-size: $titRes;
        }

        p {
            font-size: $regRes;
        }

        img {
            width: 230vw;
        }
    }

    >div {
        padding: 5vw;

        // background-color: $second;
        // border: solid $main .3vw;
        h1 {
            font-size: $tit;
        }

        p,
        a,
        li {
            font-size: $reg;
        }

        img {
            width: 150vw;
        }

        a {
            text-decoration: underline;
            color: $second;
            font-size: $reg;
        }

        a:hover {
            text-decoration: none;
            // filter: invert(100%);
        }
    }
}