/* This was vibe coded because I can't even begin figuring out how to make a CRT effect, will be changed another time maybe */
  .crt {
  
    mix-blend-mode: screen;
  
    filter: brightness(1.95) contrast(0.05);
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
  
    background:
      /* Scanlines */
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 1px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0) 4px
      ),
      /* Noise */
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.015) 0px,
        rgba(0,0,0,0.015) 1px,
        rgba(255,255,255,0.015) 2px
      );


    /* animation:
      crt-flicker 0.15s infinite,
      crt-noise-move 0.6s infinite; */
  }

.scanlines {
    overflow: hidden;
    position: relative;
}
.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}
.scanlines:before {
    width: 100%;
    height: 40px;
    z-index: 2147483649;
    background: rgba(255, 255, 255, 0.166);
    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 80%,
        rgba(0, 0, 0, 0.3) 51%
    );
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
    0% {
        transform: translate3d(0, 4500%, 0);
        offset-distance: 0%;
        background: rgba(255, 255, 255, 0.054);
    }
    50% {
      background: rgba(255, 255, 255, 0.089);
    }
    100% {
      background: rgba(255, 255, 255, 0);
      offset-distance: 100%;
    }
}
@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

  @keyframes crt-flicker {
    0%   { opacity: 0.95;}
    50%  { opacity: 1;}
    100% { opacity: 0.96; }
  }
  
  @keyframes crt-noise-move {
    0%   { background-position: 0 0, 0 0;}
    100% { background-position: 0 4px, 6px 0.3;}
  }
  .crt::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.05),
        rgba(0,0,0,0.05),
        rgba(255,255,255,0.05)
      );
    opacity: 0.05;
    animation: crt-roll 6s linear infinite;
  }
  
  @keyframes crt-roll {
    0%   { transform: translateY(-100%); filter: brightness(10%);}
    100% { transform: translateY(100%); filter: brightness(80%);}
  }
  
  /* @keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea3663, -2px 0 0 #75fa69;
    }
    to {
      text-shadow: 3px 0.5px 2px #ea3654, -1px -0.5px 2px #75fa69;
    }
  } */

  @keyframes textflicker {
    from {
      opacity: 0.98;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes elseflicker {
    from {
      filter: drop-shadow(2px 0 0 #ea36af);

    }
    to {
      filter: drop-shadow(0.5px 2px #75fa69)
    }
  }

  .text-subtitle, .text-subtitle-small, .text-title, .subpage-text, .scary, #clock, .breaking {
    animation-name: textflicker;
    animation-duration: 0.01s;
    animation-iteration-count: infinite;
    text-shadow: 0 0 5px;
    -webkit-font-smoothing: auto;
  }
  
  .crt-screen {
    position: relative;
    width: 100vw;
    /* height: 100vh; */
    /*   
     transform:
      perspective(1000px)
      scale(1.03); */

    border-radius: 2.5%;
    overflow: hidden;
  }
  
  .crt-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  
    background:
      radial-gradient(
        ellipse at center,
        rgba(90, 90, 90, 0.06) 0%,
        rgba(0,0,0,0.25) 70%,
        rgba(0,0,0,0.45) 100%
      );
  
    mix-blend-mode: multiply;
  }


  @media only screen and (max-width: 767px) {

}