/* Dracula colour palette (CSS variables) */
:root {
  --bg          : #282a36;   /* page background */
  --panel       : #44475a;   /* very light panel (optional) */
  --fg          : #f8f8f2;   /* primary text */
  --muted       : #6272a4;   /* secondary / muted text */
  --cyan        : #8be9fd;
  --green       : #50fa7b;
  --orange      : #ffb86c;
  --pink        : #ff79c6;
  --purple      : #bd93f9;
  --red         : #ff5555;
  --yellow      : #f1fa8c;

  /* Fonts */
  --font-sans   : sans-serif;
}

/* --------------------------------------------------------------
   Global reset & base styles
   -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Links – keep them visible but subtle */
a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--pink);
  text-decoration: underline;
}

/* --------------------------------------------------------------
   Layout containers – no borders, just spacing
   -------------------------------------------------------------- */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header – simple centered text */
header {
  padding: 2rem 1rem;
  text-align: center;
}

/* Main – central column with modest side padding */
main {
  flex: 1;
  max-width: 800px;
  width: 90%;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Footer – same style as header */
footer {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
}

/*

  Section styling – only vertical spacing

*/

section {
  margin-bottom: 2rem;
}

/* Section headings – a pop of colour for hierarchy */
section h2 {
  margin-top: 0;
  color: var(--pink);
  font-weight: normal;
}

/* Paragraphs – keep default margins */
section p {
  margin: 0.8rem 0;
}

/* Emphasis – colour‑coded but still text‑only */
section b,
section strong { color: var(--yellow); }
section i        { color: var(--cyan); }

/* --------------------------------------------------------------
   INFO‑FLASH.TXT CONTENT
   -------------------------------------------------------------- */
.info-update {
    white-space: pre-wrap;       /* Respects breaks but wraps long lines */
    word-wrap: break-word;       /* Prevents long words from stretching the site */
    overflow-x: auto;            /* Adds a scrollbar only if absolutely necessary */
    font-family: monospace;      /* Keeps that classic retro terminal feel */
    color: var(--fg);
}

#info-flash {
  text-align: left;
  border: 1px solid var(--muted);
  padding: 1.2rem;
  position: relative;
  margin-top: 1.5rem;        
}

.flash-title {
  position: absolute;
  top: -0.7rem;        /* Offset to sit exactly on the border line */
  left: 0.8rem;
  background: var(--bg); /* Matches your site background to "cut" the border */
  padding: 0 0.4rem;
  font-size: 0.85rem;
  font-family: monospace;
  margin: 0;
}
/* 
Flashing title for the Info‑Flash section
*/

/* Keyframes – a short bright flash */
@keyframes flashTitle {
  0%, 70%, 100% { opacity: 0.4; }   /* mostly dim */
  71%, 73%       { opacity: 1; }   /* quick bright flash */
}

/*  Apply animation only to the heading */
.info-flash .flash-title {
  display: inline-block;               /* allows transform/opacity */
  color: var(--green);                  /* keep the pink hue you already use */
  animation: flashTitle 1s ease-in-out infinite;
}

/*

LINKS SECTION

*/

/* Unique container for the Links section */
#links {
  border: 1px solid var(--muted); /* Different color for granularity */
  padding: 1.2rem;
  position: relative;
  margin-top: 1.5rem;
}

/* Specific title styling for Links */
.links-title {
  position: absolute;
  top: -0.7rem;
  left: 0.8rem;
  background: var(--bg); 
  padding: 0 0.4rem;
  font-size: 0.85rem;
  font-family: monospace;
  margin: 0;
  color: var(--cyan); /* Matches the border */
}

/* The actual list of links inside the pre */
.links-list {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.6; /* Slightly wider line height for a list of links */
  white-space: pre-wrap;
}

/* Granular link styling for this section only */
.links-list a {
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px dashed var(--yellow);
  font-family: monospace;  
}

.links-list a:hover {
  background: var(--yellow);
  color: var(--bg);
}

/* --------------------------------------------------------------
   Specific element tweaks
   -------------------------------------------------------------- */

/* Tagline – slightly smaller, muted colour */
#tagline {
  font-size: 1.1rem;
  color: var(--muted);
}

/* --------------------------------------------------------------
   Utility helpers (optional)
   -------------------------------------------------------------- */
.text-muted   { color: var(--muted); }
.text-primary { color: var(--pink); }
.text-success { color: var(--green); }
.text-warning { color: var(--orange); }
.text-danger  { color: var(--red); }

/* --------------------------------------------------------------
   Responsive tweaks (optional)
   -------------------------------------------------------------- */
@media (max-width: 600px) {
  header, footer { padding: 1.5rem 0.5rem; }
  main { padding: 0 0.5rem; }
}

/* --------------------------------------------------------------
   ASCII‑ART NAME BANNER – animated gradient (CSS‑only)
   -------------------------------------------------------------- */
.ascii-name {
  /* Monospace font – keeps the art aligned */
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;               /* adjust to fit your layout */
  line-height: 1.2;
  text-align: center;
  white-space: pre;                 /* preserve spaces & line‑breaks */
  margin: 0 auto 1rem;              /* centre horizontally, add bottom margin */

  /* Gradient background */
  background: linear-gradient(
    135deg,                         /* diagonal direction – feel free to change */
    #ff79c6,                        /* Dracula pink */
    #8be9fd,                        /* Dracula cyan */
    #50fa7b                         /* Dracula green */
  );
  background-size: 300% 300%;       /* give the gradient room to move */

  /*  Clip the gradient to the text */
  -webkit-background-clip: text;    /* Chrome, Safari, Edge */
  background-clip: text;            /* Firefox (≥49) */
  color: transparent;               /* hide the original text colour */

  /*  Animate the gradient – a slow, endless drift */
  animation: gradientShift 12s linear infinite;
}

/* --------------------------------------------------------------
   KEYFRAMES – move the gradient left‑to‑right (you can change direction)
   -------------------------------------------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* --------------------------------------------------------------
   FALLBACK for browsers that don’t support background‑clip:text
   -------------------------------------------------------------- */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ascii-name {
    color: #ff79c6;   /* solid pink – first gradient stop */
    background: none;
  }
}

/* --------------------------------------------------------------
   RESPONSIVE tweak – shrink a bit on very small screens
   -------------------------------------------------------------- */
@media (max-width: 480px) {
  .ascii-name {
    font-size: 0.75rem;
  }
}
/* --------------------------------------------------------------
   STATIC DRACULA‑THEMED SCAN LINES
   -------------------------------------------------------------- */

/* Give the body a stacking context (needed once) */
body {
  position: relative;          /* creates a stacking context */
}

/* Full‑screen pseudo‑element that sits behind content
      but **above** the page background */
body::before {
  content: "";
  position: fixed;             /* stays fixed while scrolling */
  inset: 0;                    /* cover the whole viewport */
  pointer-events: none;        /* never block clicks */
  z-index: 0;                  /* behind everything else */

  /* Dark‑purple scan lines – very low opacity so they’re barely there */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 4px,               /* space between lines */
      rgba(0, 0, 0, 0.07) 4px,     /* Dracula comment colour, faint */
      rgba(0, 0, 0, 0.07) 5px      /* line thickness = 1 px */
    );
}