#cube{
    position: relative;
    min-width: var(--square-length); min-height: var(--square-length);
    transform-style: preserve-3d;
    cursor: grab;

    pointer-events: none;
    color: rgb(var(--l100));

    /* background-color: red; */
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(calc(var(--square-length) / 2));

}

#cube .face{
    --transform-factor: 1;
    --translate-calc: calc((var(--transform-factor) * var(--square-length)) / 2);
    /* background-color: red; */

    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);

    background-color: rgb(var(--d100));
    border: 1px solid rgb(var(--d200));
    padding: var(--padding-value);

    pointer-events: auto;
}

#cube .face:nth-child(odd){--transform-factor: -1;}
#cube .face:nth-of-type(1){transform: translateZ(var(--translate-calc));}
#cube .face:nth-of-type(2){transform: translateZ(var(--translate-calc)) rotateY(180deg);}
#cube .face:nth-of-type(3){transform: translateY(var(--translate-calc)) rotateX(90deg) rotateY(180deg) rotateZ(180deg);}
#cube .face:nth-of-type(4){transform: translateY(var(--translate-calc)) rotateX(90deg);}
#cube .face:nth-of-type(5){transform: translateX(var(--translate-calc)) rotateY(90deg);}
#cube .face:nth-of-type(6){transform: translateX(var(--translate-calc)) rotateY(-90deg);}

/* #cube{
    transform: translateX(-50%) translateY(-50%) translateZ(calc(var(--square-length) / 2)) rotateX(-90deg);
} */