@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --light: 0;
  --plane-size: 50;
  --plane-transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translate(-35vw, -35vw) translateZ(-30vw);
  --cube-size: 10;
  --color-0: hsl(132, 64%, 52%);
  --color-1: hsl(309, 97%, 73%);
  --color-2: hsl(202, 100%, 50%);
  --color-3: hsl(49, 91%, 66%);
  --color-4: hsl(0, 100%, 63%);
  --black: hsl(213, 80%, 6%);
  --bg: hsl(
  	calc(290.98 * var(--light)),
  	calc(100% * var(--light)),
  	calc(13.73% + 84.77% * var(--light))
  );
}

body {
  background-color: var(--bg);
  width: 100vw;
  height: 100vh;
  font-family: "Montserrat", sans-serif;
}
@support (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

.geometry {
  --width: var(--geometry-width, 10);
  --height: var(--geometry-height, 10);
  --depth: var(--geometry-depth, 10);
  height: calc(var(--depth) * 1vw);
  width: calc(var(--width) * 1vw);
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x, 0) * 1vw), calc(var(--y, 0) * 1vw), calc(var(--z, 0) * 1vw)) rotateX(calc(var(--rotate-geometry-x, 0) * 1deg)) rotateY(calc(var(--rotate-geometry-y, 0) * 1deg)) rotateZ(calc(var(--rotate-geometry-z, 0) * 1deg));
}
.geometry__side {
  transform-style: preserve-3d;
}
.geometry > div {
  position: absolute;
  top: 50%;
  left: 50%;
}
.geometry > div:nth-of-type(1) {
  width: 100%;
  height: calc(var(--height) * 1vw);
  transform-origin: center;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vw));
}
.geometry > div:nth-of-type(2) {
  width: 100%;
  height: calc(var(--height) * 1vw);
  transform-origin: center;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vw));
}
.geometry > div:nth-of-type(3) {
  height: calc(var(--height) * 1vw);
  width: calc(var(--depth) * 1vw);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vw));
}
.geometry > div:nth-of-type(4) {
  height: calc(var(--height) * 1vw);
  width: calc(var(--depth) * 1vw);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vw));
}
.geometry > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vw);
  width: calc(var(--width) * 1vw);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vw));
}
.geometry > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vw);
  width: calc(var(--width) * 1vw);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vw)) rotateX(180deg);
}

.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 50vw);
}
.scene .plane {
  position: absolute;
  inset-block-start: 50%;
  -webkit-margin-before: calc((var(--plane-size) / 4) * -1vw);
          margin-block-start: calc((var(--plane-size) / 4) * -1vw);
  width: calc(var(--plane-size) * 1vw);
  height: calc(var(--plane-size) * 1vw);
  transform-origin: center;
  transform: rotateY(0deg);
  -webkit-animation: rotate 5s linear infinite;
          animation: rotate 5s linear infinite;
}
.scene .plane .triangle {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform: rotateX(81.5deg) rotateY(51.5deg);
}
.scene .plane .geometry {
  --width: var(--cube-size);
  --height: var(--cube-size);
  --depth: var(--cube-size);
}
.scene .plane .geometry .geometry__side {
  border: 1px solid var(--black);
}
.scene .plane .cube-1 {
  --y: calc(var(--cube-size) * 0);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-1 .geometry__side {
  background-color: var(--color-0);
}
.scene .plane .cube-2 {
  --y: calc(var(--cube-size) * 1);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-2 .geometry__side {
  background-color: var(--color-1);
}
.scene .plane .cube-3 {
  --y: calc(var(--cube-size) * 2);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-3 .geometry__side {
  background-color: var(--color-2);
}
.scene .plane .cube-4 {
  --y: calc(var(--cube-size) * 3);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-4 .geometry__side {
  background-color: var(--color-3);
}
.scene .plane .cube-5 {
  --y: calc(var(--cube-size) * 4);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-5 .geometry__side {
  background-color: var(--color-4);
}
.scene .plane .cube-6 {
  --y: calc(var(--cube-size) * 5);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-6 .geometry__side {
  background-color: var(--color-5);
}
.scene .plane .cube-up-1 {
  --z: calc(var(--cube-size) * 1);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-up-1 .geometry__side {
  background-color: var(--color-1);
}
.scene .plane .cube-up-2 {
  --z: calc(var(--cube-size) * 2);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-up-2 .geometry__side {
  background-color: var(--color-2);
}
.scene .plane .cube-up-3 {
  --z: calc(var(--cube-size) * 3);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-up-3 .geometry__side {
  background-color: var(--color-3);
}
.scene .plane .cube-up-4 {
  --z: calc(var(--cube-size) * 4);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2));
}
.scene .plane .cube-up-4 .geometry__side {
  background-color: var(--color-4);
}
.scene .plane .cube-back-1 {
  --y: calc(var(--cube-size) * 4);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2) + var(--cube-size) * 1 * -1);
}
.scene .plane .cube-back-1 .geometry__side {
  background-color: var(--color-1);
}
.scene .plane .cube-back-2 {
  --y: calc(var(--cube-size) * 4);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2) + var(--cube-size) * 2 * -1);
}
.scene .plane .cube-back-2 .geometry__side {
  background-color: var(--color-2);
}
.scene .plane .cube-back-3 {
  --y: calc(var(--cube-size) * 4);
  --x: calc((var(--plane-size) / 2) - (var(--cube-size) / 2) + var(--cube-size) * 3 * -1);
}
.scene .plane .cube-back-3 .geometry__side {
  background-color: var(--color-3);
}
.scene .plane .cube-back-2 .geometry__side--left {
  display: none;
}
.scene .plane .cube-back-3 .geometry__side {
  background-color: var(--color-0);
}
.scene .plane .cube-back-3 .geometry__side--bottom,
.scene .plane .cube-back-3 .geometry__side--top,
.scene .plane .cube-back-3 .geometry__side--left,
.scene .plane .cube-back-3 .geometry__side--back {
  display: none;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  52% {
    transform: rotateY(-306deg);
  }
  92% {
    transform: rotateY(-306deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  52% {
    transform: rotateY(-306deg);
  }
  92% {
    transform: rotateY(-306deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}