/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("fonts/AtkinsonHyperlegibleMono-Regular.woff2");
    font-style: normal;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("fonts/AtkinsonHyperlegibleMono-RegularItalic.woff2");
    font-style: italic;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("fonts/AtkinsonHyperlegibleMono-Bold.woff2");
    font-weight: bold;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("fonts/AtkinsonHyperlegibleMono-BoldItalic.woff2");
    font-style: italic;
    font-weight: bold;
}


/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #666,
      0 0 10px #666,
      0 0 15px #666,
      0 0 20px #0f0,
      0 0 40px #0f0,
      0 0 60px #0f0,
      0 0 80px #0f0,
      0 0 100px #0f0;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}

/* Pulsate animation */
@keyframes pulsate {
  100% {
    /* Larger blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 12px #fff,
      0 0 19px #fff,
      0 0 40px #0f0,
      0 0 80px #0f0,
      0 0 90px #0f0,
      0 0 100px #0f0,
      0 0 150px #0f0;
  }
 0% {
    /* A slightly smaller blur radius */
    text-shadow:
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 18px #fff,
      0 0 38px #0f0,
      0 0 75px #0f0,
      0 0 80px #0f0,
      0 0 94px #0f0,
      0 0 140px #0f0;
  }
}


.neonText {
  color: #fff;
}

/* Thanks https://aleclownes.com/2017/02/01/crt-display.html */
@keyframes crtFlicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

@keyframes crtTextShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 2px rgba(0,30,255,0.5), -0.4389924193300864px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 2px rgba(0,30,255,0.5), -2.7928974010788217px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 2px rgba(0,30,255,0.5), -0.02956275843481219px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 2px rgba(0,30,255,0.5), -0.40218538552878136px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 2px rgba(0,30,255,0.5), -3.4794037899852017px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 2px rgba(0,30,255,0.5), -1.6125630401149584px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 2px rgba(0,30,255,0.5), -0.7015590085143956px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  35% {
    text-shadow: 3.896914047650352px 0 2px rgba(0,30,255,0.5), -3.896914047650352px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 2px rgba(0,30,255,0.5), -3.870905614848819px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 2px rgba(0,30,255,0.5), -2.231056963361899px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 2px rgba(0,30,255,0.5), -0.08084290417898504px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  55% {
    text-shadow: 2.3758461067427545px 0 2px rgba(0,30,255,0.5), -2.3758461067427545px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 2px rgba(0,30,255,0.5), -2.202193051050636px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 2px rgba(0,30,255,0.5), -2.8638780614874975px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 2px rgba(0,30,255,0.5), -0.48874025155497314px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 2px rgba(0,30,255,0.5), -1.8948491305757957px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 2px rgba(0,30,255,0.5), -0.0833037308038857px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 2px rgba(0,30,255,0.5), -0.09769827255241735px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 2px rgba(0,30,255,0.5), -3.443339761481782px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 2px rgba(0,30,255,0.5), -2.1841838852799786px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
  100% {
    text-shadow: 2.6208764473832515px 0 2px rgba(0,30,255,0.5), -2.6208764473832515px 0 2px rgba(255,0,80,0.3), 0 0 5px;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: crtFlicker .42s infinite;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 6px, 9px 100%;
  pointer-events: none;
}

.crt {
  animation: crtTextShadow 1.9s infinite;
}


/* Main stuff */
body {
  background-color: black;
  font-family: "Atkinson Hyperlegible Mono";
  color: #0f0;
  margin: 10px;
}

div {
  margin: 2px;
  border-style: ridge;
  padding: 7px;
}

h1 {
  font-family: "Atkinson Hyperlegible Mono";
  font-size: 4.2rem;
  /*animation: pulsate 0.11s ease-in-out infinite alternate;*/
  animation: flicker 3.0s infinite alternate;
}