:root {
    --cube-width: 300px;
    --translateZ: 150px;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: #000;
}

header {
    color: bisque;
    display: flex;
    align-items: center;
    height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
}

header h1 {
    margin: 0;
    font-size: 100px;
}

header .sub {
    font-size: 24px;
    margin: 0;
}

.cube-container {
    perspective: 1000px;
}

.cube-container .cube {
    width: var(--cube-width);
    height: var(--cube-width);
    transform-style: preserve-3d;
}

.cube-container .cube-face {
    width: var(--cube-width);
    height: var(--cube-width);
    font-size: 30px;
    position: absolute;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube-img {
    width: 300px;
    height: 300px;
}

.cube-container .front {
    background: #d5b59c;
    transform: translateZ(var(--translateZ));
}
.cube-container .back {
    background: #d5b59c;
    transform: rotateY(180deg) translateZ(var(--translateZ));
}
.cube-container .left {
    background: #d5b59c;
    transform: rotateY(-90deg) translateZ(var(--translateZ));
}
.cube-container .right {
    background: #d5b59c;
    transform: rotateY(90deg) translateZ(var(--translateZ));
}
.cube-container .top {
    background: #d5b59c;
    transform: rotateX(90deg) translateZ(var(--translateZ));
}
.cube-container .bottom {
    background: #d5b59c;
    transform: rotateX(-90deg) translateZ(var(--translateZ));
}