.background {
    width: 100vw;
    height: 100vh;
    position: fixed;
  }
  .background span {
    width: 10vmin;
    height: 10vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-duration: 46s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .background span:nth-child(1) {
    color: #eefcc9;
    top: 4%;
    left: 8%;
    animation-duration: 12.3s;
    animation-delay: -3.4s;
    transform-origin: 23vw -12vh;
    box-shadow: -40vmin 0 2.8704240643vmin currentColor;
  }
  .background span:nth-child(2) {
    color: #edefe4;
    top: 3%;
    left: 7%;
    animation-duration: 18.2s;
    animation-delay: -8.1s;
    transform-origin: 2vw -1vh;
    box-shadow: -40vmin 0 1.7817434308vmin currentColor;
  }
  .background span:nth-child(3) {
    color: #edefe4;
    top: 4%;
    left: 54%;
    animation-duration: 38.4s;
    animation-delay: -17.5s;
    transform-origin: 17vw 0;
    box-shadow: -40vmin 0 1.3919550447vmin currentColor;
  }
  .background span:nth-child(4) {
    color: #e5e7df;
    top: 2%;
    left: 87%;
    animation-duration: 38.7s;
    animation-delay: -4.9s;
    transform-origin: 3vw 3vh;
    box-shadow: -40vmin 0 1.6705375521vmin currentColor;
  }
  .background span:nth-child(5) {
    color: #e5e7df;
    top: 1%;
    left: 97%;
    animation-duration: 11.8s;
    animation-delay: -19.6s;
    transform-origin: 11vw -23vh;
    box-shadow: -40vmin 0 1.4488750801vmin currentColor;
  }
  .background span:nth-child(6) {
    color: #e5e7df;
    top: 2%;
    left: 51%;
    animation-duration: 11.5s;
    animation-delay: -8.1s;
    transform-origin: 4vw -6vh;
    box-shadow: 40vmin 0 2.8722765727vmin currentColor;
  }
  .background span:nth-child(7) {
    color: #fff;
    top: 1%;
    left: 46%;
    animation-duration: 37.3s;
    animation-delay: -14.9s;
    transform-origin: -12vw 23vh;
    box-shadow: -40vmin 0 1.6173750205vmin currentColor;
  }
  .background span:nth-child(8) {
    color: #fff;
    top: 1%;
    left: 23%;
    animation-duration: 23.1s;
    animation-delay: -33.3s;
    transform-origin: -11vw 10vh;
    box-shadow: 40vmin 0 2.2409142154vmin currentColor;
  }
  .background span:nth-child(9) {
    color: #fff;
    top: 1%;
    left: 5%;
    animation-duration: 35.8s;
    animation-delay: -16.1s;
    transform-origin: -8vw 8vh;
    box-shadow: -40vmin 0 1.1240160401vmin currentColor;
  }
  .background span:nth-child(10) {
    color: #e5e7df;
    top: 2%;
    left: 36%;
    animation-duration: 14.6s;
    animation-delay: -41.9s;
    transform-origin: 10vw 8vh;
    box-shadow: 40vmin 0 2.4268914918vmin currentColor;
  }
  .background span:nth-child(11) {
    color: #edefe4;
    top: 2%;
    left: 100%;
    animation-duration: 43.5s;
    animation-delay: -38.2s;
    transform-origin: -20vw 21vh;
    box-shadow: -40vmin 0 1.4076449328vmin currentColor;
  }
  .background span:nth-child(12) {
    color: #fff;
    top: 2%;
    left: 10%;
    animation-duration: 27.4s;
    animation-delay: -34.1s;
    transform-origin: -16vw 23vh;
    box-shadow: 40vmin 0 1.1470121825vmin currentColor;
  }
  .background span:nth-child(13) {
    color: #fff;
    top: 5%;
    left: 61%;
    animation-duration: 35.7s;
    animation-delay: -38s;
    transform-origin: -11vw 15vh;
    box-shadow: -40vmin 0 1.243986506vmin currentColor;
  }
  .background span:nth-child(14) {
    color: #fff;
    top: 5%;
    left: 30%;
    animation-duration: 26.5s;
    animation-delay: -5.4s;
    transform-origin: 15vw -7vh;
    box-shadow: 40vmin 0 2.1066980633vmin currentColor;
  }
  .background span:nth-child(15) {
    color: #edefe4;
    top: 1%;
    left: 86%;
    animation-duration: 18.9s;
    animation-delay: -0.3s;
    transform-origin: 10vw 24vh;
    box-shadow: 40vmin 0 1.8346147976vmin currentColor;
  }
  .background span:nth-child(16) {
    color: #e5e7df;
    top: 2%;
    left: 34%;
    animation-duration: 32.4s;
    animation-delay: -24.8s;
    transform-origin: 17vw -20vh;
    box-shadow: -40vmin 0 2.5721156484vmin currentColor;
  }
  .background span:nth-child(17) {
    color: #fff;
    top: 1%;
    left: 59%;
    animation-duration: 35.2s;
    animation-delay: -5.6s;
    transform-origin: -8vw 4vh;
    box-shadow: 40vmin 0 2.871672912vmin currentColor;
  }
  .background span:nth-child(18) {
    color: #edefe4;
    top: 3%;
    left: 23%;
    animation-duration: 25.7s;
    animation-delay: -7.8s;
    transform-origin: 17vw 5vh;
    box-shadow: -40vmin 0 2.6477316857vmin currentColor;
  }
  .background span:nth-child(19) {
    color: #e5e7df;
    top: 5%;
    left: 22%;
    animation-duration: 43.2s;
    animation-delay: -11s;
    transform-origin: 23vw 17vh;
    box-shadow: -40vmin 0 1.9902137178vmin currentColor;
  }
  .background span:nth-child(20) {
    color: #fff;
    top: 1%;
    left: 3%;
    animation-duration: 31.3s;
    animation-delay: -5.1s;
    transform-origin: -4vw -24vh;
    box-shadow: -40vmin 0 1.2403107816vmin currentColor;
  }
  @keyframes move {
    100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
    }
  }