:root {
    --main: rgba(255, 0, 255);
    --borders: 5px solid rgba(161, 39, 245, 0.3);

    --secondary-color: rgba(161, 39, 245, 0.3);
    --border-style: 5px solid var(--secondary-color);
}

@font-face {
    font-family: tahoma;
    src: url(/data/fonts/tahoma.ttf) format("truetype");
}

.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
}

.common-bg {
    position: absolute;
    z-index: -500;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    perspective: 50vmax;
    perspective-origin: 50% 50%;
    background-color: black;
    overflow: hidden;
}

/* @keyframes moveBackground {
    0% {
        transform: translateZ(40vmax) translateY(-20vmax) rotateX(40deg) rotateY(-10deg) translate(0, 0);
    }

    100% {
        transform: translateZ(40vmax) translateY(-20vmax) rotateX(40deg) rotateY(-10deg) translate(200px, -100px);
    }
} */
@keyframes moveArrows {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1024px 0;
    }
}

@keyframes moveArrows2 {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: 1024px 0;
    }
}
/* meow do you like these*/
:root{
    --GRID-TILE-SIZE: 15vmin;
    --GRID-FINE-TUNED-VERTICAL-OFFSET: -32vmin;
    --GRID-DEPTH: 8vmin;
}
@keyframes moveBackground {
    from{
        transform: 
            translateZ(var(--GRID-DEPTH))
            translateY(var(--GRID-FINE-TUNED-VERTICAL-OFFSET)) 
            rotateZ(-10deg) rotateX(20deg)
        ;
    }
    to{
        transform:
            translateZ(var(--GRID-DEPTH))
            translateY(var(--GRID-FINE-TUNED-VERTICAL-OFFSET))
            rotateZ(-10deg) rotateX(20deg)
            translateX(calc(var(--GRID-TILE-SIZE) * -1))
            translateY(calc(var(--GRID-TILE-SIZE) * -1))
        ;
    }
}
.common-bg .grid {
    position: absolute;
    transform-origin: 50vmax 50vmax;
    opacity: 0.3;
    background: 
        linear-gradient(90deg, var(--main) 2px, transparent 2px), 
        linear-gradient(180deg, var(--main) 2px, transparent 2px)
    ;
    background-size: var(--GRID-TILE-SIZE) var(--GRID-TILE-SIZE);
    height: 200vh;
    width: 200vw;
    animation: moveBackground 10s linear infinite;
    backface-visibility: hidden;
    will-change: transform; 
    transform-style: flat;
}
@media(prefers-reduced-motion) {
    .common-bg .grid{
        animation-play-state: paused;
    }
}

.common-bg .top {
    width: 30vmax;
    height: 10vmin;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: skew(-30deg) translateX(-10vmax);
    border-radius: 1vmax;
    border-bottom: var(--borders);
    border-right: var(--borders);
    overflow: hidden;
}

.common-bg .bottom {
    width: 30vmax;
    height: 10vmin;
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: skew(-30deg) translateX(10vmax);
    border-radius: 1vmax;
    border-top: var(--borders);
    border-left: var(--borders);
    overflow: hidden;
}

.common-bg .arrow-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;


}

.common-bg .arrow-band-l {
    width: 100%;
    height: 16px;
    opacity: 0.5;

    position: absolute;
    left: 0;

    background-image: url('bg/arrows.png');
}

.common-bg .arrow-band-l.a {
    top: 0;
    animation: moveArrows 30s linear infinite;
}

.common-bg .arrow-band-l.b {
    bottom: 0;
    animation: moveArrows2 30s linear infinite;
    rotate: 180deg;
}

.common-bg .corner {
    position: absolute;
    width: 30vmax;
    height: 10vmin;
    border-radius: 1vmax;
    overflow: hidden;
    background: linear-gradient(135deg, var(--secondary-color), transparent);
}

.corner.top-left {
    top: 0;
    left: 0;
    transform: skew(-30deg) translateX(-10vmax);
    border-bottom: var(--border-style);
    border-right: var(--border-style);
}

.corner.bottom-right {
    bottom: 0;
    right: 0;
    transform: skew(-30deg) translateX(10vmax);
    border-top: var(--border-style);
    border-left: var(--border-style);
    background: linear-gradient(315deg, var(--secondary-color), transparent);
}

.common-bg .gradient{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
}

.common-bg .van{
    width: 100%;
    height: 100%;
    position: absolute;
    top: -8px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.common-bg .van img{
    height: 100%;
    opacity: 0.5;
    transform: skew(30deg);
    filter: brightness(100%) saturate(100%);
}

.common-bg .van-text{
    position: absolute;
    width: 200px;
    top: 25%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    color: var(--main);
    transform: skew(30deg);
    font-family: tahoma;
    opacity: 0.1;
}




@media(prefers-reduced-motion) {

    .common-bg .arrow-band-l.a {
        animation: none;
    }

    .common-bg .arrow-band-l.b {
        animation: none;
    }
}

@media (pointer: none), (pointer: coarse) {
    .bg-wrapper *{
        animation-play-state: paused !important;
    }
}