@-webkit-keyframes rotateDiscoBall {
  0% {
    -webkit-transform: rotateX(90deg) rotateZ(0deg) rotate(0deg);
  }

  100% {
    -webkit-transform: rotateX(90deg) rotateZ(360deg) rotate(0deg);
  }
}

@keyframes rotateDiscoBall {
  0% {
    transform: rotateX(90deg) rotateZ(0deg) rotate(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateZ(360deg) rotate(0deg);
  }
}

@-webkit-keyframes rotateDiscoBallMiddle {
  0% {
    -webkit-transform: rotateX(90deg) rotateY(0deg) rotate(0deg);
  }

  100% {
    -webkit-transform: rotateX(90deg) rotateY(-360deg) rotate(0deg);
  }
}

@keyframes rotateDiscoBallMiddle {
  0% {
    transform: rotateX(90deg) rotateY(0deg) rotate(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateY(-360deg) rotate(0deg);
  }
}

@-webkit-keyframes reflect {
  0% {
    -webkit-filter: brightness(60%);
  }

  50% {
    -webkit-filter: brightness(120%);
  }

  100% {
    -webkit-filter: brightness(90%);
  }
}

@keyframes reflect {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

:root {
  --disco-ball-width: 100px;
}

#discoBall {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: var(--disco-ball-width);
  height: var(--disco-ball-width);
  position: absolute;
  left: 50%;
  margin-left: calc(var(--disco-ball-width) / -2);
  -webkit-animation: rotateDiscoBall 18s linear infinite;
  animation: rotateDiscoBall 18s linear infinite;
}

.square {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 50px;
  left: calc(var(--disco-ball-width) / 2);
  position: absolute;
  transform: rotateX(90deg) rotateY(0deg) translateZ(0px);
}

#discoBallMiddle {
  height: 100%;
  border-radius: 100%;
  background-color: #111;
  position: absolute;
  -webkit-animation: rotateDiscoBallMiddle 18s linear infinite;
  animation: rotateDiscoBallMiddle 18s linear infinite;
}