@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

body {
  background: #000000f6;
  position: relative;
  &::after {
    content: "";
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background: url(https://becky.dev/assets/images/whitenoise-e05ce92bb85e9688f3fd742c6e4eb6bf.png);
    animation: 0.09s infinite static;
    opacity: 0.13;
    pointer-events: none;
    z-index: 5;
  }
}

div {
  width: 100%;
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  $one: #0a001a;
  $two: #000917;
  background-image: linear-gradient(
    90deg,
    #000000 25%,
    $one 25%,
    $one 31.25%,
    $two 43.75%,
    $two 50%,
    #000000 50%,
    #000000 75%,
    $one 75%,
    $one 76.25%,
    $two 93.75%,
    $two 100%
  );
  background-size: 32px 32px;
  animation: 0.01s infinite static;
  &::before {
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
    background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.192) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.5) 75%,
      transparent 75%,
      transparent 100%
    );
    background-size: 4px 4px;
    z-index: 2;
    pointer-events: none;
  }
}
h1 {
  color: #fff;
  font-size: 70px;
  font-family: "Press Start 2P", monospace;
}

@keyframes static {
  0%,
  100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0% 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}
@keyframes glowFlicker {
  0% {
    filter: drop-shadow(0px 0px 15px #00f428);
  }
  100% {
    filter: drop-shadow(0px 0px 5px #fff);
  }
}
.glowFlicker {
  animation: glowFlicker 0.05s ease infinite;
}