/*body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-items: center;
    align-items: center;
    overflow: hidden;
}*/

.cube-container {
    width: 15em;
    width: 15em;
    text-align: center;
    perspective: 45em;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition-duration: 2s;
    transform: rotateX(-15deg) rotateY(20deg);
}

.cube-side {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
}

.cube-side:nth-child(1) {
    transform: rotateY(0deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-front.jpg);
}
.cube-side:nth-child(2) {
    transform: rotateY(90deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-right.jpg);
    background-size: 245px;
}
.cube-side:nth-child(3) {
    transform: rotateY(180deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-back.jpg);
}
.cube-side:nth-child(4) {
    transform: rotateY(-90deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-left.jpg);
    background-size: 245px;
}
.cube-side:nth-child(5) {
    transform: rotateX(-90deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-bottom.jpg);
}
.cube-side:nth-child(6) {
    transform: rotateX(90deg) translateZ(100px);
    background-image: url(/index/images/dither_it_3dcomputer-top.jpg);
}

.cube:hover {
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transform: rotatex(-5deg) rotatey(200deg);
}