html, body {
  width: 100%;
  height: 100%;
}

html, body, h1 {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 8em;
  white-space: nowrap;
  font-size: 12vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  -moz-transform: skew(0, -6.7deg);
  -ms-transform: skew(0, -6.7deg);
  -webkit-transform: skew(0, -6.7deg);
  transform: skew(0, -6.7deg);
}

h1 span {
  display: block;
  font-size: 1.5em;
  font-size: 2vw;
  text-align: center;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #3E1E68;
  position: absolute;
  top: 0;
  left: 0;
}

.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: #FFACAC;
  top: 24%;
  left: 95%;
  animation-duration: 11.3s;
  animation-delay: -10.9s;
  transform-origin: -23vw -13vh;
  box-shadow: -40vmin 0 9.5007889164vmin currentColor;
}
.background span:nth-child(2) {
  color: #E45A84;
  top: 48%;
  left: 32%;
  animation-duration: 10.8s;
  animation-delay: -10.1s;
  transform-origin: -17vw 19vh;
  box-shadow: 40vmin 0 13.1933053372vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 26%;
  left: 39%;
  animation-duration: 13.3s;
  animation-delay: -1.7s;
  transform-origin: 18vw 18vh;
  box-shadow: -40vmin 0 5.3516006159vmin currentColor;
}
.background span:nth-child(4) {
  color: #E45A84;
  top: 97%;
  left: 95%;
  animation-duration: 15s;
  animation-delay: -1.9s;
  transform-origin: -2vw -13vh;
  box-shadow: 40vmin 0 10.1798978694vmin currentColor;
}
.background span:nth-child(5) {
  color: #583C87;
  top: 67%;
  left: 5%;
  animation-duration: 10.6s;
  animation-delay: -9.2s;
  transform-origin: -6vw -18vh;
  box-shadow: -40vmin 0 9.9174780403vmin currentColor;
}
.background span:nth-child(6) {
  color: #E45A84;
  top: 60%;
  left: 14%;
  animation-duration: 13.6s;
  animation-delay: -12.7s;
  transform-origin: 4vw -1vh;
  box-shadow: 40vmin 0 14.7355331998vmin currentColor;
}
.background span:nth-child(7) {
  color: #FFACAC;
  top: 6%;
  left: 78%;
  animation-duration: 14.5s;
  animation-delay: -6.1s;
  transform-origin: 12vw 24vh;
  box-shadow: 40vmin 0 6.1165977859vmin currentColor;
}
.background span:nth-child(8) {
  color: #FFACAC;
  top: 17%;
  left: 29%;
  animation-duration: 13.1s;
  animation-delay: -1.1s;
  transform-origin: 1vw -11vh;
  box-shadow: 40vmin 0 13.1171958189vmin currentColor;
}
.background span:nth-child(9) {
  color: #E45A84;
  top: 64%;
  left: 96%;
  animation-duration: 14s;
  animation-delay: -5.6s;
  transform-origin: 22vw 24vh;
  box-shadow: -40vmin 0 5.6109136792vmin currentColor;
}
.background span:nth-child(10) {
  color: #E45A84;
  top: 1%;
  left: 8%;
  animation-duration: 14.4s;
  animation-delay: -1.8s;
  transform-origin: 16vw -13vh;
  box-shadow: 40vmin 0 12.9454607397vmin currentColor;
}
.background span:nth-child(11) {
  color: #FFACAC;
  top: 32%;
  left: 25%;
  animation-duration: 14.3s;
  animation-delay: -4.6s;
  transform-origin: 5vw 22vh;
  box-shadow: -40vmin 0 8.0049537399vmin currentColor;
}
.background span:nth-child(12) {
  color: #E45A84;
  top: 27%;
  left: 79%;
  animation-duration: 15.3s;
  animation-delay: -2s;
  transform-origin: 15vw -18vh;
  box-shadow: 40vmin 0 6.8305408231vmin currentColor;
}
.background span:nth-child(13) {
  color: #583C87;
  top: 44%;
  left: 54%;
  animation-duration: 10.4s;
  animation-delay: -7s;
  transform-origin: 15vw 13vh;
  box-shadow: 40vmin 0 7.8574191384vmin currentColor;
}
.background span:nth-child(14) {
  color: #583C87;
  top: 75%;
  left: 26%;
  animation-duration: 10.7s;
  animation-delay: -5.9s;
  transform-origin: -8vw -10vh;
  box-shadow: -40vmin 0 5.6758925328vmin currentColor;
}
.background span:nth-child(15) {
  color: #E45A84;
  top: 50%;
  left: 35%;
  animation-duration: 15.1s;
  animation-delay: -7.1s;
  transform-origin: -9vw 0vh;
  box-shadow: -40vmin 0 10.9327978633vmin currentColor;
}
.background span:nth-child(16) {
  color: #583C87;
  top: 94%;
  left: 73%;
  animation-duration: 12.4s;
  animation-delay: -10.6s;
  transform-origin: 22vw 22vh;
  box-shadow: 40vmin 0 13.1869255535vmin currentColor;
}
.background span:nth-child(17) {
  color: #583C87;
  top: 86%;
  left: 44%;
  animation-duration: 15.4s;
  animation-delay: -4s;
  transform-origin: -20vw -22vh;
  box-shadow: -40vmin 0 7.5770512454vmin currentColor;
}
.background span:nth-child(18) {
  color: #583C87;
  top: 26%;
  left: 16%;
  animation-duration: 15.4s;
  animation-delay: -8s;
  transform-origin: -16vw -3vh;
  box-shadow: -40vmin 0 11.830274191vmin currentColor;
}
.background span:nth-child(19) {
  color: #583C87;
  top: 29%;
  left: 43%;
  animation-duration: 10.1s;
  animation-delay: -15s;
  transform-origin: -2vw -10vh;
  box-shadow: 40vmin 0 7.1718529525vmin currentColor;
}
.background span:nth-child(20) {
  color: #583C87;
  top: 52%;
  left: 38%;
  animation-duration: 15.1s;
  animation-delay: -15s;
  transform-origin: -16vw -3vh;
  box-shadow: 40vmin 0 12.4913745651vmin currentColor;
}

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

#loader {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  visibility: visible;
  position: fixed;
  height: 100vh;
  width: 100%;
  background: #fff;
  z-index: 90000;
}

#loader.fadeOut {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}