Source Code

   1  /* ============================================================================
   2     style.css  --  "What Can I Learn About You?"
   3     ----------------------------------------------------------------------------
   4     A deliberately old-web stylesheet. Target era: 1999-2005.
   5     Black CRT background, phosphor-grey text, cyan links, purple visited links.
   6     Borders, tables, horizontal rules, blinking cursors. No rounded corners,
   7     no shadows, no gradients, no modern anything.
   8  
   9     Palette
  10       background .... #000000
  11       text .......... #D0D0D0
  12       link .......... #00FFFF (cyan)
  13       visited ....... #B24BF3 (purple)
  14       success ....... #00FF00 (green)
  15       warning ....... #FFFF00 (yellow)
  16       danger ........ #FF0000 (red)
  17       dim border .... #333333 / #00AA00 (terminal green)
  18  
  19     Font: VT323, falling back to Courier New / Lucida Console / monospace.
  20     VT323 is loaded via header.php (Google Fonts). If offline, the monospace
  21     fallbacks keep the whole thing readable.
  22     ========================================================================== */
  23  
  24  /* ----- Optional local VT323 face (only used if you drop a font file in
  25     assets/fonts/. Harmless if the file is absent; the Google Fonts <link>
  26     in header.php is the primary source). --------------------------------- */
  27  @font-face {
  28    font-family: 'VT323Local';
  29    src: local('VT323'), local('VT323-Regular');
  30    font-display: swap;
  31  }
  32  
  33  /* ---------------------------------------------------------------------------
  34     RESET-ISH BASE
  35     --------------------------------------------------------------------------- */
  36  * {
  37    margin: 0;
  38    padding: 0;
  39    box-sizing: border-box;
  40  }
  41  
  42  html, body {
  43    height: 100%;
  44  }
  45  
  46  body {
  47    background-color: #000000;
  48    color: #D0D0D0;
  49    font-family: 'VT323', 'VT323Local', 'Courier New', 'Lucida Console', monospace;
  50    font-size: 20px;
  51    line-height: 1.25;
  52    letter-spacing: 0.3px;
  53    padding: 8px;
  54    /* A faint scanline wash, always on but subtle. The heavier toggleable
  55       effect is .crt-on below. */
  56    background-image:
  57      repeating-linear-gradient(
  58        to bottom,
  59        rgba(0, 0, 0, 0) 0px,
  60        rgba(0, 0, 0, 0) 2px,
  61        rgba(0, 20, 0, 0.06) 3px,
  62        rgba(0, 0, 0, 0) 4px
  63      );
  64  }
  65  
  66  /* Everything sits in a fixed-ish old-school column. */
  67  .wrap {
  68    max-width: 1000px;
  69    margin: 0 auto;
  70  }
  71  
  72  /* ---------------------------------------------------------------------------
  73     TYPOGRAPHY
  74     --------------------------------------------------------------------------- */
  75  h1, h2, h3, h4 {
  76    font-weight: normal;
  77    color: #00FF00;
  78    letter-spacing: 1px;
  79    margin: 12px 0 6px 0;
  80  }
  81  h1 { font-size: 32px; }
  82  h2 { font-size: 27px; color: #00FFFF; }
  83  h3 { font-size: 23px; color: #FFFF00; }
  84  h4 { font-size: 21px; color: #D0D0D0; }
  85  
  86  p {
  87    margin: 6px 0;
  88  }
  89  
  90  pre {
  91    font-family: 'VT323', 'Courier New', 'Lucida Console', monospace;
  92    white-space: pre;
  93    overflow-x: auto;
  94  }
  95  
  96  small { font-size: 15px; }
  97  
  98  b, strong { color: #FFFFFF; }
  99  
 100  hr {
 101    border: 0;
 102    border-top: 1px dashed #00AA00;
 103    margin: 10px 0;
 104    height: 0;
 105    color: #00AA00;
 106    background: transparent;
 107  }
 108  
 109  hr.solid  { border-top: 1px solid #00AA00; }
 110  hr.double { border-top: 3px double #00AA00; }
 111  hr.thick  { border-top: 2px solid #333333; }
 112  
 113  /* ---------------------------------------------------------------------------
 114     LINKS
 115     --------------------------------------------------------------------------- */
 116  a {
 117    color: #00FFFF;
 118    text-decoration: underline;
 119  }
 120  a:visited {
 121    color: #B24BF3;
 122  }
 123  a:hover {
 124    color: #000000;
 125    background-color: #00FFFF;
 126    text-decoration: none;
 127  }
 128  a:active {
 129    color: #FF0000;
 130  }
 131  
 132  /* Skip-link / accessibility helper, visually old-school. */
 133  a.skip {
 134    position: absolute;
 135    left: -9999px;
 136  }
 137  a.skip:focus {
 138    left: 8px;
 139    top: 8px;
 140    background: #00FF00;
 141    color: #000;
 142    padding: 2px 6px;
 143    z-index: 1000;
 144  }
 145  
 146  /* ---------------------------------------------------------------------------
 147     HEADER / LOGO
 148     --------------------------------------------------------------------------- */
 149  .logo {
 150    color: #00FF00;
 151    font-size: 13px;
 152    line-height: 1.05;
 153    text-align: left;
 154    display: inline-block;
 155    /* subtle phosphor glow, no box-shadow on the element itself */
 156    text-shadow: 0 0 4px rgba(0, 255, 0, 0.45);
 157    margin: 4px 0;
 158  }
 159  
 160  @media (max-width: 640px) {
 161    .logo { font-size: 8px; }
 162    body  { font-size: 18px; }
 163  }
 164  
 165  .statusbar {
 166    border: 1px solid #00AA00;
 167    padding: 4px 8px;
 168    margin: 6px 0;
 169    font-size: 17px;
 170    color: #00FF00;
 171    background: #050805;
 172  }
 173  .statusbar span.sep { color: #333; padding: 0 4px; }
 174  .statusbar b { color: #FFFF00; }
 175  
 176  /* Marquee text ticker. */
 177  marquee, .marquee {
 178    border-top: 1px solid #333;
 179    border-bottom: 1px solid #333;
 180    padding: 3px 0;
 181    color: #FFFF00;
 182    font-size: 18px;
 183    background: #0a0a0a;
 184  }
 185  
 186  /* ---------------------------------------------------------------------------
 187     NAVIGATION
 188     --------------------------------------------------------------------------- */
 189  .nav {
 190    margin: 8px 0;
 191    padding: 6px 4px;
 192    border-top: 3px double #00AA00;
 193    border-bottom: 3px double #00AA00;
 194    text-align: center;
 195    line-height: 1.8;
 196  }
 197  .nav a {
 198    color: #00FFFF;
 199    text-decoration: none;
 200    white-space: nowrap;
 201    padding: 0 2px;
 202  }
 203  .nav a:hover {
 204    background: #00FFFF;
 205    color: #000;
 206  }
 207  .nav a.current {
 208    color: #00FF00;
 209    font-weight: bold;
 210  }
 211  .nav .brackets { color: #555; }
 212  
 213  /* ---------------------------------------------------------------------------
 214     BORDERED PANELS (the +----+ "dashboard" look)
 215     --------------------------------------------------------------------------- */
 216  .panel {
 217    border: 1px solid #00AA00;
 218    margin: 12px 0;
 219    background: #030303;
 220  }
 221  .panel > .panel-title {
 222    background: #001100;
 223    color: #00FF00;
 224    border-bottom: 1px solid #00AA00;
 225    padding: 3px 8px;
 226    font-size: 21px;
 227    letter-spacing: 1px;
 228  }
 229  .panel > .panel-title .ico { margin-right: 6px; }
 230  .panel > .panel-body {
 231    padding: 8px 10px;
 232  }
 233  
 234  /* A tighter "ASCII box" variant with a green frame that mimics +--+ corners. */
 235  .asciibox {
 236    border: 1px solid #00AA00;
 237    padding: 8px 10px;
 238    margin: 10px 0;
 239    background: #030303;
 240  }
 241  
 242  /* Inset / sunken Win2000-ish field. */
 243  .inset {
 244    border: 2px solid;
 245    border-color: #000 #444 #444 #000;
 246    background: #0a0a0a;
 247    padding: 6px 8px;
 248  }
 249  
 250  /* Callout boxes. */
 251  .note   { border: 1px solid #00AAAA; background:#001414; padding:6px 8px; margin:8px 0; }
 252  .good   { border: 1px solid #00FF00; background:#001400; padding:6px 8px; margin:8px 0; color:#00FF00; }
 253  .warnbx { border: 1px solid #FFFF00; background:#141400; padding:6px 8px; margin:8px 0; color:#FFFF00; }
 254  .badbx  { border: 1px solid #FF0000; background:#140000; padding:6px 8px; margin:8px 0; color:#FF6666; }
 255  
 256  /* ---------------------------------------------------------------------------
 257     TABLES  (the primary layout & data device, as nature intended)
 258     --------------------------------------------------------------------------- */
 259  table {
 260    border-collapse: collapse;
 261    width: 100%;
 262    margin: 6px 0;
 263  }
 264  table.data,
 265  table.grid {
 266    border: 1px solid #00AA00;
 267  }
 268  table.data th, table.data td,
 269  table.grid th, table.grid td {
 270    border: 1px solid #1c3a1c;
 271    padding: 3px 8px;
 272    text-align: left;
 273    vertical-align: top;
 274    font-size: 18px;
 275  }
 276  table.data th, table.grid th {
 277    background: #001100;
 278    color: #00FF00;
 279    letter-spacing: 1px;
 280  }
 281  /* Classic zebra striping. */
 282  table.data tr:nth-child(even) td,
 283  table.grid tr:nth-child(even) td {
 284    background: #060906;
 285  }
 286  table.data tr:hover td {
 287    background: #0d160d;
 288  }
 289  
 290  /* Key/value two-column report table. */
 291  table.kv td.k {
 292    color: #00FFAA;
 293    white-space: nowrap;
 294    width: 34%;
 295    border-right: 1px solid #1c3a1c;
 296  }
 297  table.kv td.v {
 298    color: #D0D0D0;
 299    word-break: break-word;
 300  }
 301  
 302  /* Layout tables should show no borders. */
 303  table.layout, table.layout td { border: 0; }
 304  
 305  /* ---------------------------------------------------------------------------
 306     RISK BADGES
 307     --------------------------------------------------------------------------- */
 308  .risk {
 309    display: inline-block;
 310    padding: 0 6px;
 311    border: 1px solid;
 312    font-size: 15px;
 313    letter-spacing: 1px;
 314    line-height: 1.4;
 315    vertical-align: middle;
 316  }
 317  .risk-low    { color: #00FF00; border-color: #00FF00; background:#001400; }
 318  .risk-medium { color: #FFFF00; border-color: #FFFF00; background:#141400; }
 319  .risk-high   { color: #FF3030; border-color: #FF0000; background:#140000; }
 320  .risk-info   { color: #00FFFF; border-color: #00AAAA; background:#001414; }
 321  
 322  /* Yes / No / Unknown value chips. */
 323  .val-yes { color: #00FF00; }
 324  .val-no  { color: #FF5555; }
 325  .val-unk { color: #888; }
 326  
 327  /* ---------------------------------------------------------------------------
 328     PROGRESS BARS  (old HTML-table style, not a modern gauge)
 329     --------------------------------------------------------------------------- */
 330  .bar {
 331    border: 1px solid #00AA00;
 332    background: #050505;
 333    height: 18px;
 334    width: 100%;
 335    padding: 1px;
 336    position: relative;
 337  }
 338  .bar > .bar-fill {
 339    height: 100%;
 340    background: #00FF00;
 341    /* Chunky segmented look via a repeating gradient (still 'flat'). */
 342    background-image: repeating-linear-gradient(
 343      to right,
 344      #00FF00 0px, #00FF00 8px,
 345      #000000 8px, #000000 10px
 346    );
 347  }
 348  .bar.warn > .bar-fill {
 349    background-image: repeating-linear-gradient(
 350      to right, #FFFF00 0px,#FFFF00 8px,#000 8px,#000 10px);
 351  }
 352  .bar.bad > .bar-fill {
 353    background-image: repeating-linear-gradient(
 354      to right, #FF0000 0px,#FF0000 8px,#000 8px,#000 10px);
 355  }
 356  .bar > .bar-label {
 357    position: absolute;
 358    top: 0; left: 6px;
 359    font-size: 14px;
 360    color: #D0D0D0;
 361    mix-blend-mode: difference;
 362  }
 363  
 364  /* ASCII-style bar built from block characters, e.g. [#####-----] */
 365  .asciibar { color: #00FF00; font-size: 20px; letter-spacing: 0; }
 366  .asciibar .empty { color: #224422; }
 367  
 368  /* ---------------------------------------------------------------------------
 369     TERMINAL / SCAN OUTPUT
 370     --------------------------------------------------------------------------- */
 371  .terminal {
 372    border: 1px solid #00AA00;
 373    background: #000;
 374    color: #00FF00;
 375    padding: 8px 10px;
 376    min-height: 220px;
 377    font-size: 19px;
 378    line-height: 1.3;
 379    overflow-y: auto;
 380    white-space: pre-wrap;
 381    word-break: break-word;
 382  }
 383  .terminal .ok    { color: #00FF00; }
 384  .terminal .warn  { color: #FFFF00; }
 385  .terminal .err   { color: #FF3030; }
 386  .terminal .dim   { color: #559955; }
 387  .terminal .cyan  { color: #00FFFF; }
 388  .terminal .prompt{ color: #00FFAA; }
 389  .terminal a { color: #00FFFF; }
 390  
 391  /* Interactive terminal input line. */
 392  .term-inputline {
 393    display: flex;
 394    align-items: center;
 395    border-top: 1px solid #113311;
 396    margin-top: 4px;
 397    padding-top: 4px;
 398  }
 399  .term-inputline .ps1 { color: #00FFAA; margin-right: 6px; white-space: nowrap; }
 400  .term-input {
 401    flex: 1;
 402    background: #000;
 403    border: 0;
 404    outline: 0;
 405    color: #00FF00;
 406    font-family: inherit;
 407    font-size: 19px;
 408    caret-color: #00FF00;
 409  }
 410  
 411  /* Blinking block cursor. */
 412  .cursor {
 413    display: inline-block;
 414    width: 10px;
 415    height: 1.05em;
 416    background: #00FF00;
 417    vertical-align: text-bottom;
 418    animation: blink 1s steps(1) infinite;
 419  }
 420  @keyframes blink {
 421    0%, 50%   { opacity: 1; }
 422    50.01%,100%{ opacity: 0; }
 423  }
 424  
 425  /* Typing-caret used by the boot animation lines. */
 426  .typing::after {
 427    content: '_';
 428    animation: blink 1s steps(1) infinite;
 429    color: #00FF00;
 430  }
 431  
 432  /* ---------------------------------------------------------------------------
 433     NEW! marker  (static -- flicker removed per request; only the terminal
 434     typing caret and cursor still blink, as those are core to the CRT feel)
 435     --------------------------------------------------------------------------- */
 436  .blink {
 437    /* Intentionally no animation. Kept as a no-op so any legacy markup that
 438       still references it simply renders static instead of flickering. */
 439  }
 440  .new-gif {
 441    color: #FF0000;
 442    font-weight: bold;
 443    font-size: 16px;
 444    border: 1px solid #FF0000;
 445    padding: 0 3px;
 446    margin-left: 4px;
 447    background: #200;
 448  }
 449  
 450  /* ---------------------------------------------------------------------------
 451     88x31 BUTTON ROW
 452     --------------------------------------------------------------------------- */
 453  .buttons88 {
 454    text-align: center;
 455    margin: 10px 0;
 456    line-height: 2.2;
 457  }
 458  .btn88 { cursor: default; }
 459  
 460  /* ---------------------------------------------------------------------------
 461     FUN FACTS / LISTS
 462     --------------------------------------------------------------------------- */
 463  ul.retro, ol.retro {
 464    margin: 6px 0 6px 22px;
 465  }
 466  ul.retro li { list-style: none; margin: 3px 0; }
 467  ul.retro li::before { content: '> '; color: #00FF00; }
 468  
 469  ul.facts li {
 470    list-style: none;
 471    margin: 4px 0;
 472    padding-left: 20px;
 473    position: relative;
 474  }
 475  ul.facts li::before {
 476    content: '[*]';
 477    color: #FFFF00;
 478    position: absolute;
 479    left: 0;
 480  }
 481  
 482  /* ---------------------------------------------------------------------------
 483     COLLAPSIBLE  (native <details>, styled retro)
 484     --------------------------------------------------------------------------- */
 485  details {
 486    border: 1px solid #1c3a1c;
 487    margin: 4px 0;
 488    background: #040604;
 489  }
 490  details > summary {
 491    cursor: pointer;
 492    padding: 3px 8px;
 493    color: #00FFFF;
 494    list-style: none;
 495    outline: none;
 496    user-select: none;
 497  }
 498  details > summary::-webkit-details-marker { display: none; }
 499  details > summary::before {
 500    content: '[+] ';
 501    color: #00FF00;
 502  }
 503  details[open] > summary::before {
 504    content: '[-] ';
 505    color: #FFFF00;
 506  }
 507  details > summary:hover { background: #0d160d; }
 508  details > .details-body {
 509    padding: 6px 10px;
 510    border-top: 1px dashed #1c3a1c;
 511    color: #B8B8B8;
 512    font-size: 17px;
 513  }
 514  details .impact { color:#FFAA00; }
 515  details .fix    { color:#00FF00; }
 516  
 517  /* ---------------------------------------------------------------------------
 518     FORMS  (guestbook etc.)
 519     --------------------------------------------------------------------------- */
 520  input[type="text"],
 521  input[type="url"],
 522  textarea,
 523  select {
 524    background: #000;
 525    color: #00FF00;
 526    border: 2px solid;
 527    border-color: #000 #444 #444 #000;
 528    font-family: inherit;
 529    font-size: 18px;
 530    padding: 3px 6px;
 531  }
 532  input[type="text"]:focus,
 533  textarea:focus {
 534    border-color: #00AA00;
 535    outline: none;
 536  }
 537  textarea { width: 100%; }
 538  
 539  button,
 540  input[type="submit"],
 541  input[type="button"],
 542  .btn {
 543    background: #001100;
 544    color: #00FF00;
 545    border: 2px solid;
 546    border-color: #00FF00 #004400 #004400 #00FF00;
 547    font-family: inherit;
 548    font-size: 18px;
 549    padding: 3px 12px;
 550    cursor: pointer;
 551    letter-spacing: 1px;
 552  }
 553  button:hover,
 554  input[type="submit"]:hover,
 555  .btn:hover {
 556    background: #00FF00;
 557    color: #000;
 558  }
 559  button:active,
 560  input[type="submit"]:active {
 561    border-color: #004400 #00FF00 #00FF00 #004400;
 562  }
 563  
 564  label { color: #00FFAA; }
 565  
 566  /* ---------------------------------------------------------------------------
 567     FOOTER
 568     --------------------------------------------------------------------------- */
 569  .footer {
 570    border-top: 3px double #00AA00;
 571    margin-top: 16px;
 572    padding: 10px 0;
 573    text-align: center;
 574    font-size: 16px;
 575    color: #999;
 576  }
 577  .footer .promise { color: #00FF00; }
 578  .footer a { color: #00FFFF; }
 579  
 580  /* ---------------------------------------------------------------------------
 581     TWO-COLUMN OLD LAYOUT HELPERS
 582     --------------------------------------------------------------------------- */
 583  .cols { width: 100%; }
 584  .cols td { vertical-align: top; padding: 0 6px; }
 585  .col-side { width: 220px; }
 586  
 587  /* Right-hand "sidebar" boxes. */
 588  .sidebox {
 589    border: 1px solid #333;
 590    margin: 8px 0;
 591    padding: 6px;
 592    font-size: 16px;
 593  }
 594  .sidebox .sidebox-title {
 595    color: #FFFF00;
 596    border-bottom: 1px solid #333;
 597    margin-bottom: 4px;
 598  }
 599  
 600  /* ---------------------------------------------------------------------------
 601     MISC UTILITIES
 602     --------------------------------------------------------------------------- */
 603  .center { text-align: center; }
 604  .right  { text-align: right; }
 605  .mono   { font-family: 'Courier New', monospace; }
 606  .dim    { color: #777; }
 607  .green  { color: #00FF00; }
 608  .cyan   { color: #00FFFF; }
 609  .yellow { color: #FFFF00; }
 610  .red    { color: #FF3030; }
 611  .white  { color: #FFFFFF; }
 612  .nowrap { white-space: nowrap; }
 613  .hidden { display: none; }
 614  .mt0 { margin-top: 0; }
 615  .mb0 { margin-bottom: 0; }
 616  
 617  .tag {
 618    font-size: 14px;
 619    border: 1px solid #444;
 620    padding: 0 4px;
 621    color: #aaa;
 622  }
 623  
 624  /* Small screenshot-frame around ASCII neofetch etc. */
 625  .screen {
 626    border: 1px solid #00AA00;
 627    padding: 8px;
 628    background: #000;
 629    overflow-x: auto;
 630  }
 631  
 632  /* ---------------------------------------------------------------------------
 633     CRT SCANLINE EFFECT  (toggleable -- body gets .crt-on via JS)
 634     Heavier scanlines + a faint vignette + a very slow flicker. When off, only
 635     the subtle always-on wash in `body` remains.
 636     --------------------------------------------------------------------------- */
 637  body.crt-on::before {
 638    content: "";
 639    position: fixed;
 640    top: 0; left: 0; right: 0; bottom: 0;
 641    pointer-events: none;
 642    z-index: 9998;
 643    background: repeating-linear-gradient(
 644      to bottom,
 645      rgba(0,0,0,0)   0px,
 646      rgba(0,0,0,0)   2px,
 647      rgba(0,0,0,0.35) 3px,
 648      rgba(0,0,0,0)   4px
 649    );
 650  }
 651  body.crt-on::after {
 652    content: "";
 653    position: fixed;
 654    top: 0; left: 0; right: 0; bottom: 0;
 655    pointer-events: none;
 656    z-index: 9999;
 657    background: radial-gradient(
 658      ellipse at center,
 659      rgba(0,0,0,0) 55%,
 660      rgba(0,0,0,0.55) 100%
 661    );
 662    animation: crtflicker 6s infinite steps(60);
 663  }
 664  @keyframes crtflicker {
 665    0%   { opacity: 0.92; }
 666    3%   { opacity: 0.85; }
 667    6%   { opacity: 0.95; }
 668    9%   { opacity: 0.88; }
 669    100% { opacity: 0.92; }
 670  }
 671  
 672  /* Respect reduced-motion: kill the flicker/blink for those who ask. */
 673  @media (prefers-reduced-motion: reduce) {
 674    .cursor, .typing::after, .blink,
 675    body.crt-on::after {
 676      animation: none;
 677    }
 678    .cursor { opacity: 1; }
 679  }
 680  
 681  /* CRT toggle control in the corner. */
 682  .crt-toggle {
 683    font-size: 15px;
 684    color: #00FFAA;
 685    cursor: pointer;
 686    border: 1px solid #00AA00;
 687    padding: 1px 6px;
 688    background: #001100;
 689    user-select: none;
 690  }
 691  .crt-toggle:hover { background:#00FF00; color:#000; }
 692  
 693  /* Under-construction easter-egg banner (hidden until revealed by JS/anchor). */
 694  .under-construction {
 695    border: 2px dashed #FFFF00;
 696    background: #141400;
 697    color: #FFFF00;
 698    padding: 8px;
 699    text-align: center;
 700    margin: 10px 0;
 701  }
 702  .under-construction .digger { font-size: 28px; letter-spacing: 2px; }
 703  
 704  /* ---------------------------------------------------------------------------
 705     DONATION / AUTHOR LINKS  (footer)
 706     --------------------------------------------------------------------------- */
 707  .author-links {
 708    border-top: 1px dashed #00AA00;
 709    border-bottom: 1px dashed #00AA00;
 710    margin: 12px 0;
 711    padding: 10px 6px;
 712    text-align: center;
 713  }
 714  .author-links .al-links {
 715    margin-bottom: 8px;
 716    font-size: 17px;
 717    line-height: 2;
 718  }
 719  .author-links .al-links a { white-space: nowrap; }
 720  .author-links img.coindrop {
 721    border-radius: 10px;
 722    height: 57px;
 723    width: 229px;
 724    max-width: 100%;
 725    border: 0;
 726    vertical-align: middle;
 727  }
 728  .author-links .al-donate { margin-top: 4px; }
 729  
 730  /* ---------------------------------------------------------------------------
 731     RESPONSIVE  --  the retro look, but usable on a phone.
 732     Classic layout tables are stacked; wide data tables get their own scroll;
 733     key/value tables collapse to label-over-value on the smallest screens.
 734     --------------------------------------------------------------------------- */
 735  @media (max-width: 760px) {
 736    body { font-size: 18px; padding: 5px; }
 737    .wrap { max-width: 100%; }
 738  
 739    h1 { font-size: 26px; }
 740    h2 { font-size: 22px; }
 741    h3 { font-size: 20px; }
 742    h4 { font-size: 18px; }
 743  
 744    .logo { font-size: 7px; }
 745    .statusbar { font-size: 15px; }
 746    .marquee, marquee { font-size: 16px; }
 747  
 748    /* Header: stack logo above the CRT toggle; keep the wide ASCII logo from
 749       forcing horizontal page scroll by letting it scroll inside a full-width
 750       block instead. */
 751    .hdr-top, .hdr-top > tbody, .hdr-top > tbody > tr,
 752    .hdr-top > tbody > tr > td { display: block; width: 100% !important; }
 753    .hdr-logo { max-width: 100%; overflow-x: auto; }
 754    .hdr-logo .logo { display: block; }
 755    .hdr-toggle { width: 100% !important; text-align: left !important; margin-top: 4px; }
 756  
 757    /* Stack the classic two-column layout tables (index, source, guestbook). */
 758    .cols,
 759    .cols > tbody,
 760    .cols > tbody > tr,
 761    .cols > tbody > tr > td {
 762      display: block;
 763      width: 100% !important;
 764    }
 765    .cols > tbody > tr > td { padding: 0; }
 766    .col-side { width: 100% !important; }
 767  
 768    /* Roomier tap targets in the nav. */
 769    .nav { line-height: 2.3; }
 770    .nav a { display: inline-block; padding: 2px 5px; }
 771    .nav .navitem { display: inline-block; }
 772  
 773    /* Panels + tables tighten up and let text wrap. */
 774    .panel-body { padding: 6px 7px; }
 775    table.data th, table.data td,
 776    table.grid th, table.grid td { font-size: 16px; padding: 3px 5px; }
 777    table.kv td.k { width: 42%; white-space: normal; }
 778  
 779    /* Any table that still overflows can scroll horizontally on its own. */
 780    .screen, .terminal { -webkit-overflow-scrolling: touch; }
 781    .terminal { font-size: 16px; min-height: 200px; }
 782    .term-input { font-size: 16px; }
 783    .ps1, .term-inputline .ps1 { font-size: 15px; }
 784  
 785    /* Export buttons wrap and stay tappable. */
 786    button, input[type="submit"], .btn { padding: 5px 12px; }
 787    .buttons88 { line-height: 2; }
 788  }
 789  
 790  @media (max-width: 480px) {
 791    body { font-size: 17px; padding: 4px; }
 792    .logo { font-size: 5px; line-height: 1; }
 793    .statusbar { font-size: 14px; }
 794    .statusbar .sep { display: none; }
 795    .statusbar span { display: block; }
 796  
 797    h1 { font-size: 23px; }
 798    h2 { font-size: 20px; }
 799  
 800    .nav a { font-size: 18px; padding: 3px 6px; }
 801  
 802    /* Key/value tables collapse: label on its own line, value beneath. */
 803    table.kv,
 804    table.kv tbody,
 805    table.kv tr,
 806    table.kv td {
 807      display: block;
 808      width: 100% !important;
 809    }
 810    table.kv td.k {
 811      border-right: 0;
 812      border-bottom: 0;
 813      padding-bottom: 0;
 814      color: #00FFAA;
 815      width: 100%;
 816    }
 817    table.kv td.v {
 818      padding-top: 0;
 819      padding-bottom: 6px;
 820      border-top: 0;
 821    }
 822    table.kv tr { border-bottom: 1px solid #1c3a1c; }
 823  
 824    /* Forms go full width and stack. */
 825    form table.layout,
 826    form table.layout tbody,
 827    form table.layout tr,
 828    form table.layout td {
 829      display: block;
 830      width: 100%;
 831    }
 832    input[type="text"], input[type="url"] { width: 100%; }
 833  
 834    .footer { font-size: 15px; }
 835    .author-links img.coindrop { height: auto; }
 836  }
 837  
 838  /* Print: drop the CRT nonsense so exports/print look clean. */
 839  @media print {
 840    body { background:#fff; color:#000; }
 841    a { color:#000; }
 842    .nav, .marquee, marquee, .crt-toggle, .buttons88 { display:none; }
 843    body.crt-on::before, body.crt-on::after { display:none; }
 844  }
 845