/* (C) Copyright 2025 Joseph R. Jones - https://jrj.org - MIT License */

:root {
  --bg: #000000;
  --fg: #33ff33;
  --char-width: 8px; /* Approximate width of a monospace character */
}
* {
  box-sizing: border-box;
  outline: none; /* Remove focus outlines */
  border: none; /* Remove any borders */
}
html, body {
  margin: 0;
  height: 100%;
  color: var(--fg);
  font-family: "Fira Code", "Menlo", "Consolas", monospace;
  font-size: calc(100vw / 60); /* Dynamically adjust font size */
  line-height: 1.4;
  overflow: auto; /* Allow scrolling */
  background: #000000;
  padding: 20px; /* Add padding for the content */
}
body::before {
  content: '';
  position: fixed; /* Ensure it stays in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow interactions with content */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.4) 1pt,
    transparent 1pt,
    transparent 2pt
  );
  z-index: 10; /* Ensure it is in front of content */
}
#terminal {
  height: 100%; /* Ensure it occupies the full viewport height */
  overflow-y: auto; /* Enable vertical scrolling */
  white-space: pre; /* Preserve whitespace and line breaks for ASCII art */
}
#terminal.flicker {
  animation: flicker 0.15s steps(1) infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.93; }
  60% { opacity: 1; }
}
.cursor {
  display: inline-block;
  width: 0.6em; /* Match the width of a single character */
  height: 1em; /* Match the height of a single line */
  background: var(--fg);
  vertical-align: bottom; /* Align with text baseline */
  transform: translateY(-20%); /* Nudge cursor slightly upward */
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.clickable { text-decoration: underline; cursor: pointer; color: aqua; 
    text-shadow: 0 0 8px rgba(51, 200, 251, 0.9) !important
}
a { color: inherit; text-decoration: underline; 
  text-shadow: 0 0 8px rgba(51, 200, 251, 0.9) !important
}
.yellowbold { 
  color: #ffcc00; font-weight: bold;
  text-shadow: 0 0 8px rgba(224, 224, 51, 0.9) !important;
}
img {
  filter: hue-rotate(90deg) saturate(50%) drop-shadow(0 0 8px rgba(0, 125, 0, 0.9)); /* Combine both effects */
}
/* Ghost autocomplete text: semi-transparent to appear darker */
.ghost {
  /* Dark green for inline autocomplete */
  color: rgba(0, 128, 0, 1) !important;
}

/* Subtle CRT text glow */
#terminal, #terminal * {
  text-shadow: 0 0 8px rgba(51, 255, 51, 0.9);
} 
#terminal .terminal-red {
  text-shadow: 0 0 8px rgba(255, 51, 51, 0.9);
  color: red !important
}