.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #7ae298;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #7ae298 0%, #9af282 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ae298', endColorstr='#9af282',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
 position: absolute;
    top: 0;
    z-index: 1;
        flex-direction: column;
            justify-content: center;
    align-items: center;
}

body{
    overflow:hidden;
}

.cube {
  position: relative;
  font-family: 'Oswald', sans-serif;
  width: 250px;
  height: 250px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

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



#zancudo {
  left: 50%;
  bottom: -60%;
  animation: ant-1-animation 8s infinite;
    width: 30px;
    height: 30px;
}

#animal2 {
  left: 0;
  bottom: -50%;
  animation: ant-2-animation 9s infinite;
  width: 30px;
    height: 30px;
}

#animal3 {
  left: 100%;
  bottom: -70%;
  animation: ant-3-animation 12s infinite;
  animation-delay: 1s;
  width: 25px;
    height: 25px;
}

#animal4 {
  left: 0;
  bottom: -50%;
  animation: ant-2-animation 12s infinite;
  animation-delay: 3s;
      width: 35px;
    height: 35px;
}



#animal5 {
 left: 100%;
  bottom: 100%;
  animation: ant-2-animation 8s infinite;
  animation-delay: 3s;
      width: 30px;
    height: 30px;
}

#animal6 {
  left: 0;
  bottom: -20%;
  animation: ant-1-animation 12s infinite;
  animation-delay: 3s;
      width: 40px;
    height: 40px;
}

#animal7 {
  left: 100%;
  bottom: -10%;
  animation: ant-3-animation 6s infinite;
  animation-delay: 3s;
      width: 30px;
    height: 30px;
}

#animal8 {
  left: 0;
  bottom: -40%;
  animation: ant-2-animation 10s infinite;
  animation-delay: 3s;
      width: 50px;
    height: 50px;
  
  
}

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