body {
  font-size: 62.5%;
  font-style: Arial;
}

.animation-box {
  width: 640px;
  height: 120px;
  background-color: white;
  opacity: 70%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: -430px;
}

.animation-container {
  width: 1000rem;
  height: 30rem;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bottomFadeOut {
  0% {
    position: absolute;
    bottom: -5rem;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
  
}

@keyframes topFadeOutVertical {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rightFadeInOut {
  0% {
    position: absolute;
    right: -3rem;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    right: 10rem;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

.text1 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 0s;
  animation-duration: 12s;
}

.text2 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 10s;
  animation-duration: 12s;
}

.text3 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 20s;
  animation-duration: 12s;
}

.text4 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 30s;
  animation-duration: 12s;
}

.text5 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 40s;
  animation-duration: 12s;
}


.text6 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 50s;
  animation-duration: 12s;
}

.text7 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 60s;
  animation-duration: 12s;
}

.text8 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 70s;
  animation-duration: 12s;
}

.text9 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 80s;
  animation-duration: 12s;
}

.text10 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 90s;
  animation-duration: 12s;
}

.text11 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 100s;
  animation-duration: 12s;
}

.text12 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 110s;
  animation-duration: 12s;
}

.text13 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 120s;
  animation-duration: 12s;
}

.text14 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 130s;
  animation-duration: 12s;
}

.text15 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 140s;
  animation-duration: 12s;
}

.text16 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 150s;
  animation-duration: 12s;
}

.text17 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 160s;
  animation-duration: 12s;
}

.text18 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 170s;
  animation-duration: 12s;
}

.text19 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 180s;
  animation-duration: 12s;
}

.text20 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 190s;
  animation-duration: 12s;
}

.text21 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 200s;
  animation-duration: 12s;
}

.text22 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 210s;
  animation-duration: 12s;
}

.text23 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 220s;
  animation-duration: 12s;
}

.text24 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 230s;
  animation-duration: 12s;
}

.text25 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 240s;
  animation-duration: 12s;
}

.text26 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 250s;
  animation-duration: 12s;
}

.text27 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 260s;
  animation-duration: 12s;
}

.text28 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 270s;
  animation-duration: 12s;
}

.text29 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 280s;
  animation-duration: 12s;
}

.text30 {
  font-size: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  color: #000000;
  animation-name: fadeInOut;
  animation-delay: 290s;
  animation-duration: 12s;
}