body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #add8e6; /* Pale Blue */
  background: -moz-linear-gradient(45deg, #add8e6 0%, #b0e0e6 100%);
  background: -webkit-linear-gradient(45deg, #add8e6 0%, #b0e0e6 100%);
  background: linear-gradient(45deg, #add8e6 0%, #b0e0e6 100%);
}

.cube {
  position: relative;
  width: 250px;
  height: 250px;
  box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.ants {
  fill: black;
  width: 15px;
  height: 25px;
  position: absolute;
}

#ant1 {
  left: 50%;
  bottom: -60%;
  animation: ant-1-animation 8s infinite;
}

#ant2 {
  left: 0;
  bottom: -50%;
  animation: ant-2-animation 9s infinite;
}

#ant3 {
  left: 100%;
  bottom: -70%;
  animation: ant-3-animation 12s infinite;
  animation-delay: 1s;
}

#ant4 {
  left: 0;
  bottom: -50%;
  animation: ant-2-animation 12s infinite;
  animation-delay: 3s;
}

@keyframes ant-1-animation {
  0% {
    left: 50%;
    bottom: -60%;
  }
  10% {
    left: 50%;
    bottom: 5%;
    transform: rotate(0deg);
  }
  12% {
    left: 50%;
    bottom: 5%;
    transform: rotate(-90deg);
  }
  18% {
    transform: rotate(-90deg);
  }
  20% {
    left: 5%;
    bottom: 5%;
    transform: rotate(-90deg);
  }
  22% {
    transform: rotate(0);
  }
  32% {
    transform: rotate(0);
  }
  38% {
    left: 5%;
    bottom: 87%;
    transform: rotate(90deg);
  }
  50% {
    left: 90%;
    bottom: 87%;
    transform: rotate(90deg);
  }
  55% {
    left: 90%;
    bottom: 87%;
    transform: rotate(230deg);
  }
  72% {
    left: 5%;
    bottom: 5%;
    transform: rotate(230deg);
  }
  78% {
    left: 5%;
    bottom: 5%;
    transform: rotate(90deg);
  }
  85% {
    left: 50%;
    bottom: 5%;
    transform: rotate(90deg);
  }
  90% {
    left: 50%;
    bottom: 5%;
    transform: rotate(180deg);
  }
  100% {
    left: 50%;
    bottom: -60%;
    transform: rotate(180deg);
  }
}

@keyframes ant-2-animation {
  0% {
    left: 0;
    bottom: -50%;
    transform: rotate(45deg);
  }
  15% {
    left: 50%;
    bottom: 5%;
    transform: rotate(45deg);
  }
  18% {
    left: 50%;
    bottom: 5%;
    transform: rotate(90deg);
  }
  28% {
    left: 85%;
    bottom: 5%;
    transform: rotate(90deg);
  }
  30% {
    left: 85%;
    bottom: 5%;
    transform: rotate(0deg);
  }
  40% {
    left: 85%;
    bottom: 85%;
    transform: rotate(0deg);
  }
  48% {
    left: 85%;
    bottom: 85%;
    transform: rotate(-90deg);
  }
  58% {
    left: 5%;
    bottom: 85%;
    transform: rotate(-90deg);
  }
  68% {
    left: 5%;
    bottom: 85%;
    transform: rotate(-180deg);
  }
  79% {
    left: 5%;
    bottom: 5%;
    transform: rotate(-180deg);
  }
  81% {
    left: 5%;
    bottom: 5%;
    transform: rotate(-270deg);
  }
  88% {
    left: 50%;
    bottom: 5%;
    transform: rotate(-270deg);
  }
  90% {
    left: 50%;
    bottom: 5%;
    transform: rotate(-140deg);
  }
  100% {
    left: 0%;
    bottom: -50%;
    transform: rotate(-140deg);
  }
}

@keyframes ant-3-animation {
  0% {
    left: 100%;
    bottom: -70%;
    transform: rotate(-45deg);
  }
  15% {
    left: 50%;
    bottom: -15%;
    transform: rotate(-45deg);
  }
  18% {
    left: 50%;
    bottom: -15%;
    transform: rotate(-90deg);
  }
  28% {
    left: -10%;
    bottom: -15%;
    transform: rotate(-90deg);
  }
  30% {
    left: -10%;
    bottom: -15%;
    transform: rotate(0deg);
  }
  45% {
    left: -10%;
    bottom: 105%;
    transform: rotate(0deg);
  }
  48% {
    left: -10%;
    bottom: 105%;
    transform: rotate(90deg);
  }
  58% {
    left: 105%;
    bottom: 105%;
    transform: rotate(90deg);
  }
  60% {
    left: 105%;
    bottom: 105%;
    transform: rotate(180deg);
  }
  75% {
    left: 105%;
    bottom: -15%;
    transform: rotate(180deg);
  }
  81% {
    left: 105%;
    bottom: -15%;
    transform: rotate(270deg);
  }
  88% {
    left: 50%;
    bottom: -15%;
    transform: rotate(270deg);
  }
  90% {
    left: 50%;
    bottom: -15%;
    transform: rotate(180deg);
  }
  92% {
    left: 50%;
    bottom: -15%;
    transform: rotate(130deg);
  }
  100% {
    left: 100%;
    bottom: -70%;
    transform: rotate(130deg);
  }
}