:root {
  --cubeWidth: 0.5em;
  --cubeWidthMid: 0.25em;
}

body {
  background: #0000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 75px;
  perspective: 10em;
  perspective-origin: 50% calc(50% - 3em);
}

#play {
  display: block;
  position: absolute;
  color: white;
  padding: 10px 15px;
  background: linear-gradient(
    to left,
    rgb(133, 200, 138, 0.5),
    rgb(84, 99, 255, 0.5)
  );
  border: 0;
  border-radius: 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 80px;
}
#play:hover {
  cursor: pointer;
}

#reset {
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  color: white;
  padding: 10px 15px;
  background: linear-gradient(
    to left,
    rgb(133, 200, 138, 0.5),
    rgb(84, 99, 255, 0.5)
  );
  border: 0;
  border-radius: 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
}
#reset:hover {
  cursor: pointer;
}

#timer {
  position: absolute;
  top: 25px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
}

#title {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
}
#desc {
  position: absolute;
  text-align: right;
  line-height: 20px;
}
#title .scene {
  left: 5em;
  top: 3em;
}

.small {
  font-size: 10px;
}

/*DEFAULT SCENE & CUBE SETTINGS*/
.scene {
  position: absolute;
  transform-style: preserve-3d;
}

.cube {
  width: var(--cubeWidth);
  height: var(--cubeWidth);
  transform-style: preserve-3d;
  position: absolute;

  .left,
  .right,
  .front,
  .back {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }

  .front {
    transform: translateZ(var(--cubeWidthMid));
  }
  .right {
    transform: rotateY(90deg) translateZ(var(--cubeWidthMid));
  }
  .back {
    transform: rotateY(180deg) translateZ(var(--cubeWidthMid));
  }
  .left {
    transform: rotateY(270deg) translateZ(var(--cubeWidthMid));
  }

  .top {
    position: absolute;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    transform: translateY(-50%) rotateX(90deg);
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }

  .bottom {
    position: absolute;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    transform: translateY(50%) rotateX(90deg);
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }
}
.bigCube {
  width: calc(var(--cubeWidth) * 3);
  height: calc(var(--cubeWidth) * 3);
  transform-style: preserve-3d;
  position: absolute;

  .left,
  .right,
  .front,
  .back {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }

  .front {
    transform: translateZ(calc(var(--cubeWidthMid) * 3));
  }
  .right {
    transform: rotateY(90deg) translateZ(calc(var(--cubeWidthMid) * 3));
  }
  .back {
    transform: rotateY(180deg) translateZ(calc(var(--cubeWidthMid) * 3));
  }
  .left {
    transform: rotateY(270deg) translateZ(calc(var(--cubeWidthMid) * 3));
  }

  .top {
    position: absolute;
    width: calc(var(--cubeWidth) * 3);
    height: calc(var(--cubeWidth) * 3);
    transform: translateY(-50%) rotateX(90deg);
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }

  .bottom {
    position: absolute;
    width: calc(var(--cubeWidth) * 3);
    height: calc(var(--cubeWidth) * 3);
    transform: translateY(50%) rotateX(90deg);
    box-shadow: 0 0 0.3em 0em #0003 inset;
  }
}
.side {
  display: block;
}

/*SCENE ROTATION*/
.rotateYRight {
  animation: rotateYRight 8s infinite linear;
}
.rotateYLeft {
  animation: rotateYLeft 8s infinite linear;
}
.rotateXRight {
  animation: rotateXRight 8s infinite linear;
}
.rotateXLeft {
  animation: rotateXLeft 8s infinite linear;
}
.rotateXYLeft {
  animation: rotateXYLeft 8s infinite linear;
}
.rotateXYRight {
  animation: rotateXYRight 8s infinite linear;
}
.rotateXYRightLeft {
  animation: rotateXYRightLeft 8s infinite linear;
}
.rotateXYLeftRight {
  animation: rotateXYLeftRight 8s infinite linear;
}

/*CUBE COLOR & POSITION*/
.green {
  top: 2em;
  left: 2em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(133, 200, 138, 0.5);
  }
}
.bigGreen {
  top: 1em;
  left: 4em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(133, 200, 138, 0.5);
  }
}
.red {
  top: 1em;
  left: -3em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(255, 81, 81, 0.5);
  }
}
.bigRed {
  top: -3em;
  left: -3em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(255, 81, 81, 0.5);
  }
}
.blue {
  top: -5em;
  left: 0em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(84, 99, 255, 0.5);
  }
}
.bigBlue {
  top: 4em;
  left: 2em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(84, 99, 255, 0.5);
  }
}
.pink {
  top: -3em;
  left: -4em;
  .left,
  .right,
  .front,
  .back,
  .bottom,
  .top {
    background: rgb(218, 159, 249, 0.5);
  }
}

/* KEYFRAMES */
@keyframes rotateYRight {
  to {
    transform: rotateY(360deg);
  }
}
@keyframes rotateYLeft {
  to {
    transform: rotateY(-360deg);
  }
}
@keyframes rotateXRight {
  to {
    transform: rotateX(360deg);
  }
}
@keyframes rotateXLeft {
  to {
    transform: rotateX(-360deg);
  }
}
@keyframes rotateXYLeft {
  to {
    transform: rotateY(-360deg) rotateX(-360deg);
  }
}
@keyframes rotateXYRight {
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
@keyframes rotateXYRightLeft {
  to {
    transform: rotateY(360deg) rotateX(-360deg);
  }
}
@keyframes rotateXYLeftRight {
  to {
    transform: rotateY(-360deg) rotateX(-360deg);
  }
}