* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
}

.wrap {
    perspective: 1000px;
}

:root {
    --outer: 90px;
    --inner: 80px;
}

.cube-rotate {
    position: relative;
    width: var(--outer);
    height: var(--outer);
    transform-style: preserve-3d;
    animation: rotate 12s linear infinite;
}

.cube-out {
    position: absolute;
    width: var(--outer);
    height: var(--outer);
    transform-style: preserve-3d;
}

.o-face {
    position: absolute;
    width: var(--outer);
    height: var(--outer);
    background-image: url("skin/TZDwithcat.png");
    background-size: calc(var(--outer) * 8) calc(var(--outer) * 8);
    background-repeat: no-repeat;
    backface-visibility: visible;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.o-front {
    transform: translateZ(calc(var(--outer)/2));
    background-position: calc(-5 * var(--outer)) calc(-1 * var(--outer));
}

.o-back {
    transform: rotateY(180deg) translateZ(calc(var(--outer)/2));
    background-position: calc(-7 * var(--outer)) calc(-1 * var(--outer));
}

.o-left {
    transform: rotateY(-90deg) translateZ(calc(var(--outer)/2));
    background-position: calc(-4 * var(--outer)) calc(-1 * var(--outer));
}

.o-right {
    transform: rotateY(90deg) translateZ(calc(var(--outer)/2));
    background-position: calc(-6 * var(--outer)) calc(-1 * var(--outer));
}

.o-top {
    transform: rotateX(90deg) translateZ(calc(var(--outer)/2));
    background-position: calc(-5 * var(--outer)) 0;
}

.o-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--outer)/2)) rotateZ(180deg);
    background-position: calc(-6 * var(--outer)) 0;
}

.cube-in {
    position: absolute;
    width: var(--inner);
    height: var(--inner);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    width: var(--inner);
    height: var(--inner);
    background-image: url("skin/TZDwithcat.png");
    background-size: calc(var(--inner) * 8) calc(var(--inner) * 8);
    background-repeat: no-repeat;
    backface-visibility: visible;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.front {
    transform: translateZ(calc(var(--inner)/2));
    background-position: calc(-1 * var(--inner)) calc(-1 * var(--inner));
}

.back {
    transform: rotateY(180deg) translateZ(calc(var(--inner)/2));
    background-position: calc(-3 * var(--inner)) calc(-1 * var(--inner));
}

.left {
    transform: rotateY(-90deg) translateZ(calc(var(--inner)/2));
    background-position: 0 calc(-1 * var(--inner));
}

.right {
    transform: rotateY(90deg) translateZ(calc(var(--inner)/2));
    background-position: calc(-2 * var(--inner)) calc(-1 * var(--inner));
}

.top {
    transform: rotateX(90deg) translateZ(calc(var(--inner)/2));
    background-position: calc(-1 * var(--inner)) 0;
}

.bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--inner)/2)) rotateZ(180deg);
    background-position: calc(-2 * var(--inner)) 0;
}

@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}