/* init */
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: unset;
    padding: unset;
    height: 100%;
}




/* background */
html {
    box-sizing: border-box;

    --bg-color: 50 95% 65%;
    --bg-color-secondary: 210 5% 65%;
    --bg-color-dark: 210 80% 35%;

    background-image:
        radial-gradient(
	    circle at top right,
	    hsl(var(--bg-color)),
	    hsl(var(--bg-color) / 0%)
	),
	radial-gradient(
	    circle at bottom left,
	    hsl(var(--bg-color-secondary)),
	    hsl(var(--bg-color-secondary) / 0%)
	);
    background-color: hsl(var(--bg-color-secondary));
}


@media (prefers-color-scheme: dark) {
    html {
	background-image:
	    radial-gradient(
	        circle at top right,
		hsl(var(--bg-color-dark)),
		hsl(var(--bg-color-dark) / 0%)
	    ),
	    radial-gradient(
	        circle at bottom left,
		black,
		transparent
	    );
	background-color: black;
    }
}


#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 120vh;
}




/* dice */
@keyframes spin {
    0% {
	transform: translateZ(-12vh) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
	transform: translateZ(-12vh) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
    }
    33% {
	transform: translateZ(-12vh) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
    }
    50% {
	transform: translateZ(-12vh) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
    66% {
	transform: translateZ(-12vh) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
    }
    83% {
	transform: translateZ(-12vh) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
    }
    100% {
	transform: translateZ(-12vh) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}


#dice {
    width: 24vh;
    height: 24vh;
    transform-style: preserve-3d;
    animation: spin 45s infinite linear;
}


@media (prefers-reduced-motion) {
    #dice {
	animation:  spin 180s infinite linear;
    }
}


#dice .front.face {
    transform: rotateX(0deg) translateZ(12.1vh);
}
#dice .front.inner {
    transform: rotateX(0deg) translateZ(12vh);
}


#dice .back.face {
    transform: rotateX(-180deg) translateZ(12.1vh);
}
#dice .back.inner {
    transform: rotateX(-180deg) translateZ(12vh);
}


#dice .right.face {
    transform: rotateY(90deg) translateZ(12.1vh);
}
#dice .right.inner {
    transform: rotateY(90deg) translateZ(12vh);
}


#dice .left.face {
    transform: rotateY(-90deg) translateZ(12.1vh);
}
#dice .left.inner {
    transform: rotateY(-90deg) translateZ(12vh);
}


#dice .top.face {
    transform: rotateX(90deg) translateZ(12.1vh);
}
#dice .top.inner {
    transform: rotateX(90deg) translateZ(12vh);
}


#dice .bottom.face {
    transform: rotateX(-90deg) translateZ(12.1vh);
}
#dice .bottom.inner {
    transform: rotateX(-90deg) translateZ(12vh);
}




/* dice side */
.side {
    position: absolute;
    width: 24vh;
    height: 24vh;
    padding: 1.2vh;
    background: white;
    box-shadow: inset 0 0 4vh hsl(0, 0%, 80%);
    border-radius: 4vh;
}


.face {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    grid-template-areas:
        "a . c"
	"e g f"
	"d . b";
}


.dot {
    display: block;
    align-self: center;
    justify-self: center;

    width: 6vh;
    height: 6vh;
    border-radius: 3vh;
    background: hsl(0, 0%, 20%);
    box-shadow: inset 0.6vh 0 1.2vh black;
}


.dot:nth-child(2) {
    grid-area: b;
}
.dot:nth-child(3) {
    grid-area: c;
}
.dot:nth-child(4) {
    grid-area: d;
}
.dot:nth-child(5) {
    grid-area: e;
}
.dot:nth-child(6) {
    grid-area: f;
}
.dot:nth-child(odd):last-child {
    grid-area: g;
}




/* preventing blank edges of the cube */
#dice .cover,
#dice .inner {
    background: hsl(0, 0%, 90%);
    box-shadow: none;
}


#dice .cover {
    border-radius: 0;
}
#dice .cover.x {
    transform: rotateY(90deg);
}
#dice .cover.y {
    transform: translateZ(0vh);
}
#dice .cover.z {
    transform: rotateX(90deg);
}