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

body {
  margin: 0;
  background-color: #000000;           /* black background */
  color: #39ff14;                      /* neon green text */
  font-family: "Courier New", monospace;
  text-shadow: 0 0 4px #39ff14;        /* glow */
  position: relative;
}

/* Links stay neon green too */

a {
  color: #39ff14;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Special red text (for REDTEXT) */

.redtext {
  color: #ff0033;                      /* neon red */
  text-shadow: 0 0 4px #ff0033;
}

/* CRT scanline overlay */

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 20, 0.05) 0px,
    rgba(0, 255, 20, 0.05) 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );

  opacity: 0.4;
  mix-blend-mode: soft-light;
  
  /*--- CRT SHELL FOR THE EMBED ---*/

#signup-shell {
  border: 1px solid #004422;
  padding: 12px;
  margin-top: 20px;
  background: #000000;
  box-shadow: 0 0 12px #39ff14;
  position: relative;
}

/* title bar above the iframe */
.terminal-title {
  background: #001a0f;
  padding: 6px;
  border-bottom: 1px solid #39ff14;
  color: #39ff14;
  text-shadow: 0 0 4px #39ff14;
  font-size: 13px;
}

/* frame around the iframe */
.terminal-frame {
  border: 1px solid #39ff14;
  padding: 4px;
  background: #000000;
  box-shadow: inset 0 0 12px #003d1f;
}

.signup-frame {
  width: 100%;
  height: 700px;

  /* core CRT recolor */
  filter: invert(1)
          hue-rotate(120deg)
          contrast(1.4)
          brightness(0.7);

  /* optional: mild scan distortion */
  image-rendering: pixelated;
}

/* CRT scanlines over JUST the signup box */
#signup-shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,20,0.04) 0px,
    rgba(0,255,20,0.04) 2px,
    rgba(0,0,0,0.2) 2px,
    rgba(0,0,0,0.2) 4px
  );

  opacity: 0.25;
}

/* note under the form */
.terminal-note {
  margin-top: 8px;
  color: #39ff14;
  opacity: 0.7;
  text-shadow: 0 0 3px #39ff14;
}