#canvas{
    position: relative;
    display: grid;
    place-items: center;

    perspective: 800px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    background-color: rgba(34, 34, 34, 0.4);
}

.cubeContainer{
    width: calc(var(--c) * 3);
    height: calc(var(--c) * 3);
    transform-style: preserve-3d;

    transform: rotateX(-30deg) rotateY(-45deg);
}


.cubeContainer .cube{
    position: absolute;
    min-width: var(--c); min-height: var(--c);
    transform-style: preserve-3d;
    
    display: grid;
    place-items: center;
}
.cubeContainer .cube p{
    display: none;
}

.cube .face{
    --transform-factor: 1;
    --translate-calc: calc((var(--transform-factor) * var(--c)) / 2);

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

.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);}

/*  */

#scanBox .cubeContainer .face.outer{
    border: 1px solid rgb(34, 34, 34);
    background-color: rgb(0, 0, 0);
}
#scanBox .cubeContainer .face.outer:hover{
    cursor: pointer;
    opacity: .4;
}
#scanBox .cubeContainer .face:hover::before{
    opacity: 0;

}
.cubeContainer .face.outer{
    --border-radius: calc(var(--c) / 4);
    border: 1px solid black;
    user-select: none;
    perspective: 50px;
    transform-style: preserve-3d;
}

.cubeContainer.showCell .face.inner{
    background-color: rgb(34, 34, 34);
}


/* stickers style */

#c5 .face,
#c11 .face,
#c13 .face,
#c15 .face,
#c17 .face,
#c23 .face{
    border-radius: var(--border-radius);
}

#c2 .face:nth-child(2),
#c2 .face:nth-child(3),
#c10 .face:nth-child(5),
#c12 .face:nth-child(6),
#c20 .face:nth-child(1),
#c26 .face:nth-child(4)
{
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

#c4 .face:nth-child(2),
#c22 .face:nth-child(5),
#c24 .face:nth-child(1),
#c6 .face:nth-child(6),
#c12 .face:nth-child(3),
#c18 .face:nth-child(4)
{
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

#c6 .face:nth-child(2),
#c4 .face:nth-child(5),
#c22 .face:nth-child(1),
#c24 .face:nth-child(6),
#c10 .face:nth-child(3),
#c16 .face:nth-child(4)
{
    border-bottom-right-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#c8 .face:nth-child(2),
#c16 .face:nth-child(5),
#c26 .face:nth-child(1),
#c18 .face:nth-child(6),
#c20 .face:nth-child(3),
#c8 .face:nth-child(4)
{
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#c1 .face:nth-child(2)::before,
#c2 .face:nth-child(2)::before,
#c3 .face:nth-child(2)::before,
#c4 .face:nth-child(2)::before,
#c5 .face:nth-child(2)::before,
#c6 .face:nth-child(2)::before,
#c7 .face:nth-child(2)::before,
#c8 .face:nth-child(2)::before,
#c9 .face:nth-child(2)::before,

#c3 .face:nth-child(6)::before,
#c12 .face:nth-child(6)::before,
#c21 .face:nth-child(6)::before,
#c6 .face:nth-child(6)::before,
#c15 .face:nth-child(6)::before,
#c24 .face:nth-child(6)::before,
#c9 .face:nth-child(6)::before,
#c18 .face:nth-child(6)::before,
#c27 .face:nth-child(6)::before,

#c19 .face:nth-child(5)::before,
#c10 .face:nth-child(5)::before,
#c1 .face:nth-child(5)::before,
#c22 .face:nth-child(5)::before,
#c13 .face:nth-child(5)::before,
#c4 .face:nth-child(5)::before,
#c25 .face:nth-child(5)::before,
#c16 .face:nth-child(5)::before,
#c7 .face:nth-child(5)::before,

#c19 .face:nth-child(3)::before,
#c20 .face:nth-child(3)::before,
#c21 .face:nth-child(3)::before,
#c10 .face:nth-child(3)::before,
#c11 .face:nth-child(3)::before,
#c12 .face:nth-child(3)::before,
#c1 .face:nth-child(3)::before,
#c2 .face:nth-child(3)::before,
#c3 .face:nth-child(3)::before,

#c25 .face:nth-child(1)::before,
#c26 .face:nth-child(1)::before,
#c27 .face:nth-child(1)::before,
#c22 .face:nth-child(1)::before,
#c23 .face:nth-child(1)::before,
#c24 .face:nth-child(1)::before,
#c19 .face:nth-child(1)::before,
#c20 .face:nth-child(1)::before,
#c21 .face:nth-child(1)::before,

#c7 .face:nth-child(4)::before,
#c8 .face:nth-child(4)::before,
#c9 .face:nth-child(4)::before,
#c16 .face:nth-child(4)::before,
#c17 .face:nth-child(4)::before,
#c18 .face:nth-child(4)::before,
#c25 .face:nth-child(4)::before,
#c26 .face:nth-child(4)::before,
#c27 .face:nth-child(4)::before
{
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    transform: translateZ(1px);
    background-color: black;
    transform-style: preserve-3d;
}

.cubeContainer.showCell .cube .face{
    opacity: .4;
}
.cubeContainer.showCell .cube .face::before,
.cubeContainer.showCell .cube .face.inner{
    opacity: 0;
}
.cubeContainer.showCell .cube p{
    background-color: white;
    display: grid;
    place-items: center;
    width: calc(var(--moves-width) / 8);
    aspect-ratio: 1;
}

/*  */

.cubeContainer #c1{
    transform: translateZ(var(--c));
}

.cubeContainer #c2{
    transform: translateZ(var(--c)) translateX(var(--c));
}

.cubeContainer #c3{
    transform: translateZ(var(--c)) translateX(calc(2 * var(--c)));
}

.cubeContainer #c4{
    transform: translateZ(var(--c)) translateY(var(--c));
}
.cubeContainer #c5{
    transform: translateZ(var(--c)) translateX(var(--c)) translateY(var(--c));
}
.cubeContainer #c6{
    transform: translateZ(var(--c)) translateX(calc(2 * var(--c))) translateY(var(--c));
}

.cubeContainer #c7{
    transform: translateZ(var(--c)) translateY(calc(2 * var(--c)));
}
.cubeContainer #c8{
    transform: translateZ(var(--c)) translateX(var(--c)) translateY(calc(2 * var(--c)));
}
.cubeContainer #c9{
    transform: translateZ(var(--c)) translateX(calc(2 * var(--c))) translateY(calc(2 * var(--c)));
}

/*  */

.cubeContainer #c10{
    transform: none;
}
.cubeContainer #c11{
    transform: translateX(var(--c));
}
.cubeContainer #c12{
    transform: translateX(calc(2 * var(--c)));
}

.cubeContainer #c13{
    transform: translateY(var(--c));
}
.cubeContainer #c14{
    transform: translateX(var(--c)) translateY(var(--c));
}
.cubeContainer #c15{
    transform: translateX(calc(2 * var(--c))) translateY(var(--c));
}

.cubeContainer #c16{
    transform: translateY(calc(2 * var(--c)));
}
.cubeContainer #c17{
    transform: translateX(var(--c)) translateY(calc(2 * var(--c)));
}
.cubeContainer #c18{
    transform: translateX(calc(2 * var(--c))) translateY(calc(2 * var(--c)));
}

/*  */

.cubeContainer #c19{
    transform: translateZ(calc(-1 * var(--c)));
}
.cubeContainer #c20{
    transform: translateZ(calc(-1 * var(--c))) translateX(var(--c));
}
.cubeContainer #c21{
    transform: translateZ(calc(-1 * var(--c))) translateX(calc(2 * var(--c)));
}

.cubeContainer #c22{
    transform: translateZ(calc(-1 * var(--c))) translateY(var(--c));
}
.cubeContainer #c23{
    transform: translateZ(calc(-1 * var(--c))) translateX(var(--c)) translateY(var(--c));
}
.cubeContainer #c24{
    transform: translateZ(calc(-1 * var(--c))) translateX(calc(2 * var(--c))) translateY(var(--c));
}

.cubeContainer #c25{
    transform: translateZ(calc(-1 * var(--c))) translateY(calc(2 * var(--c)));
}
.cubeContainer #c26{
    transform: translateZ(calc(-1 * var(--c))) translateX(var(--c)) translateY(calc(2 * var(--c)));
}
.cubeContainer #c27{
    transform: translateZ(calc(-1 * var(--c))) translateX(calc(2 * var(--c))) translateY(calc(2 * var(--c)));
}

#timer{
    position: absolute;
    top: 0; left: 0;
    padding: var(--padding-size);

    background-color: rgba(34, 34, 34, 0.4);
    color: white;
}