@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #fbfdfe;
  overflow: hidden;
  z-index: -999;
}

.background span {
  width: 48vmin;
  height: 48vmin;
  border-radius: 48vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 21;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: #e1f0f8;
  top: 27%;
  left: 13%;
  animation-duration: 294s;
  animation-delay: -151s;
  transform-origin: 24vw 23vh;
  box-shadow: -96vmin 0 12.980467742385613vmin currentColor;
}

.background span:nth-child(1) {
  color: #e1f0f8;
  top: 74%;
  left: 87%;
  animation-duration: 281s;
  animation-delay: -228s;
  transform-origin: -13vw 6vh;
  box-shadow: 96vmin 0 12.701618598235715vmin currentColor;
}

.background span:nth-child(2) {
  color: #e4efed;
  top: 77%;
  left: 60%;
  animation-duration: 254s;
  animation-delay: -77s;
  transform-origin: 18vw 18vh;
  box-shadow: -96vmin 0 12.89139486121872vmin currentColor;
}

.background span:nth-child(3) {
  color: #fff0d9;
  top: 16%;
  left: 18%;
  animation-duration: 281s;
  animation-delay: -247s;
  transform-origin: 16vw -7vh;
  box-shadow: 96vmin 0 12.786703057138093vmin currentColor;
}

.background span:nth-child(4) {
  color: #e1f0f8;
  top: 65%;
  left: 2%;
  animation-duration: 282s;
  animation-delay: -205s;
  transform-origin: -15vw 6vh;
  box-shadow: -96vmin 0 12.766056076884002vmin currentColor;
}

.background span:nth-child(5) {
  color: #e4efed;
  top: 19%;
  left: 51%;
  animation-duration: 6s;
  animation-delay: -82s;
  transform-origin: 0vw -23vh;
  box-shadow: -96vmin 0 12.405151990985322vmin currentColor;
}

.background span:nth-child(6) {
  color: #e1f0f8;
  top: 68%;
  left: 33%;
  animation-duration: 89s;
  animation-delay: -86s;
  transform-origin: 1vw -12vh;
  box-shadow: 96vmin 0 12.542804213453685vmin currentColor;
}

.background span:nth-child(7) {
  color: #e1f0f8;
  top: 22%;
  left: 46%;
  animation-duration: 285s;
  animation-delay: -19s;
  transform-origin: 3vw 2vh;
  box-shadow: 96vmin 0 12.475452465740128vmin currentColor;
}

.background span:nth-child(8) {
  color: #e4efed;
  top: 28%;
  left: 96%;
  animation-duration: 49s;
  animation-delay: -276s;
  transform-origin: -9vw 17vh;
  box-shadow: -96vmin 0 12.532544825898977vmin currentColor;
}

.background span:nth-child(9) {
  color: #fff0d9;
  top: 98%;
  left: 6%;
  animation-duration: 44s;
  animation-delay: -98s;
  transform-origin: -23vw -19vh;
  box-shadow: -96vmin 0 12.44000589951259vmin currentColor;
}

.background span:nth-child(10) {
  color: #e1f0f8;
  top: 25%;
  left: 47%;
  animation-duration: 216s;
  animation-delay: -174s;
  transform-origin: -17vw 3vh;
  box-shadow: 96vmin 0 12.426254643700375vmin currentColor;
}

.background span:nth-child(11) {
  color: #e1f0f8;
  top: 94%;
  left: 92%;
  animation-duration: 215s;
  animation-delay: -25s;
  transform-origin: -1vw 24vh;
  box-shadow: -96vmin 0 12.291714978892927vmin currentColor;
}

.background span:nth-child(12) {
  color: #e1f0f8;
  top: 62%;
  left: 92%;
  animation-duration: 242s;
  animation-delay: -183s;
  transform-origin: 9vw -21vh;
  box-shadow: 96vmin 0 12.90540235502965vmin currentColor;
}

.background span:nth-child(13) {
  color: #e4efed;
  top: 74%;
  left: 35%;
  animation-duration: 168s;
  animation-delay: -54s;
  transform-origin: -6vw 19vh;
  box-shadow: 96vmin 0 12.445582967685143vmin currentColor;
}

.background span:nth-child(14) {
  color: #fff0d9;
  top: 98%;
  left: 87%;
  animation-duration: 8s;
  animation-delay: -113s;
  transform-origin: 6vw 20vh;
  box-shadow: 96vmin 0 12.811585606209524vmin currentColor;
}

.background span:nth-child(15) {
  color: #e1f0f8;
  top: 75%;
  left: 87%;
  animation-duration: 115s;
  animation-delay: -79s;
  transform-origin: 2vw 18vh;
  box-shadow: 96vmin 0 12.054941121776466vmin currentColor;
}

.background span:nth-child(16) {
  color: #e1f0f8;
  top: 64%;
  left: 4%;
  animation-duration: 90s;
  animation-delay: -176s;
  transform-origin: -10vw 20vh;
  box-shadow: -96vmin 0 12.846778356432356vmin currentColor;
}

.background span:nth-child(17) {
  color: #e4efed;
  top: 19%;
  left: 88%;
  animation-duration: 127s;
  animation-delay: -212s;
  transform-origin: 9vw 1vh;
  box-shadow: -96vmin 0 12.269563320678856vmin currentColor;
}

.background span:nth-child(18) {
  color: #fff0d9;
  top: 55%;
  left: 79%;
  animation-duration: 158s;
  animation-delay: -127s;
  transform-origin: -20vw 15vh;
  box-shadow: -96vmin 0 12.36446278491323vmin currentColor;
}

.background span:nth-child(19) {
  color: #e4efed;
  top: 100%;
  left: 98%;
  animation-duration: 255s;
  animation-delay: -95s;
  transform-origin: -11vw 1vh;
  box-shadow: 96vmin 0 12.183079894272815vmin currentColor;
}

.background span:nth-child(20) {
  color: #e1f0f8;
  top: 45%;
  left: 21%;
  animation-duration: 25s;
  animation-delay: -89s;
  transform-origin: -3vw -8vh;
  box-shadow: 96vmin 0 12.846136387343522vmin currentColor;
}

.background span:nth-child(21) {
  color: #fff0d9;
  top: 33%;
  left: 75%;
  animation-duration: 250s;
  animation-delay: -85s;
  transform-origin: -20vw -15vh;
  box-shadow: -96vmin 0 12.296080588780137vmin currentColor;
}

.background span:nth-child(22) {
  color: #fff0d9;
  top: 22%;
  left: 39%;
  animation-duration: 294s;
  animation-delay: -23s;
  transform-origin: 22vw -15vh;
  box-shadow: 96vmin 0 12.326056505773487vmin currentColor;
}

.background span:nth-child(23) {
  color: #e1f0f8;
  top: 19%;
  left: 60%;
  animation-duration: 259s;
  animation-delay: -266s;
  transform-origin: -1vw 3vh;
  box-shadow: 96vmin 0 12.68419814672379vmin currentColor;
}

.background span:nth-child(24) {
  color: #e4efed;
  top: 8%;
  left: 12%;
  animation-duration: 242s;
  animation-delay: -6s;
  transform-origin: 10vw 6vh;
  box-shadow: 96vmin 0 12.684425265153985vmin currentColor;
}

.background span:nth-child(25) {
  color: #e4efed;
  top: 47%;
  left: 86%;
  animation-duration: 278s;
  animation-delay: -102s;
  transform-origin: -13vw 8vh;
  box-shadow: -96vmin 0 12.767332544778496vmin currentColor;
}

.background span:nth-child(26) {
  color: #fff0d9;
  top: 18%;
  left: 53%;
  animation-duration: 284s;
  animation-delay: -160s;
  transform-origin: -23vw 22vh;
  box-shadow: -96vmin 0 12.771305398669025vmin currentColor;
}

.background span:nth-child(27) {
  color: #e4efed;
  top: 41%;
  left: 73%;
  animation-duration: 8s;
  animation-delay: -2s;
  transform-origin: 7vw -1vh;
  box-shadow: -96vmin 0 12.926862767348126vmin currentColor;
}

.background span:nth-child(28) {
  color: #e4efed;
  top: 83%;
  left: 92%;
  animation-duration: 89s;
  animation-delay: -31s;
  transform-origin: -21vw -15vh;
  box-shadow: 96vmin 0 12.036451837856081vmin currentColor;
}

.background span:nth-child(29) {
  color: #e1f0f8;
  top: 34%;
  left: 85%;
  animation-duration: 10s;
  animation-delay: -287s;
  transform-origin: -7vw -13vh;
  box-shadow: -96vmin 0 12.988861868986294vmin currentColor;
}

.background span:nth-child(30) {
  color: #e1f0f8;
  top: 23%;
  left: 5%;
  animation-duration: 249s;
  animation-delay: -242s;
  transform-origin: 0vw -3vh;
  box-shadow: 96vmin 0 12.786892223526696vmin currentColor;
}

.background span:nth-child(31) {
  color: #e1f0f8;
  top: 94%;
  left: 4%;
  animation-duration: 230s;
  animation-delay: -96s;
  transform-origin: 11vw 9vh;
  box-shadow: 96vmin 0 12.710484964233064vmin currentColor;
}

.background span:nth-child(32) {
  color: #e1f0f8;
  top: 94%;
  left: 13%;
  animation-duration: 125s;
  animation-delay: -47s;
  transform-origin: 15vw -12vh;
  box-shadow: 96vmin 0 12.367874823888254vmin currentColor;
}

.background span:nth-child(33) {
  color: #e1f0f8;
  top: 34%;
  left: 30%;
  animation-duration: 155s;
  animation-delay: -208s;
  transform-origin: -7vw 18vh;
  box-shadow: -96vmin 0 12.290045743853478vmin currentColor;
}

.background span:nth-child(34) {
  color: #e1f0f8;
  top: 28%;
  left: 9%;
  animation-duration: 219s;
  animation-delay: -226s;
  transform-origin: -1vw 0vh;
  box-shadow: 96vmin 0 12.396641145085814vmin currentColor;
}

.background span:nth-child(35) {
  color: #e4efed;
  top: 91%;
  left: 86%;
  animation-duration: 156s;
  animation-delay: -59s;
  transform-origin: -15vw -20vh;
  box-shadow: 96vmin 0 12.203788088438484vmin currentColor;
}

.background span:nth-child(36) {
  color: #e1f0f8;
  top: 86%;
  left: 58%;
  animation-duration: 73s;
  animation-delay: -47s;
  transform-origin: -1vw -13vh;
  box-shadow: 96vmin 0 12.067692929717564vmin currentColor;
}

.background span:nth-child(37) {
  color: #e4efed;
  top: 6%;
  left: 48%;
  animation-duration: 211s;
  animation-delay: -17s;
  transform-origin: -21vw -2vh;
  box-shadow: -96vmin 0 12.880653784441245vmin currentColor;
}

.background span:nth-child(38) {
  color: #e4efed;
  top: 77%;
  left: 44%;
  animation-duration: 17s;
  animation-delay: -275s;
  transform-origin: -12vw -7vh;
  box-shadow: -96vmin 0 12.721052900093726vmin currentColor;
}

