/* Gemeinsame Basis aller Seiten: Schriften, Farben, Röhrenmonitor-Look */

/* Px437 IBM VGA 8x16 – The Ultimate Oldschool PC Font Pack von VileR (int10h.org), CC BY-SA 4.0
   Source Serif 4 Bold Italic – Adobe, SIL Open Font License 1.1 */
@font-face{font-family:"Px437 IBM VGA";src:url("../fonts/Px437_IBM_VGA_8x16.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Wortmarke Serif";src:url("../fonts/SourceSerif4-BoldIt.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --bg:#2d2a94; --bg-hi:#3a37ab; --bg-lo:#16145a;
  --ink:#efe6cf; --glow:rgba(239,230,207,.30);
  --fr-a:rgba(255,96,96,.30); --fr-b:rgba(96,200,255,.30);
  --spill:rgba(60,56,180,.28);
  --serif:"Wortmarke Serif","Times New Roman",Times,Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000}
body{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:2vmin;background:#000;color:var(--ink);
  font-family:"Px437 IBM VGA",ui-monospace,"Cascadia Mono","Courier New",monospace;-webkit-font-smoothing:none;font-smooth:never}
a{color:inherit;text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.22em}
a:hover,a:focus-visible{background:var(--ink);color:var(--bg);text-decoration:none;text-shadow:none;outline:none}
a:focus-visible{box-shadow:0 0 0 .15em var(--bg),0 0 0 .3em var(--ink)}

/* Bildschirm mit Lichtschein auf dem schwarzen Rand */
.screen{position:relative;container-type:inline-size;overflow:hidden;background:#000;
  box-shadow:0 0 0 .5vmin #050505,0 0 6vmin var(--spill)}
/* Scanlines */
.screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.20) 0 1px,transparent 1px 3px)}
/* Glasreflex (Wölbung) + Vignette */
.screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse 55% 40% at 28% 18%,rgba(255,255,255,.06),transparent 70%),
    radial-gradient(ellipse 120% 115% at 50% 50%,transparent 62%,rgba(0,0,0,.45) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* Leuchtende Fläche mit Phosphor-Glühen und Farbsäumen am Text */
.tube{z-index:1;line-height:1.5;
  text-shadow:-1px 0 var(--fr-a),1px 0 var(--fr-b),0 0 .4em var(--glow);
  background:radial-gradient(ellipse 75% 70% at 46% 46%,var(--bg-hi) 0%,var(--bg) 52%,var(--bg-lo) 100%);
  box-shadow:inset 0 0 5cqw rgba(0,0,0,.5)}