.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  background:
  	linear-gradient(#80808000 50%, #0000003F 50%),
	linear-gradient(90deg, #FF00000F, #00FF0003, #0000FF0F);
  background-size: 100% 2px, 3px 100%;
  --animation: flicker linear 0.25s infinite;
}

@keyframes flicker {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px 2px; }
}


.crt {
  --animation: textFlicker 1.6s infinite;
  text-shadow: 2px 0 1px #0000FF7F, -2px 0 1px #FF00007F, 0 0 3px;
}

#scanlines {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  background: linear-gradient(#000000FF 0%, #000000FF 80vh, #00000000 100vh);
  opacity: 5%;
  --background-size: 100% 2px, 3px 100%;
  background-repeat: repeat;
  background-size: 100vw 100vh;
  animation: scan linear 3s infinite;
  pointer-events: none;
}

@keyframes scan {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px 200vh; }
}

@keyframes noise {
  0% { background-image: url("https://raw.githubusercontent.com/rykrr/rykrr.github.io/refs/heads/main/noise/0.png"); }
  33% { background-image: url("https://raw.githubusercontent.com/rykrr/rykrr.github.io/refs/heads/main/noise/1.png"); }
  66% { background-image: url("https://raw.githubusercontent.com/rykrr/rykrr.github.io/refs/heads/main/noise/2.png"); }
}

#noise {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  background-image: url("https://raw.githubusercontent.com/rykrr/rykrr.github.io/refs/heads/main/noise/0.png");
  background-repeat: repeat;
  pointer-events: none;
  opacity: 10%;
  animation: noise linear 0.2s infinite;
}