:root {
  --size: 250px;
  --display-disco-ball: 0;

  --monke-1-start-x: 0;
  --monke-1-start-y: 0;
  --monke-1-end-x: 50vw;
  --monke-1-end-y: 80vh;

  /* Monke 2 */
  --monke-2-start-x: 20vw;
  --monke-2-start-y: 50vh;
  --monke-2-end-x: 80vw;
  --monke-2-end-y: 10vh;

  /* Monke 3 */
  --monke-3-start-x: 10vw;
  --monke-3-start-y: 20vh;
  --monke-3-end-x: 90vw;
  --monke-3-end-y: 30vh;

  /* Monke 4 */
  --monke-4-start-x: 30vw;
  --monke-4-start-y: 40vh;
  --monke-4-end-x: 60vw;
  --monke-4-end-y: 80vh;

  /* Monke 5 */
  --monke-5-start-x: 40vw;
  --monke-5-start-y: 60vh;
  --monke-5-end-x: 70vw;
  --monke-5-end-y: 20vh;

  /* Monke 6 */
  --monke-6-start-x: 50vw;
  --monke-6-start-y: 30vh;
  --monke-6-end-x: 20vw;
  --monke-6-end-y: 70vh;

  /* Monke 7 */
  --monke-7-start-x: 60vw;
  --monke-7-start-y: 70vh;
  --monke-7-end-x: 30vw;
  --monke-7-end-y: 40vh;

  /* Monke 8 */
  --monke-8-start-x: 70vw;
  --monke-8-start-y: 80vh;
  --monke-8-end-x: 40vw;
  --monke-8-end-y: 50vh;

  /* Monke 9 */
  --monke-9-start-x: 80vw;
  --monke-9-start-y: 10vh;
  --monke-9-end-x: 50vw;
  --monke-9-end-y: 60vh;

  /* Monke 10 */
  --monke-10-start-x: 90vw;
  --monke-10-start-y: 20vh;
  --monke-10-end-x: 60vw;
  --monke-10-end-y: 70vh;
}

.image,
.image-wrapper {
  width: var(--size);
  height: var(--size);
}

.image {
  position: absolute;
  opacity: 0;
  z-index: 3;
    pointer-events: none;
}

@keyframes moveX1 {
  from {
    left: var(--monke-1-start-x);
  }

  to {
    left: var(--monke-1-end-x);
  }
}

@keyframes moveY1 {
  from {
    top: var(--monke-1-start-y);
  }

  to {
    top: var(--monke-1-end-y);
  }
}

#monke1 {
  top: var(--monke-1-start-y);
  left: var(--monke-1-start-x);

  animation:
    moveX1 3.05s linear 0s infinite alternate,
    moveY1 3.4s linear 0s infinite alternate;
}

@keyframes moveX2 {
  from {
    left: var(--monke-2-start-x);
  }

  to {
    left: var(--monke-2-end-x);
  }
}

@keyframes moveY2 {
  from {
    top: var(--monke-2-start-y);
  }

  to {
    top: var(--monke-2-end-y);
  }
}

#monke2 {
  top: var(--monke-2-start-y);
  left: var(--monke-2-start-x);

  animation:
    moveX2 2.05s linear 0s infinite alternate,
    moveY2 2.2s linear 0s infinite alternate;
}

@keyframes moveX3 {
  from {
    left: var(--monke-3-start-x);
  }

  to {
    left: var(--monke-3-end-x);
  }
}

@keyframes moveY3 {
  from {
    top: var(--monke-3-start-y);
  }

  to {
    top: var(--monke-3-end-y);
  }
}

#monke3 {
  top: var(--monke-3-start-y);
  left: var(--monke-3-start-x);

  animation:
    moveX3 3.65s linear 0s infinite alternate,
    moveY3 2s linear 0s infinite alternate;
}

@keyframes moveX4 {
  from {
    left: var(--monke-4-start-x);
  }

  to {
    left: var(--monke-4-end-x);
  }
}

@keyframes moveY4 {
  from {
    top: var(--monke-4-start-y);
  }

  to {
    top: var(--monke-4-end-y);
  }
}

#monke4 {
  top: var(--monke-4-start-y);
  left: var(--monke-4-start-x);

  animation:
    moveX4 1.05s linear 0s infinite alternate,
    moveY4 3.4s linear 0s infinite alternate;
}

@keyframes moveX5 {
  from {
    left: var(--monke-5-start-x);
  }

  to {
    left: var(--monke-5-end-x);
  }
}

@keyframes moveY5 {
  from {
    top: var(--monke-5-start-y);
  }

  to {
    top: var(--monke-5-end-y);
  }
}

#monke5 {
  top: var(--monke-5-start-y);
  left: var(--monke-5-start-x);

  animation:
    moveX5 4.05s linear 0s infinite alternate,
    moveY5 4.4s linear 0s infinite alternate;
}

@keyframes moveX6 {
  from {
    left: var(--monke-6-start-x);
  }

  to {
    left: var(--monke-6-end-x);
  }
}

@keyframes moveY6 {
  from {
    top: var(--monke-6-start-y);
  }

  to {
    top: var(--monke-6-end-y);
  }
}

#monke6 {
  top: var(--monke-6-start-y);
  left: var(--monke-6-start-x);

  animation:
    moveX6 3.45s linear 0s infinite alternate,
    moveY6 2.8s linear 0s infinite alternate;
}

@keyframes moveX7 {
  from {
    left: var(--monke-7-start-x);
  }

  to {
    left: var(--monke-7-end-x);
  }
}

@keyframes moveY7 {
  from {
    top: var(--monke-7-start-y);
  }

  to {
    top: var(--monke-7-end-y);
  }
}

#monke7 {
  top: var(--monke-7-start-y);
  left: var(--monke-7-start-x);

  animation:
    moveX7 1.05s linear 0s infinite alternate,
    moveY7 1.4s linear 0s infinite alternate;
}

#disco-ball-wrapper {
  position: relative;
  width: calc(2 * var(--size));
  height: calc(2 * var(--size));

  display: block;
  transition: 2s ease-in-out;
}

#disco-ball-cover {
  position: absolute;

  z-index: 3;
  transition: .15s ease;
  background-color: var(--bg-color);

  width: calc(2 * var(--size));
  height: calc(2 * var(--size));
}

#discoBallLight {
  display: none;
}

#discoBall {
  display: none;
}

#content:hover > #disco-ball-wrapper > #disco-ball-cover {
  height: 0;
  transition: 1.5s ease-in-out;
}

#content:hover > #disco-ball-wrapper > #discoBallLight {
  display: block;

  transition: 1s ease-in-out;
}

#content:hover > #disco-ball-wrapper > #discoBall {
  display: block;

  transition: 1s ease-in-out;
}

#content:hover > .image {
  opacity: 1;
  transition: 1s ease-in-out;
}


@-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;
  }
}

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

#discoBallLight {
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: calc(var(--size) / 2);
  left: 50%;
  margin-left: calc(-1 * var(--size) / 2);
  border-radius: 100%;
  background-color: white;
  opacity: 0.2;
}

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

#discoBallMiddle {
  height: 100%;
  border-radius: 100%;
  background-color: #111;
  position: absolute;
  background: linear-gradient(top, #111, #333);
  animation: rotateDiscoBallMiddle 18s linear infinite;
}

#content > h2 {
  margin-bottom: 10%;
}