.center{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

.threeD{
        margin-top: 100px;
        margin-left: 100px;
        transform-style: preserve-3d;
        transform: perspective(100cm);
}

.threeD div{
        transform-style: preserve-3d;
        background-image: url("../assets/images/debug.png");
        background-size: 100%;
}

/*front*/
.cubed{
        background-size: 100% 100%;
        height:var(--cHeight) !important;
        width: var(--cWidth) !important;
        background-image: var(--img);
        background-position: top left;
        background-color: var(--color);
        transform-style: preserve-3d;
        /*(in)SANE DEFAULTS*/
        --cWidth: 100px;
        --cHeight: 100px;
        --cDepth: 100px;
        --img: none;
        --color: #ffffff;
        --flipY: 0deg;
        /*
        DEBUG
        */
        /*
        position: absolute;
        top: 50%;
        left: 50%;
        transform: perspective(100cm) rotate3D(1, 0, 1, 45deg);
        animation-name: debug;
        animation-iteration-count: infinite;
        animation-duration: 4s;
        animation-timing-function: linear;
*/
}


/* top */
.cubed > div:nth-child(1){
        position: absolute;
        top: 0px;
        left: 0px;
        width: var(--cWidth);
        height: var(--cDepth);
        transform: rotateX(90deg) rotate(180deg) translateY(calc(-1 *var(--cDepth)));
        transform-origin: 50% 0% 0;
}

/* bottom */
.cubed > div:nth-child(2){
        position: absolute;
        top: 0px;
        left: 0px;
        width: var(--cWidth);
        height: var(--cDepth);
        transform: rotateX(-90deg) translateZ(var(--cHeight)) translateY(calc(-1 * var(--cDepth)));
        transform-origin: 50% 0% 0;
}

/* right */
.cubed > div:nth-child(3){
        position: absolute;
        top: 0px;
        left: 0px;
        width: var(--cHeight); 
        height: var(--cDepth);
        transform: rotateX(90deg) rotateY(90deg) translateZ(var(--cWidth)) rotate(180deg) translate(-100%, -100%);
        transform-origin: 0% 0% 0;
}

/* left */
.cubed > div:nth-child(4){
        position: absolute;
        top: 0px;
        left: 0px;
        width: var(--cHeight); 
        height: var(--cDepth);
        transform: rotateX(90deg) rotateY(90deg) rotate(180deg) translate(-100%, -100%);
        transform-origin: 0% 0% 0;
}

/*back*/
.cubed > div:nth-child(5){
        position: absolute;
        top: 0px;
        left: 0px;
        height:var(--cHeight);
        width: var(--cWidth);
        transform: translateZ(var(--cDepth));
}


@keyframes debug {
        from {transform: perspective(100cm) rotate3D(1, 1, 1, 0deg);}
        to {transform: perspective(100cm) rotate3D(1, 1, 1, 360deg);}
}

.cubed > div{
        transform-style: preserve-3d;
        background-image: var(--img);
        background-color: var(--color);
        transform: perspective(100cm);
        background-size: 100% 100%;
}

.extrude{
}