/* Disclaimer
A lot of this code is written using AI and various internet references. */

:root {
  --bounce: linear(
    0 0%,
    0 2.27%,
    0.02 4.53%,
    0.04 6.8%,
    0.06 9.07%,
    0.1 11.33%,
    0.14 13.6%,
    0.25 18.15%,
    0.39 22.7%,
    0.56 27.25%,
    0.77 31.8%,
    1 36.35%,
    0.89 40.9%,
    0.85 43.18%,
    0.81 45.45%,
    0.79 47.72%,
    0.77 50%,
    0.75 52.27%,
    0.75 54.55%,
    0.75 56.82%,
    0.77 59.1%,
    0.79 61.38%,
    0.81 63.65%,
    0.85 65.93%,
    0.89 68.2%,
    1 72.7%,
    0.97 74.98%,
    0.95 77.25%,
    0.94 79.53%,
    0.94 81.8%,
    0.94 84.08%,
    0.95 86.35%,
    0.97 88.63%,
    1 90.9%,
    0.99 93.18%,
    0.98 95.45%,
    0.99 97.73%,
    1 100%
  );
  --speed: 6s;
}

* {
  transform-style: preserve-3d;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  background: #2f2f2f;
  align-items: center;
  justify-content: center;
  perspective: 500vmin;
  background: #2f2f2f;
}

.content {
  width: 36vmin;
  height: 36vmin;
  background: #f000;
  display: flex;
  align-items: center;
  justify-content: center;
  /*transform: rotate3d(1,1,1,45deg);*/
  margin-top: 22vmin;
}

.cuboid {
  --height: 36;
  --width: 36;
  --depth: 36;
  --hue: 225;
  --sat: 20%;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  transform: translate3d(0vmin, 0vmin, 0vmin);
}

.cuboid > .side {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  perspective: 100vmin;
}

.cuboid > .side:nth-of-type(1) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 50%);
}
.cuboid > .side:nth-of-type(2) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
    rotateY(180deg);
  background: hsl(var(--hue), var(--sat), 30%);
}
.cuboid > .side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg)
    translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 65%);
}
.cuboid > .side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg)
    translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid > .side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg)
    translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid > .side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg)
    translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 25%);
}

[class^="rotate-"],
[class*="rotate-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.rotate-x,
.rotate-y,
.rotate-z {
  animation: rot-x var(--speed) linear 0s infinite;
  animation-play-state: paused;
}
.rotate-y {
  animation-name: rot-y;
}
.rotate-z {
  animation-name: rot-z;
}

#rx:checked ~ .content .rotate-x,
#ry:checked ~ .content .rotate-y,
#rz:checked ~ .content .rotate-z {
  animation-play-state: running;
}

@keyframes rot-x {
  100% {
    transform: rotateX(360deg);
  }
}
@keyframes rot-y {
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rot-z {
  100% {
    transform: rotateZ(-360deg);
  }
}

label {
  position: absolute;
  top: 10vmin;
  left: 50%;
  width: 8vmin;
  height: 8vmin;
  background-color: rgba(255, 0, 0, 0.192);
  cursor: pointer;
  left: 2vmin;
  top: 2vmin;
}

input {
  display: none;
}

.cuboid.xyz {
  position: absolute;
  --width: 12;
  --height: 12;
  --depth: 12;
  --hue: 125;
  background-color: #00f4;
  top: 10vmin;
  transform: rotateX(-45deg) rotateY(48deg) rotateZ(4deg);
  transform-origin: 50% 50%;
  perspective: 10000vmin;
}

.xyz.cuboid > .side {
  --clr: #667399;
  background: linear-gradient(
      0deg,
      var(--clr) 13%,
      #fff0 0% 87%,
      var(--clr) 0% 100%
    ),
    linear-gradient(90deg, var(--clr) 13%, #fff0 0% 87%, var(--clr) 0% 100%),
    radial-gradient(#666, #434343, #222);
}
.xyz.cuboid > .side:nth-child(4) {
  --clr: #525c7a;
}
.xyz.cuboid > .side:nth-child(5) {
  --clr: #b3b9cc;
}

label.cuboid {
  --width: 8;
  --height: 8;
  --depth: 8;
  transform: translateZ(1vmin);
  perspective: 1000vmin;
  transition: all 0.5s var(--bounce) 0s;
}

label.cuboid[for="ry"] {
  transform: translateZ(1vmin) rotateY(90deg);
}

label.cuboid[for="rz"] {
  transform: translateZ(1vmin) rotateX(270deg);
}

#rx:checked ~ .xyz.cuboid label[for="rx"],
#ry:checked ~ .xyz.cuboid label[for="ry"],
#rz:checked ~ .xyz.cuboid label[for="rz"] {
  transform: translateZ(-0.5vmin);
}

#ry:checked ~ .xyz.cuboid label[for="ry"] {
  transform: translateZ(-0.5vmin) rotateY(90deg);
}

#rz:checked ~ .xyz.cuboid label[for="rz"] {
  transform: translateZ(-0.5vmin) rotateX(270deg);
}

#rx:checked ~ .xyz.cuboid label[for="rx"].cuboid {
  --hue: 10;
  --sat: 60%;
}

#rx:checked ~ .xyz.cuboid label[for="rx"] .side {
  box-shadow: 0 0 1vmin 0 #cc4c33, 0 0 1vmin 0 #a33d29 inset;
}

#rz:checked ~ .xyz.cuboid label[for="rz"].cuboid {
  --hue: 100;
  --sat: 60%;
}

#rz:checked ~ .xyz.cuboid label[for="rz"] .side {
  box-shadow: 0 0 1vmin 0 #64ca32, 0 0 1vmin 0 #52a429 inset;
}

#ry:checked ~ .xyz.cuboid label[for="ry"].cuboid {
  --hue: 200;
  --sat: 60%;
}

#ry:checked ~ .xyz.cuboid label[for="ry"] .side {
  box-shadow: 0 0 1vmin 0 #44a1ce, 0 0 1vmin 0 #297aa3 inset;
}

label[for="rz"] .side:nth-child(5):before {
  content: "Z";
  color: #ffffff45;
  color: #66cb33;
  color: #fff0;
  font-size: 5vmin;
  font-family: Arial, Helvetica, serif;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  transform: rotate(45deg);
  text-shadow: -1px 0 0px #fff8, 1px 0 0px #0004;
}
label[for="rx"] .side:nth-child(1):before {
  content: "X";
  color: #ffffff45;
  color: #cc4c33;
  color: #fff0;
  font-size: 5vmin;
  font-family: Arial, Helvetica, serif;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  text-shadow: -1px 0 0px #fff8, 1px 0 0px #0004;
}
label[for="ry"] .side:nth-child(4):before {
  content: "Y";
  color: #ffffff45;
  color: #3399cc;
  color: #fff0;
  font-size: 5vmin;
  font-family: Arial, Helvetica, serif;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  text-shadow: -1px 0 0px #fff8, 1px 0 0px #0004;
}

#rz:checked ~ .xyz.cuboid label[for="rz"] .side:nth-child(5):before,
#rx:checked ~ .xyz.cuboid label[for="rx"] .side:nth-child(1):before,
#ry:checked ~ .xyz.cuboid label[for="ry"] .side:nth-child(4):before {
  color: #fff;
}

#rx:checked ~ .xyz.cuboid > .side:nth-child(1) {
  box-shadow: 0 0 5vmin 1vmin #ff6243dd inset;
}
#ry:checked ~ .xyz.cuboid > .side:nth-child(4) {
  box-shadow: 0 0 5vmin 1vmin #3399ccdd inset;
}
#rz:checked ~ .xyz.cuboid > .side:nth-child(5) {
  box-shadow: 0 0 5vmin 1vmin #64c731dd inset;
}