body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --neon-text-color: lime;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

@font-face {
  font-family: "DotGothic";
  src: local("DotGothic"),
  url("/assets/DotGothic16-5TvwCatA.ttf") format("truetype");
}

@font-face {
  font-family: "pcsenior";
  src: local("pcsenior"),
  url("/assets/pcsenior-DidaUmfX.ttf") format("truetype");
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* Animations */
.scanlines {
  overflow: hidden;
  position: relative;
}
.scanlines:before,
.scanlines:after {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
}
.scanlines:before {
  width: 100%;
  height: 1px;
  z-index: 2147483649;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0.75;
  animation: scanline 6s linear infinite;
}
.scanlines:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483648;
  background: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.3) 51%
  );
  background-size: 100% 3px;
  animation: scanlines 3s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
  0% {
      transform: translate3d(0, 200000%, 0);
  }
}
@keyframes scanlines {
  0% {
      background-position: 0 50%;
  }
}

/* Animate neon flicker */
@keyframes flicker {
    
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    
      text-shadow:
          -0.2rem -0.2rem 1rem #fff,
          0.2rem 0.2rem 1rem #fff,
          0 0 2rem var(--neon-text-color),
          0 0 4rem var(--neon-text-color),
          0 0 6rem var(--neon-text-color),
          0 0 8rem var(--neon-text-color),
          0 0 10rem var(--neon-text-color);
           
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 2;
  }
}

@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 2;
  }
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 2;
  }
}

@-o-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 2;
  }
}

@-ms-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 2;
  }
}

@keyframes FadeOut {
  0% {
    opacity: 2;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes FadeOut {
  0% {
    opacity: 2;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes FadeOut {
  0% {
    opacity: 2;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes FadeOut {
  0% {
    opacity: 2;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes FadeOut {
  0% {
    opacity: 2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes SlideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

@-moz-keyframes SlideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

@-webkit-keyframes SlideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

@-o-keyframes SlideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

@-ms-keyframes SlideIn {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0%;
  }
}

@keyframes SlideOut {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes SlideOut {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 100%;
  }
}

@-webkit-keyframes SlideOut {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 100%;
  }
}

@-o-keyframes SlideOut {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 100%;
  }
}

@-ms-keyframes SlideOut {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 100%;
  }
}