@charset "utf-8";

/*--------------------------------------------------------------
background
----------------------------------------------------------------*/
body {
  margin: 0;
/*   overflow: hidden; */
}

.background{
  width: 100%;
  height: 100vh; 
  /*!height: 100%;*/
  background: linear-gradient(25deg, #242559, #C5DFED);
  position: fixed;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
}

.background em {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 50s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background em:nth-child(1) {
  color: rgba(238, 212, 237, 0.5);
  top: 76%;
  left: 33%;
  animation-duration: 55.3s;
  animation-delay: -45.6s;
  transform-origin: 12vw -23vh;
  box-shadow: 100vmin 0 16.5636646525vmin currentColor;
}
.background em:nth-child(2) {
  color: rgba(197, 223, 237, 0.5);
  top: 95%;
  left: 61%;
  animation-duration: 59s;
  animation-delay: -29.7s;
  transform-origin: -10vw -4vh;
  box-shadow: -100vmin 0 28.0454478399vmin currentColor;
}
.background em:nth-child(3) {
  color: rgba(238, 212, 237, 0.5);
  top: 48%;
  left: 16%;
  animation-duration: 27.9s;
  animation-delay: -7.1s;
  transform-origin: -4vw -24vh;
  box-shadow: 100vmin 0 23.0055184207vmin currentColor;
}
.background em:nth-child(4) {
  color: rgba(36, 37, 89, 0.5);
  top: 20%;
  left: 66%;
  animation-duration: 46.8s;
  animation-delay: -33.7s;
  transform-origin: 16vw -4vh;
  box-shadow: 100vmin 0 30.7682693152vmin currentColor;
}
.background em:nth-child(5) {
  color: rgba(238, 212, 237, 0.5);
  top: 27%;
  left: 60%;
  animation-duration: 37.8s;
  animation-delay: -38.4s;
  transform-origin: -9vw 3vh;
  box-shadow: 100vmin 0 28.5892143824vmin currentColor;
}
.background em:nth-child(6) {
  color: rgba(36, 37, 89, 0.5);
  top: 95%;
  left: 6%;
  animation-duration: 37s;
  animation-delay: -58.7s;
  transform-origin: -20vw 2vh;
  box-shadow: 100vmin 0 21.9937591026vmin currentColor;
}
.background em:nth-child(7) {
  color: rgba(36, 37, 89, 0.5);
  top: 89%;
  left: 88%;
  animation-duration: 26.2s;
  animation-delay: -28.3s;
  transform-origin: 10vw 18vh;
  box-shadow: 100vmin 0 17.6244119457vmin currentColor;
}
.background em:nth-child(8) {
  color: rgba(197, 223, 237, 0.5);
  top: 45%;
  left: 19%;
  animation-duration: 55s;
  animation-delay: -20.5s;
  transform-origin: -17vw -23vh;
  box-shadow: -100vmin 0 33.2455604066vmin currentColor;
}
.background em:nth-child(9) {
  color: rgba(36, 37, 89, 0.5);
  top: 7%;
  left: 66%;
  animation-duration: 36.5s;
  animation-delay: -56.4s;
  transform-origin: -17vw -18vh;
  box-shadow: -100vmin 0 28.9588440296vmin currentColor;
}
.background em:nth-child(10) {
  color: rgba(36, 37, 89, 0.5);
  top: 44%;
  left: 48%;
  animation-duration: 45.3s;
  animation-delay: -46.1s;
  transform-origin: -20vw -13vh;
  box-shadow: 100vmin 0 27.7138910079vmin currentColor;
}
.background em:nth-child(11) {
  color: rgba(36, 37, 89, 0.5);
  top: 77%;
  left: 75%;
  animation-duration: 43.2s;
  animation-delay: -58.8s;
  transform-origin: -4vw 5vh;
  box-shadow: 100vmin 0 14.6516946013vmin currentColor;
}
.background em:nth-child(12) {
  color: rgba(36, 37, 89, 0.5);
  top: 97%;
  left: 95%;
  animation-duration: 33.6s;
  animation-delay: -21.4s;
  transform-origin: 2vw 12vh;
  box-shadow: 100vmin 0 17.4074890035vmin currentColor;
}

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