html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  background-color: #00495F;
}

#devman {
  width: 80%;
  height: auto;
  padding: 0;
  position: absolute;
  top: 50%;
  animation: 8s flying infinite;

  .eye {
    animation: 8s blink infinite;
  }

  [class^="beam"] {
    animation: 8s beam infinite;
  }

}

.particles {
  background-image: radial-gradient(70px 2px at 20% 30%, rgba(#FFF, .3), rgba(0, 0, 0, 0)),
  radial-gradient(40px 2px at 40% 70%, rgba(#FFF, .28), rgba(0, 0, 0, 0)),
  radial-gradient(330px 2px at 50% 16%, rgba(#FFF, .26), rgba(0, 0, 0, 0)),
  radial-gradient(50px 4px at 90% 40%, rgba(#FFF, .25), rgba(0, 0, 0, 0)),
  radial-gradient(13px 1px at 10% 80%, rgba(#FFF, .22), rgba(0, 0, 0, 0)),
  radial-gradient(94px 2px at 16% 20%, rgba(#FFF, .33), rgba(0, 0, 0, 0)),
  radial-gradient(130px 5px at 10% 80%, rgba(#FFF, .2), rgba(0, 0, 0, 0)),
  radial-gradient(90px 2px at 16% 25%, rgba(#FFF, .2), rgba(0, 0, 0, 0)),
  radial-gradient(130px 2px at 10% 84%, rgba(#FFF, .2), rgba(0, 0, 0, 0)),
  radial-gradient(200px 4px at 90% 45%, rgba(#FFF, .5), rgba(0, 0, 0, 0)),
  radial-gradient(130px 1px at 40% 55%, rgba(#FFF, .2), rgba(0, 0, 0, 0)),
  radial-gradient(940px 2px at 26% 63%, rgba(#FFF, .14), rgba(0, 0, 0, 0)),
  radial-gradient(120px 5px at 30% 63%, rgba(#FFF, .42), rgba(0, 0, 0, 0)),
  radial-gradient(900px 5px at 46% 14%, rgba(#FFF, .21), rgba(0, 0, 0, 0)),
  radial-gradient(1300px 3px at 30% 80%, rgba(#FFF, .22), rgba(0, 0, 0, 0)),
  radial-gradient(900px 2px at 56% 20%, rgba(#FFF, .2), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 100%;
  animation: flyby 0.5s infinite linear;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;

  &:nth-of-type(2) {
    background-size: 300%;
    animation-duration: 2s;
  }

  &:nth-of-type(3) {
    background-position: -10%;
    background-size: 300%;
    animation-duration: 3s;
  }
}

[id^="screen"] {
  position: absolute;
  animation: shake 2s steps(1, end) infinite;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

@keyframes blink {
  0%, 20%, 24%, 70%, 72%, 80%, 82%, 100% {
    fill: #fff;
  }
  22%, 71%, 81% {
    fill: #111;
  }
}

@keyframes beam {
  0%, 100% {
    opacity: 0.2;
  }
  20%, 28% {
    opacity: 0.8;
  }
  24%, 70% {
    opacity: 0.7;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes flying {
  0%, 100% {
    transform: translate(-60%, -50%);
  }
  20%, 28% {
    transform: translate(-25%, -50%);
  }
  24%, 70% {
    transform: translate(-30%, -50%);
  }
  40% {
    transform: translate(-40%, -50%);
  }
  50% {
    transform: translateX(-50%, -50%);
  }
}

@keyframes shake {
  0%, 12%, 26%, 67%, 96%, 100% {
    transform: translateY(0px);
  }
  34%, 46%, 85% {
    transform: translateY(2px);
  }
  45%, 70% {
    transform: translateY(4px);
  }
  87% {
    transform: translateY(-1px);
  }
  75% {
    transform: translateY(-4px);
  }
}

@keyframes flyby {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

a.brand {
  position: fixed;
  z-index: 1;
  bottom: 0;
  right: 0;
  margin: 10px 20px;
  opacity: 0.4;
  transition: 0.3s ease;

  &:hover {
    opacity: 1;
  }

  svg {
    fill: #fff;
  }
}