html,
body {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: radial-gradient(#000229, #000110);
  overflow: hidden;
  background: linear-gradient(-45deg, #000229, #000343, #000229, #000110);
  background-size: 400% 400%;
  animation: gradient 20s ease infinite; }

@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.cube {
  width: 200px;
  height: 200px;
  perspective: 800px;
  perspective-origin: 50% 50px; }
  .cube.purple .cube__side {
    background-color: rgba(85, 69, 192, 0.3);
    box-shadow: #5545c0 0px 0px 100px 25px; }
  .cube.purple .cube__side.active {
    background-color: rgba(85, 69, 192, 0.6); }
  .cube.red .cube__side {
    background-color: rgba(221, 0, 49, 0.3);
    box-shadow: #dd0031 0px 0px 100px 25px; }
  .cube.red .cube__side.active {
    background-color: rgba(221, 0, 49, 0.6); }
  .cube.green .cube__side {
    background-color: rgba(65, 184, 131, 0.3);
    box-shadow: #41b883 0px 0px 100px 25px; }
  .cube.green .cube__side.active {
    background-color: rgba(65, 184, 131, 0.6); }
  .cube.blue .cube__side {
    background-color: rgba(97, 218, 251, 0.3);
    box-shadow: #61dafb 0px 0px 100px 25px; }
  .cube.blue .cube__side.active {
    background-color: rgba(97, 218, 251, 0.6); }
  .cube.orange .cube__side {
    background-color: rgba(223, 176, 122, 0.3);
    box-shadow: #dfb07a 0px 0px 100px 25px; }
  .cube.orange .cube__side.active {
    background-color: rgba(223, 176, 122, 0.6); }
  .cube__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translate(0, 0);
    transform-style: preserve-3d;
    animation: spin 30s infinite linear;
    cursor: pointer; }
  .cube__side {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center center; }
    .cube__side.back {
      transform: translateZ(-100px) rotateY(180deg); }
    .cube__side.right {
      transform-origin: top right;
      transform: rotateY(-270deg) translateX(100px); }
    .cube__side.left {
      transform-origin: center left;
      transform: rotateY(270deg) translateX(-100px); }
    .cube__side.top {
      transform-origin: top center;
      transform: rotateX(-90deg) translateY(-100px); }
    .cube__side.bottom {
      transform-origin: bottom center;
      transform: rotateX(90deg) translateY(100px); }
    .cube__side.front {
      transform: translateZ(100px); }

@keyframes spin {
  0% {
    transform: rotateY(45deg) rotateX(60deg); }
  25% {
    transform: rotateY(135deg) rotateX(150deg); }
  50% {
    transform: rotateY(225deg) rotateX(240deg); }
  75% {
    transform: rotateY(315deg) rotateX(330deg); }
  100% {
    transform: rotateY(405deg) rotateX(420deg); } }

@keyframes reveal {
  0%, 90% {
    bottom: -30px; }
  100% {
    bottom: 15px; } }