/* VARIABLES */

:root{
    --box-height: 500px;
}

/* LAYOUT */

#intro{
    position: relative;
}

.actual-intro{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* INTRO TEXT */

.intro-content{
    background: white;
    padding: 20px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.7);
    max-width: 780px;
}

.intro-content .button-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* SPINNY BOX */

.gamebox-container{
    perspective: 1900px;
    aspect-ratio: 1;
    height: var(--box-height);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 64px;
    filter: drop-shadow(0 0 7px rgba(0,0,0,0.6));
}

.gamebox{
    aspect-ratio: 1183 / 2009;
    height: var(--box-height);
    position: relative;
    transform-style: preserve-3d;
    user-select: none;
}

.gamebox img{
    transform-style: preserve-3d;
}

.gamebox img:not(.f){
    position: absolute;
}

.l{
    right: 100%;
    transform-origin: right;
    transform: rotateY(-90deg);
}

.r{
    left: 100%;
    transform-origin: left;
    transform: rotateY(90deg);
}

.t{
    bottom: 100%;
    transform-origin: bottom;
    transform: rotateX(90deg);
}

.b{
    top: 100%;
    transform-origin: top;
    transform: rotateX(-90deg);
}

.l, .r{
    height: 100%;
}

.f, .t, .b{
    width: 100%;
}

/* RESPONSIVE */

@media (max-width: 1234px) {
    :root{
        --box-height: 400px;
    }

    .actual-intro{
        flex-direction: column;
    }

    .intro-content{
        margin: 0 5%;
    }

    .gamebox-container{
        aspect-ratio: 1/2;
    }
}