/* ---- reset ---- */

body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
  display: block;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #d43e48;
  background-image: url('signup.css');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -5;
  animation: colour 60s infinite alternate
    cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes colour {
  0% {
    background-color: #111;
  }
  10% {
    background-color: rgb(15, 53, 16);
  }
  20% {
    background-color: #da3b35;
  }
  30% {
    background-color: #f102d2;
  }
  40% {
    background-color: #4600f2;
  }
  50% {
    background-color: rgb(185, 156, 67);
  }
  60% {
    background-color: #4caf50;
  }
  70% {
    background-color: #d43e48;
  }
  80% {
    background-color: #da3b35;
  }
  90% {
    background-color: #4600f1;
  }
  100% {
    background-color: #b61924;
  }
}

@media screen and (min-width: 800px) {
  canvas {
    display: block;
    animation: colour 60s infinite alternate
      cubic-bezier(0.455, 0.03, 0.515, 0.955);
    /* background-color: #d43e48; */
    position: fixed;
    z-index: -1;
  }
  #main_section {
    position: absolute;
    top: 0;
    left: 40%;
  }
  #particles-js {
    width: 100%;
    height: 100%;
    background-image: url('../signup.css');
    background-color: #b61924;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
  }
}
#particles-js.troll canvas {
  -webkit-animation: spinning 1.4s infinite;
  animation: spinning 1.4s infinite;
}
#particles-js .particles-js-canvas-el {
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-animation: appear 1.4s 1;
  animation: appear 1.4s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
#loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background: #111;
  width: 100%;
  height: 100%;
}
@-webkit-keyframes appear {
  from {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  to {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes appear {
  from {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  to {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes spinning {
  from {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinning {
  from {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}