@charset "UTf-8";

/* css-loading.css */

:root {
  --color: #000;
  --default-color: green;
  --new-color: #0f0;
}

body {
  background: #121212
}

#loader {
  width: 500px;
  position: absolute;
  text-align: center;
  left: calc(50% - 250px);
  top: calc(50% - 10px)
}

#loader .square {
  display: inline-block;
  height: 7px;
  width: 7px;
  margin: 6px;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,.3);
  animation: bouncer cubic-bezier(.455,.03,.515,.955) .75s infinite alternate
}

#loader .square:nth-child(5n+1) {
  background: #0F9;
  animation-delay: 0
}

#loader .square:nth-child(5n+2) {
  background: #0CF;
  animation-delay: calc(0s + (.1s * 1))
}

#loader .square:nth-child(5n+3) {
  background: #93F;
  animation-delay: calc(0s + (.1s * 2))
}

#loader .square:nth-child(5n+4) {
  background: #F66;
  animation-delay: calc(0s + (.1s * 3))
}

#loader .square:nth-child(5n+5) {
  background: #FFF35C;
  animation-delay: calc(0s + (.1s * 4))
}

@keyframes bouncer {
  to {
      transform: scale(1.75) translateY(-20px)
  }
}