body{
  background-color: #000;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.circles li {
  left: 70%;
  position: absolute;
  display: block;
  list-style: none;
  width: 85px;
  height: 85px;
  background-image: linear-gradient(225deg, #4686be 0%, #0051ca 50%, #3C3C3C 100%);
  animation: animate 23s linear infinite;
  top: -120px; /* Alteração aqui para iniciar fora do topo */
  border-radius: 15px;
}

.circles li:nth-child(1){
  left: 0%;
  width: 80px;
  height: 80px;
  animation-delay: 3s;
}

.circles li:nth-child(2){
  left: 10%;
  width: 130px;
  height: 130px;
  animation-delay: 6s;
  animation-duration: 18s;
}

.circles li:nth-child(3){
  left: 74%;
  width: 90px;
  height: 90px;
  animation-delay: 1s;
}

.circles li:nth-child(4){
  left: 30%;
  width: 120px;
  height: 120px;
  animation-delay: 10s;
  animation-duration: 26s;
}

.circles li:nth-child(5){
  left: 45%;
  width: 95px;
  height: 95px;
  animation-delay: 12s;
}

.circles li:nth-child(6){
  left: 85%;
  width: 110px;
  height: 110px;
  animation-delay: 5s;
}

.circles li:nth-child(7){
  left: 95%;
  width: 130px;
  height: 130px;
  animation-delay: 7s;
}

.circles li:nth-child(8){
  left: 45%;
  width: 65px;
  height: 65px;
  animation-delay: 6s;
  animation-duration: 35s;
}

.circles li:nth-child(9){
  left: 20%;
  width: 90px;
  height: 90px;
  animation-delay: 3s;
  animation-duration: 28s;
}

.circles li:nth-child(10){
  left: 38%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 19s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg); /* Modificação aqui para iniciar com escala 0 */
    opacity: 1;
  }

  100% {
    transform: translateY(200vh) rotate(720deg); /* Modificação aqui para escalar para 1 */
    opacity: 0;
  }
}

@media (max-width:960px) {
  .content {
    height: auto;
    padding: 10px 0px;
    flex-direction: column-reverse;
  }
}