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

:root {
    --size: min(60px, 10vw);
    --size-half: calc(0.5 * var(--size));
    --size-half-negative: calc(-0.5 * var(--size));
    --border-radius: calc(0.1 * var(--size));
    --shadow-radius: calc(0.1 * var(--size));
    --perspective: calc(2.5 * var(--size));
    --font-size: calc(0.9 * var(--size));
    --dot-size: calc(0.25 * var(--size));
    --dot-color: rgb(48, 48, 48);
    --face-color: gray;
    --dice-background: rgb(255, 255, 215);
    --rotation-speed: 10s;
}

.stage {
    height: 70px;
    perspective: var(--perspective);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.cube {
    animation: cube-rotation var(--rotation-speed) linear infinite;
    position: relative;
    transform-style: inherit;
}

.face {
    position: absolute;
    width: var(--size);
    height: var(--size);
    transition: all 200ms ease;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--face-color);
    font-size: var(--font-size);
    user-select: none;
    border-radius: var(--border-radius);
    border: solid;
}

.faceContent {
    display: flex;
    justify-content: space-between;
    background: var(--color);
    border-radius: var(--border-radius);
    width: 90%;
    height: 90%;
}

.dots {
    display: flex;
    flex-direction: column;
    align-items: right;
}

.dotContainer {
    height: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: var(--dot-color);
    border-radius: 50%;
}

.clear {
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: var(--dice-background);
    border-radius: 50%;
}

.face.front {
    background-color: var(--dice-background);
    transform: translateX(-50%) translateY(-50%) translateZ(var(--size-half));
}

.face.back {
    background-color: var(--dice-background);
    transform: translateX(-50%) translateY(-50%) translateZ(var(--size-half-negative)) scaleX(-1);
}

.face.top {
    background-color: var(--dice-background);
    transform: translateX(-50%) translateY(calc(-50% + var(--size-half-negative))) rotateX(90deg);
}

.face.bottom {
    background-color: var(--dice-background);
    transform: translateX(-50%) translateY(calc(-50% + var(--size-half))) rotateX(90deg);
}

.face.left {
    background-color: var(--dice-background);
    transform: translateX(calc(-50% + var(--size-half-negative))) translateY(-50%) rotateY(-90deg);
}

.face.right {
    background-color: var(--dice-background);
    transform: translateX(calc(-50% + var(--size-half))) translateY(-50%) rotateY(90deg);
}

.dice-container {
    display: flex;
    justify-content: center;
}

.container-stage {
    width: 100px;
}