body {
    margin: 0;
    overflow: hidden;
    background: #1b0343;
  }
  .wrapper {
    transform: rotate(0deg);
    width: 100vw;
    height: 100vh;
  }
        
  .background {
    width: 100vw;
    height: 100vh;
  }
  
  .background span {
    position: absolute;
    z-index: 1;
    width: 20vmin;
    height: 20vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .background span:nth-child(1) {
    color: #FFACAC;
    top: 18%;
    left: 69%;
    animation-duration: 10.6s;
    animation-delay: -11.9s;
    transform-origin: -9vw -2vh;
    box-shadow: 40vmin 0 13.7721227021vmin currentColor;
  }
  .background span:nth-child(2) {
    color: #583C87;
    top: 54%;
    left: 94%;
    animation-duration: 10.2s;
    animation-delay: -5.5s;
    transform-origin: 4vw 12vh;
    box-shadow: -40vmin 0 14.1236845544vmin currentColor;
  }
  .background span:nth-child(3) {
    color: #E45A84;
    top: 86%;
    left: 1%;
    animation-duration: 11.9s;
    animation-delay: -2.9s;
    transform-origin: 9vw 0vh;
    box-shadow: -40vmin 0 12.1492438123vmin currentColor;
  }
  .background span:nth-child(4) {
    color: #FFACAC;
    top: 79%;
    left: 94%;
    animation-duration: 12.8s;
    animation-delay: -5.1s;
    transform-origin: 14vw 2vh;
    box-shadow: 40vmin 0 13.3980746189vmin currentColor;
  }
  .background span:nth-child(5) {
    color: #583C87;
    top: 72%;
    left: 12%;
    animation-duration: 11.8s;
    animation-delay: -14.5s;
    transform-origin: -12vw -19vh;
    box-shadow: 40vmin 0 5.4542605059vmin currentColor;
  }
  .background span:nth-child(6) {
    color: #583C87;
    top: 44%;
    left: 51%;
    animation-duration: 12s;
    animation-delay: -11s;
    transform-origin: 14vw 4vh;
    box-shadow: 40vmin 0 14.6342571136vmin currentColor;
  }
  .background span:nth-child(7) {
    color: #E45A84;
    top: 52%;
    left: 35%;
    animation-duration: 14.9s;
    animation-delay: -9.6s;
    transform-origin: 24vw 23vh;
    box-shadow: 40vmin 0 6.4530291357vmin currentColor;
  }
  .background span:nth-child(8) {
    color: #E45A84;
    top: 29%;
    left: 23%;
    animation-duration: 11.5s;
    animation-delay: -1.1s;
    transform-origin: -12vw 15vh;
    box-shadow: 40vmin 0 9.9725305661vmin currentColor;
  }
  .background span:nth-child(9) {
    color: #FFACAC;
    top: 93%;
    left: 48%;
    animation-duration: 15.7s;
    animation-delay: -6.2s;
    transform-origin: 15vw 8vh;
    box-shadow: -40vmin 0 11.0386418749vmin currentColor;
  }
  .background span:nth-child(10) {
    color: #E45A84;
    top: 73%;
    left: 65%;
    animation-duration: 13.3s;
    animation-delay: -2.2s;
    transform-origin: 20vw 16vh;
    box-shadow: -40vmin 0 13.8243863715vmin currentColor;
  }
  .background span:nth-child(11) {
    color: #FFACAC;
    top: 50%;
    left: 20%;
    animation-duration: 12s;
    animation-delay: -0.3s;
    transform-origin: 3vw -14vh;
    box-shadow: 40vmin 0 9.8879763647vmin currentColor;
  }
  .background span:nth-child(12) {
    color: #FFACAC;
    top: 65%;
    left: 95%;
    animation-duration: 15.2s;
    animation-delay: -13.6s;
    transform-origin: -18vw 6vh;
    box-shadow: 40vmin 0 9.8277613706vmin currentColor;
  }
  .background span:nth-child(13) {
    color: #FFACAC;
    top: 58%;
    left: 65%;
    animation-duration: 11.4s;
    animation-delay: -1.4s;
    transform-origin: 17vw -1vh;
    box-shadow: -40vmin 0 11.8180072349vmin currentColor;
  }
  .background span:nth-child(14) {
    color: #583C87;
    top: 1%;
    left: 27%;
    animation-duration: 10.2s;
    animation-delay: -2.9s;
    transform-origin: 11vw 10vh;
    box-shadow: 40vmin 0 12.4703915693vmin currentColor;
  }
  .background span:nth-child(15) {
    color: #FFACAC;
    top: 54%;
    left: 53%;
    animation-duration: 14.2s;
    animation-delay: -15s;
    transform-origin: 6vw 15vh;
    box-shadow: 40vmin 0 11.5981125219vmin currentColor;
  }
  .background span:nth-child(16) {
    color: #E45A84;
    top: 57%;
    left: 70%;
    animation-duration: 11.7s;
    animation-delay: -6s;
    transform-origin: 7vw -7vh;
    box-shadow: -40vmin 0 8.13213537vmin currentColor;
  }
  .background span:nth-child(17) {
    color: #583C87;
    top: 97%;
    left: 24%;
    animation-duration: 15.9s;
    animation-delay: -4.1s;
    transform-origin: -8vw -8vh;
    box-shadow: -40vmin 0 12.7288648606vmin currentColor;
  }
  .background span:nth-child(18) {
    color: #FFACAC;
    top: 71%;
    left: 74%;
    animation-duration: 15.2s;
    animation-delay: -10.1s;
    transform-origin: 17vw -5vh;
    box-shadow: -40vmin 0 13.1500189293vmin currentColor;
  }
  .background span:nth-child(19) {
    color: #FFACAC;
    top: 69%;
    left: 76%;
    animation-duration: 13.8s;
    animation-delay: -15.5s;
    transform-origin: 12vw 5vh;
    box-shadow: -40vmin 0 14.1922817029vmin currentColor;
  }
  .background span:nth-child(20) {
    color: #E45A84;
    top: 85%;
    left: 57%;
    animation-duration: 10.4s;
    animation-delay: -7.2s;
    transform-origin: -9vw 3vh;
    box-shadow: 40vmin 0 7.7038747301vmin currentColor;
  }
  
  @keyframes move {
    100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
    }
  }
    
  .logo {
    width: 100vw;
    height: 100vh;
  }
  
  .centered {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 55vw;
    min-width: 800px;
    height: auto;
  }