@keyframes turn {
    from { transform: translate3d(0px,0px,calc(400px * var(--dpxScl))) rotate3d(0, 0, 0, 0deg); }
    to { transform: translate3d(0px,0px,calc(400px * var(--dpxScl))) rotate3d(0, 1, 0, -360deg); }
}
.container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    perspective: calc(400px * var(--dpxScl));
    user-select: none;
    pointer-events: none;
}

.world {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translate3d(0px,0px,calc(400px * var(--dpxScl))) rotate3d(0,1,0,0deg);
    animation: 60s linear infinite turn;

    .x, .y, .z {
        position: absolute;
        background-color: black;
        top: calc(50% - 1px);
        left: 50%;
    }
    
    .x {
        width: 100vw;
        height: 1px;
        background-color: red;
        transform: translateX(-50%);
    }
    
    .y {
        width: 1px;
        height: 100vh;
        background-color: blue;
        transform: translateY(-50%);
    }
    
    .z {
        width: 100vw;
        height: 1px;
        background-color: green;
        transform-origin: top left;
        transform: rotateY(-90deg) translateX(-50%);
    }
}

.billboard, .billboard2, .billboard3, .billboard4 {
    z-index: 1;
    position: absolute;
    width: 400px;
    height: 400px;
    transform-origin: left top;
    transform: translate3d(833px, -22px, -991px) rotateZ(8deg) rotateY(14deg);
}

.billboard {
    height: calc(6200px * var(--dpxScl));
    overflow: hidden;
    transform-origin: center top;

    & > div {
        height: inherit;
        transform-origin: top;
        transform: scale(0.38, calc(0.17 / var(--dpxScl)));
    }
}

.billboard2, .billboard3, .billboard4 {
    will-change: auto;
    transform: translate3d(311px, 207px, 29px) rotateX(1.5deg) rotateY(-286deg) scale(calc(0.76 / var(--dpxScl)));

    & > .fund-post-render {
        transform-origin: left top;
        transform: scaleX(1.5);
    }
}

.billboard3 {
    transform: translate3d(333px, 596px, 29px) rotateX(3.5deg) rotateY(-289deg) scale(calc(0.76 / var(--dpxScl)));
}

.billboard4 {
    transform: translate3d(1287px, 566px, 29px) rotateX(3.25deg) rotateY(-458deg) rotateZ(0deg) scale(calc(0.76 / var(--dpxScl)));
}

.cube {
    --len: 1022px;
    --height: 2048px;
    position: absolute;
    width: var(--height);
    height: var(--height);
    transform-style: preserve-3d;
    transform-origin: center;
    transform: translate3d(calc(var(--len) * -1), calc(var(--len) * -1), 0px) rotate3d(0, 1, 0, 0deg);
    top: 50%;
    left: 50%;

    .face {
        width: var(--height);
        height: var(--height);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        font-size: 2rem;
        transition: transform 500ms;
        backface-visibility: hidden;
        margin: -1px;

        & > img, canvas {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.front {
    transform: translateZ(calc(var(--len) * -1)) rotateY(0deg);
}

.back {
    transform: translateZ(var(--len)) rotateY(180deg);
}

.left {
    transform: translateX(calc(var(--len) * -1)) rotateY(90deg);
}

.right {
    transform: translateX(var(--len)) rotateY(-90deg);
}

.top {
    transform: translateY(calc(var(--len) * -1)) rotateX(-90deg) rotateZ(-90deg);
}

.bottom {
    transform: translateY(var(--len)) rotateX(90deg) rotateZ(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
        transform: rotate3d(1, 1, 0, 45deg);
    }
}

.ew-pages {
    position: relative;
    z-index: 1;
    pointer-events: none;
}