/* 1. The CRT Phosphor Palette */
:root {
  --bg-color: #050505;       /* Deep monitor black */
  --text-color: #4af626;     /* Bright phosphor green */
  --dim-text: #228b22;       /* Dimmer green for borders/secondary text */
  --glow: 0 0 4px rgba(74, 246, 38, 0.6); 
}

/* Optional: A harsh, high-contrast inverse for light mode */
@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #f4f4f4; 
    --text-color: #000000; 
    --dim-text: #555555;
    --glow: none;
  }
}

/* 2. Base Terminal Styling */
body { 
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-weight: bold;
  padding: 30px;
  text-shadow: var(--glow); /* The magic CRT glow */
  
  /* Subtle CSS-only scanlines for the background */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* 3. Links and Highlights */
a {
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 1px solid var(--dim-text);
}

a:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-shadow: none;
}

/* Terminal-style text selection (click and drag) */
::selection {
  background: var(--text-color);
  color: var(--bg-color);
  text-shadow: none;
}

/* 4. Structural Elements */
nav {
  text-align: center;
  margin-bottom: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
}

nav li a {
 padding: 2px 8px;
 border: none;
}

/* Add square brackets around nav links for a TUI feel */
nav li a::before { content: "[ "; color: var(--dim-text); }
nav li a::after  { content: " ]"; color: var(--dim-text); }

h1, h2, h3 {
  text-transform: uppercase;
}

h3 a.ablack {
  font-size: xx-large;
  border: none;
}

/* A blinking block cursor on the main title */
h3 a.ablack::after {
  content: '█';
  animation: blink 1.2s step-start infinite;
  margin-left: 8px;
}

@keyframes blink {
  50% { opacity: 0; }
}

li, ul.sublist {
  padding-top: 3px;
}

/* 5. ASCII-Art Style Layout Borders */
@media screen and (min-width: 768px) {
  .flex-container {
    display: flex;
  }

  .flex-container > section {
    margin: 10px;
    padding: 15px;
    width: 50%;
    border: 2px dashed var(--dim-text); /* Dashed lines feel more like CLI UI */
    background-color: rgba(0, 20, 0, 0.4); /* Slight tint for content boxes */
  }
}