@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

@keyframes animate2 {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(-720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

#grad1 {
  height: 200px;
  background-color: red;
  /* For browsers that do not support gradients */
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: #e8e7e7;
  /* background-image: linear-gradient(to top, #f5f5f5, #fffcf9); */
  overflow: hidden;
}

.background li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  /* background: rgba(15, 119, 255, 0.4); */
  background: #109ce7;
  animation: animate 55s linear infinite;
}

.background li:nth-child(0) {
  left: 58%;
  width: 281px;
  height: 281px;
  bottom: -281px;
  animation-delay: 32s;
}

.background li:nth-child(1) {
  left: 85%;
  width: 50px;
  height: 50px;
  bottom: -50px;
  animation-delay: 40s;
}

.background li:nth-child(2) {
  left: 14%;
  width: 162px;
  height: 162px;
  bottom: -162px;
  animation-delay: 3s;
}

.background li:nth-child(3) {
  left: 71%;
  width: 218px;
  height: 218px;
  bottom: -218px;
  animation-delay: 12s;
}

.background li:nth-child(4) {
  left: 58%;
  width: 278px;
  height: 278px;
  bottom: -278px;
  animation-delay: 1s;
}

.background li:nth-child(5) {
  left: 64%;
  width: 27px;
  height: 27px;
  bottom: -27px;
  animation-delay: 7s;
  animation: animate2 55s linear infinite;
}

.background li:nth-child(6) {
  left: 56%;
  width: 46px;
  height: 46px;
  bottom: -46px;
  animation-delay: 12s;
}

.background li:nth-child(7) {
  left: 50%;
  width: 20px;
  height: 20px;
  bottom: -20px;
  animation-delay: 25s;
}

.background li:nth-child(8) {
  left: 45%;
  width: 135px;
  height: 135px;
  bottom: -135px;
  animation-delay: 40s;
  animation: animate2 55s linear infinite;
}

.background li:nth-child(9) {
  left: 72%;
  width: 159px;
  height: 159px;
  bottom: -159px;
  animation-delay: 23s;
}

.background li:nth-child(10) {
  left: 20%;
  width: 59px;
  height: 59px;
  bottom: -59px;
  animation-delay: 30s;
}

.background li:nth-child(8) {
  left: 5%;
  width: 35px;
  height: 35px;
  bottom: -35px;
  animation-delay: 17s;
  animation: animate2 55s linear infinite;
}