/* ---- 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: #b61924;
  background-image: url('signup.css');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -5;
}
@media screen and (min-width: 800px) {
  canvas {
    display: block;
    background-color: #b61924;
    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);
  }
}