@font-face {
  font-family: Nona;
  src: url(Nona.ttf);
}
body, html{
background: none !important;
margin: 0;
overflow: hidden;
}
*{background: none !important;}
h1{
font-family:Nona;
font-size:90px;
background: none !important;
}
h2{
font-size:60px;
background: none !important;
}
.bgnone{
text-align:center;
z-index:999999;
}

.background {
  width: 100vw;
  height: 100vh;
overflow: hidden;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #E45A84;
  top: 97%;
  left: 48%;
  animation-duration: 12.7s;
  animation-delay: -4.9s;
  transform-origin: -11vw -20vh;
  box-shadow: -40vmin 0 8.158057937vmin currentColor;
}
.background span:nth-child(2) {
  color: #583C87;
  top: 19%;
  left: 98%;
  animation-duration: 10.8s;
  animation-delay: -6.8s;
  transform-origin: -8vw 21vh;
  box-shadow: -40vmin 0 5.39672579vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 53%;
  left: 8%;
  animation-duration: 12.2s;
  animation-delay: -6.2s;
  transform-origin: 3vw -3vh;
  box-shadow: -40vmin 0 5.4732500535vmin currentColor;
}
.background span:nth-child(4) {
  color: #583C87;
  top: 42%;
  left: 83%;
  animation-duration: 14.9s;
  animation-delay: -12.4s;
  transform-origin: -14vw -4vh;
  box-shadow: -40vmin 0 5.6410590434vmin currentColor;
}
.background span:nth-child(5) {
  color: #E45A84;
  top: 52%;
  left: 21%;
  animation-duration: 11s;
  animation-delay: -12.1s;
  transform-origin: -9vw -16vh;
  box-shadow: -40vmin 0 10.750887339vmin currentColor;
}
.background span:nth-child(6) {
  color: #583C87;
  top: 20%;
  left: 2%;
  animation-duration: 15.8s;
  animation-delay: -6.1s;
  transform-origin: 1vw 6vh;
  box-shadow: -40vmin 0 13.1092212488vmin currentColor;
}
.background span:nth-child(7) {
  color: #FFACAC;
  top: 42%;
  left: 92%;
  animation-duration: 12.7s;
  animation-delay: -12.2s;
  transform-origin: 25vw -16vh;
  box-shadow: 40vmin 0 7.6651448769vmin currentColor;
}
.background span:nth-child(8) {
  color: #FFACAC;
  top: 61%;
  left: 68%;
  animation-duration: 12.1s;
  animation-delay: -6.3s;
  transform-origin: -2vw 3vh;
  box-shadow: -40vmin 0 6.4899466638vmin currentColor;
}
.background span:nth-child(9) {
  color: #E45A84;
  top: 95%;
  left: 13%;
  animation-duration: 13s;
  animation-delay: -8s;
  transform-origin: -13vw -15vh;
  box-shadow: 40vmin 0 13.309008921vmin currentColor;
}
.background span:nth-child(10) {
  color: #E45A84;
  top: 91%;
  left: 69%;
  animation-duration: 10.6s;
  animation-delay: -13.9s;
  transform-origin: 21vw -18vh;
  box-shadow: 40vmin 0 11.6165190178vmin currentColor;
}
.background span:nth-child(11) {
  color: #E45A84;
  top: 88%;
  left: 42%;
  animation-duration: 12.8s;
  animation-delay: -13.8s;
  transform-origin: -23vw -8vh;
  box-shadow: 40vmin 0 12.2858523526vmin currentColor;
}
.background span:nth-child(12) {
  color: #583C87;
  top: 82%;
  left: 73%;
  animation-duration: 15.3s;
  animation-delay: -3.5s;
  transform-origin: -10vw 14vh;
  box-shadow: -40vmin 0 12.7806488233vmin currentColor;
}
.background span:nth-child(13) {
  color: #583C87;
  top: 70%;
  left: 77%;
  animation-duration: 10.1s;
  animation-delay: -15.1s;
  transform-origin: 7vw -21vh;
  box-shadow: 40vmin 0 8.1838414163vmin currentColor;
}
.background span:nth-child(14) {
  color: #E45A84;
  top: 24%;
  left: 37%;
  animation-duration: 11s;
  animation-delay: -1.2s;
  transform-origin: -7vw -2vh;
  box-shadow: 40vmin 0 11.0651787538vmin currentColor;
}
.background span:nth-child(15) {
  color: #583C87;
  top: 65%;
  left: 66%;
  animation-duration: 14.9s;
  animation-delay: -12.3s;
  transform-origin: 5vw 25vh;
  box-shadow: -40vmin 0 12.0784173814vmin currentColor;
}
.background span:nth-child(16) {
  color: #FFACAC;
  top: 14%;
  left: 15%;
  animation-duration: 14.9s;
  animation-delay: -15.1s;
  transform-origin: -16vw -9vh;
  box-shadow: -40vmin 0 11.0019563215vmin currentColor;
}
.background span:nth-child(17) {
  color: #583C87;
  top: 67%;
  left: 32%;
  animation-duration: 12.6s;
  animation-delay: -1.5s;
  transform-origin: 8vw 14vh;
  box-shadow: -40vmin 0 9.4262863661vmin currentColor;
}
.background span:nth-child(18) {
  color: #E45A84;
  top: 16%;
  left: 57%;
  animation-duration: 12.6s;
  animation-delay: -5.1s;
  transform-origin: 0vw 17vh;
  box-shadow: -40vmin 0 10.7992294248vmin currentColor;
}
.background span:nth-child(19) {
  color: #583C87;
  top: 23%;
  left: 3%;
  animation-duration: 15.9s;
  animation-delay: -5.2s;
  transform-origin: 19vw 3vh;
  box-shadow: 40vmin 0 13.3612081121vmin currentColor;
}
.background span:nth-child(20) {
  color: #FFACAC;
  top: 60%;
  left: 95%;
  animation-duration: 12.1s;
  animation-delay: -12.9s;
  transform-origin: 5vw -13vh;
  box-shadow: -40vmin 0 12.1806253393vmin currentColor;
}

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