styles.css

/* 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." */


  
  /* digital/crt lines effect and edge dimming over whole screen */
          img {
      filter: sepia(20%) hue-rotate(350deg) saturate(1);
      }
      html::before {
      content: " ";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 40%, rgba(0, 0, 0, 0.25) 50%);
      z-index: 2;
      background-size: 100% 2px, 3px 100%;
      pointer-events: none;
      }
      
      
/*whole page effects (text color and the glowing pulse)*/
html, body {

  padding: 2%;           /* 2% of viewport width/height around text */
  box-sizing: border-box; /* ensures padding doesn’t break layout */
  
  background-color: #1a1a1a;
  color: #90ee90; /* ram green */
  font-family: "Courier New", monospace;
}

/* glowing pulse */
@keyframes greenPulse {
  0%, 100% {
    text-shadow:
      0 0 3px #90ee90,
      0 0 6px #90ee90,
      0 0 10px #66cc66;
  }

  50% {
    text-shadow:
      0 0 6px #a0f0a0,
      0 0 14px #7fdc7f,
      0 0 22px #66cc66;
  }

}

/*body-only effects (link colors and a blinking cursor)*/
body {
  
  animation: greenPulse 4s ease-in-out infinite;
}

/* blinking cursor */
main::after {
  content: "|";                /* the cursor */
  display: inline-block;       /* allows animation */
  margin-left: 1px;            /* spacing from text */
  animation: blink 1s step-start infinite;
  color: #90ee90;              
}

/* blinking animation */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/*link olors*/
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: orange;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: orange;
  background-color: transparent;
  text-decoration: underline;
}

        /* Subtle vignette with curvature */
      html::after {
        content: "";
        position: fixed;
        pointer-events: none;
        z-index: 10000;
        background: radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
        border-radius: 2% / 4%; /* match overlay curvature */
      }