/* ==========================================================================
   retro.css: the 1999 homepage.

   This sheet belongs to /retro alone. It shares nothing with styles.css on
   purpose: the joke only works if not one token of the pressed-blossom
   identity leaks in. So there are no custom properties, no Newsreader, no
   measured spacing, and no tasteful anything. Fonts are whatever the
   visitor's computer already has, the way it was.

   The one thing it does share with the rest of the site is the rulebook
   underneath: nothing here removes a focus ring, hides text from a screen
   reader, flashes faster than once a second, or keeps moving when the
   visitor has asked it not to. Visually bad; technically fine.

   Nothing in this file may reference media/. Every image on the page is
   referenced from index.html so that scripts/stamp-assets.py can give it a
   content token, which is what lets /retro/media/* be cached as immutable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The page
   -------------------------------------------------------------------------- */

html {
  /* The colour under the starfield tile, so the page is navy even before
     the tile arrives or if it never does. */
  background: #000060;
}

body {
  margin: 0;
  padding: 8px;
  color: #000;
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Segoe Print", cursive;
  font-size: 15px;
  line-height: 1.35;
  /* Attribute backgrounds tile from the top left and scroll with the page,
     which is exactly right. */
}

.page {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 4px ridge #c0c0c0;
  box-sizing: border-box;
}

a:link { color: #0000ff; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
a:active { color: #ff0000; background: #ffff00; }
a { text-decoration: underline; }

hr {
  border: 0;
  border-top: 2px inset #808080;
  margin: 12px 8px;
}

.hr-fat {
  border-top: 6px groove #c0c0c0;
  margin: 10px 4px;
}

.hr-dots {
  border-top: 3px dotted #ff00ff;
}

b, strong { font-weight: bold; }

.centre { text-align: center; }
.small { font-size: 13px; }
.tiny { font-size: 11px; font-family: Verdana, Geneva, sans-serif; margin: 4px 0; }
.tiny-caps { font-size: 10px; font-family: Verdana, Geneva, sans-serif; letter-spacing: 1px; margin: 4px 0 0; }
.red { color: #ff0000; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  background: #ffff00;
  color: #000;
  padding: 6px 10px;
  border: 2px solid #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  z-index: 10000;
}

.skip-link:focus { top: 8px; }

/* Focus rings stay. The thick dotted ring is what Navigator drew anyway. */
:focus-visible {
  outline: 3px dotted #ff00ff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   The banner
   -------------------------------------------------------------------------- */

.banner {
  background: #000;
  color: #fff;
  padding: 0 0 12px;
  text-align: center;
  border-bottom: 5px double #ffff00;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #000080;
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 2px solid #00ffff;
}

.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee:focus .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* The rainbow bar is a table with a GIF tile behind it. The tile itself is
   static; the slide is CSS, so it obeys the pause rules like everything
   else. 42px is the tile width, so the loop is seamless. */
.rainbow-bar {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  animation: slide-rainbow 1.6s linear infinite;
}

.rainbow-bar td {
  height: 16px;
  padding: 0;
}

@keyframes slide-rainbow {
  from { background-position: 0 0; }
  to { background-position: 42px 0; }
}

.banner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px 0;
  flex-wrap: wrap;
}

.globe {
  /* Slightly too large. That is the point. */
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

h1.rainbow-text {
  font-family: Impact, "Arial Black", "Arial Narrow", Arial, sans-serif;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 1px;
  margin: 6px 0;
  text-transform: uppercase;
  color: #ffff00;
  max-width: 560px;
}

/* Rainbow text. text-shadow does not work with background-clip: text (the
   shadow shows through the transparent glyphs), hence the drop-shadow
   filter. The h1 sits on black, so every hue in the gradient has
   contrast against it. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .rainbow-text {
    background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0 #fff) drop-shadow(1px 1px 0 #000);
    animation: rainbow-shift 6s linear infinite;
  }
}

@keyframes rainbow-shift {
  from { background-position: 0 0; }
  to { background-position: 200% 0; }
}

.subtitle {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  color: #00ffff;
  margin: 4px 8px 8px;
}

.banner-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ff0000;
  font-size: 14px;
}

.bounce {
  animation: bounce 0.7s ease-in-out infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}

.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

.twinkle {
  image-rendering: pixelated;
}

.browser-note {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 6px 12px;
  color: #c0c0c0;
}

.browser-note a:link { color: #66ccff; }
.browser-note a:visited { color: #cc99ff; }
.ie { color: #ffcc00; font-weight: bold; }
.netscape { color: #66ff66; font-weight: bold; }

/* The visitor counter: green digits in black boxes, the way every free
   counter service drew them. It is a button in the banner because clicking
   it does something; the footer copy is the same look on a span. */
.counter-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 6px;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.counter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #808080;
  border: 2px outset #c0c0c0;
  font: inherit;
  cursor: pointer;
}

.counter span {
  display: inline-block;
  width: 14px;
  padding: 2px 0;
  background: #000;
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  border: 1px inset #404040;
}

.counter-note { color: #c0c0c0; font-size: 11px; }

.footer .counter-block { color: #000; }

.enter-row { margin: 8px 0 4px; }

.big-button {
  display: inline-block;
  font-family: "Arial Black", Impact, Arial, sans-serif;
  font-size: 16px;
  padding: 8px 18px;
  background: #ff00ff;
  color: #ffff00;
  border: 4px outset #ff80ff;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #800080;
}

.big-button:hover { background: #ff40ff; color: #fff; }
.big-button:active { border-style: inset; }

a.big-button:link, a.big-button:visited { color: #ffff00; }

.small-button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #fff;
  cursor: pointer;
}

.small-button:active { border-style: inset; }

.calm-row {
  margin: 8px 0 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #c0c0c0;
}

.calm { cursor: pointer; }

/* The pause switch. Pure CSS, so it works with the script blocked; the
   script also reads it before drawing sparkles. */
html:has(#calm:checked) .page *,
html:has(#calm:checked) .page *::before,
html:has(#calm:checked) .page *::after {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   The notice
   -------------------------------------------------------------------------- */

.notice {
  margin: 10px 8px;
  border: 4px double #ff0000;
  background: #ffffcc;
  padding: 6px 10px 10px;
  font-family: "Times New Roman", Times, serif;
}

.notice legend {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 20px;
  color: #ff0000;
  background: #ffff00;
  padding: 0 10px;
  border: 2px solid #000;
  letter-spacing: 1px;
}

.notice-table {
  width: 100%;
  border-collapse: collapse;
}

.notice-icon {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

.notice-list {
  margin: 4px 0;
  padding-left: 22px;
  font-size: 15px;
}

.notice-list li { margin: 3px 0; }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 0;
}

.badge {
  display: inline-block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border: 2px outset #fff;
  text-transform: uppercase;
}

.badge-blue { background: #0000ff; color: #fff; }
.badge-grey { background: #c0c0c0; color: #000; }
.badge-green { background: #008000; color: #fff; }
.badge-red { background: #ff0000; color: #fff; }
.badge-yellow { background: #ffff00; color: #000; }

/* --------------------------------------------------------------------------
   The two columns
   -------------------------------------------------------------------------- */

.layout {
  width: 100%;
  border-spacing: 6px;
}

.layout > tbody > tr > td {
  vertical-align: top;
}

.sidebar {
  width: 190px;
}

.panel {
  border: 3px outset #c0c0c0;
  background: #e0e0ff;
  margin-bottom: 8px;
  padding: 0 0 6px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.panel-title {
  margin: 0 0 6px;
  padding: 3px 6px;
  background: #000080;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.panel p { margin: 4px 6px; }

/* Each panel gets its own header colour, because in 1999 each one was
   made on a different day. */
.panel-mood .panel-title { background: #800080; }
.panel-status .panel-title { background: #008000; }
.panel-unicorn .panel-title { background: #ff00ff; }
.panel-stats .panel-title { background: #ff0000; }
.panel-weather .panel-title { background: #008080; }
.panel-cat .panel-title { background: #000; }

.panel-mood { background: #ffe0ff; border-color: #ff80ff; }
.panel-unicorn { background: #fff0ff; }
.panel-stats { background: #ffffe0; border-width: 4px; }
.panel-weather { background: #e0ffff; }
.panel-cat { background: #f0f0f0; padding-bottom: 2px; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

.nav-list li { margin: 4px 0; }

.mood-line { font-size: 13px; }
.mood-line b { color: #800080; text-transform: uppercase; }
.mood-actions { text-align: center; }

.online { color: #008000; }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #00ff00;
  border: 1px solid #000;
  border-radius: 50%;
  animation: blink 1s steps(2, start) infinite;
}

.unicorn-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 !important;
}

.unicorn {
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  animation: sway 1.2s ease-in-out infinite alternate;
}

/* Drawn at 64x48, shown at 96x72: slightly too large for the panel, which
   is how every unicorn on every homepage was placed. */
.unicorn img { image-rendering: pixelated; display: block; width: 96px; height: 72px; }

@keyframes sway {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}

.stats {
  width: calc(100% - 12px);
  margin: 0 6px;
  border-collapse: collapse;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}

.stats th, .stats td {
  border: 1px solid #808080;
  padding: 2px 4px;
  text-align: left;
}

.stats th { background: #ffff80; font-weight: bold; }
.stats td { background: #fff; text-align: right; }

.weather {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  color: #008080;
  font-size: 14px;
}

/* The main column */

.content { }

.box {
  border: 3px ridge #808080;
  background: #fff;
  padding: 0 10px 10px;
  margin-bottom: 4px;
}

.box-title {
  font-family: "Arial Black", Impact, Arial, sans-serif;
  font-size: 20px;
  color: #0000ff;
  text-decoration: underline;
  text-align: center;
  margin: 8px 0 10px;
  letter-spacing: 1px;
}

#projects .box-title { color: #ff0000; }
#links .box-title { color: #008000; text-decoration: none; border-bottom: 3px double #008000; }
#downloads .box-title { color: #800080; font-family: "Times New Roman", Times, serif; font-size: 24px; }

.lead {
  font-size: 18px;
  font-weight: bold;
  color: #ff00ff;
  text-align: center;
}

.shout {
  text-align: center;
  background: #ffff00;
  border: 2px dashed #ff0000;
  padding: 6px;
}

.projects {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  border: 3px outset #c0c0c0;
  background: #c0c0c0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.projects th {
  background: #000080;
  color: #fff;
  padding: 4px;
  text-align: left;
  font-size: 12px;
}

.projects td {
  background: #fff;
  padding: 5px 4px;
  vertical-align: top;
}

.projects tr:nth-child(even) td { background: #e8e8ff; }

.projects .icon { width: 20px; text-align: center; }
.projects .icon img { image-rendering: pixelated; }
/* Two of the projects are named by their domain, which is longer than the
   column. Break only where a break is needed, so the short names stay on
   one line and whydoesrainsmellgood.com wraps rather than widening the
   column and squeezing the description out of the table. */
.projects .name { width: 120px; font-weight: bold; overflow-wrap: break-word; }
.projects .url { font-weight: normal; font-size: 10px; color: #808080; white-space: normal; word-break: break-all; }
.projects .status { width: 60px; text-align: center; }

.text-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 4px;
  background: #808080;
  color: #fff;
  border: 1px solid #000;
}

.badge-cool { background: #00ffff; color: #000; }
.badge-code { background: #000; color: #00ff00; font-family: "Courier New", Courier, monospace; }

/* The webring's "you are here" marker walks the rows. */
.projects tr.here td {
  background: #ffff80;
  outline: 3px solid #ff00ff;
  outline-offset: -3px;
}

.projects tr.here .name a::before {
  content: "\2192 ";
  color: #ff00ff;
}

.cool-links {
  list-style: none;
  padding: 0 4px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.cool-links li { margin: 6px 0; }

.downloads {
  width: 100%;
  border-collapse: collapse;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

.downloads td {
  padding: 6px;
  vertical-align: middle;
  border-bottom: 1px dotted #808080;
}

.downloads td:first-child { width: 70px; text-align: center; }
.downloads img { image-rendering: pixelated; }

/* --------------------------------------------------------------------------
   Under construction
   -------------------------------------------------------------------------- */

.construction { margin: 0 8px; }

.hazard-frame {
  width: 100%;
  border-collapse: collapse;
  animation: slide-hazard 1s linear infinite;
}

@keyframes slide-hazard {
  from { background-position: 0 0; }
  to { background-position: 16px 0; }
}

.hazard-frame > tbody > tr > td { padding: 14px; }

.construction-inner {
  background: #000;
  color: #ffff00;
  border: 3px solid #ffff00;
  padding: 6px 10px 10px;
  text-align: center;
}

.lights {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.lights span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff0000;
  border: 1px solid #fff;
  animation: flash 1s steps(1) infinite;
}

.lights span:nth-child(even) { animation-delay: 0.5s; }

@keyframes flash {
  0% { background: #ff0000; }
  50% { background: #ffff00; }
}

.construction-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.construction-row img { image-rendering: pixelated; }

.flip { transform: scaleX(-1); }

.construction-title {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  margin: 0;
  color: #ffff00;
  text-shadow: 3px 3px 0 #ff0000;
}

.construction-note {
  font-family: "Times New Roman", Times, serif;
  color: #fff;
  font-size: 15px;
  margin: 8px auto;
  max-width: 560px;
}

.last-updated {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: #00ff00;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Guestbook
   -------------------------------------------------------------------------- */

.guestbook {
  margin: 0 8px;
  background: #fff0f5;
  border-color: #ff69b4;
}

.guestbook .box-title {
  color: #ff1493;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.guestbook .box-title img { image-rendering: pixelated; }

.entries {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.entries li {
  background: #fff;
  border: 2px inset #c0c0c0;
  margin: 6px 0;
  padding: 4px 8px;
}

.entry-meta {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #808080;
  margin: 2px 0;
}

.entry-meta b { color: #0000ff; }

.entry-text {
  margin: 2px 0 4px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Webring
   -------------------------------------------------------------------------- */

.webring {
  margin: 0 8px;
}

.webring-table {
  width: 100%;
  border: 3px double #000;
  border-collapse: collapse;
  background: #e8e8e8;
  font-family: "Times New Roman", Times, serif;
}

.webring-table td { padding: 8px; vertical-align: middle; }

.webring-logo { width: 44px; text-align: center; }
.webring-logo img { image-rendering: pixelated; }

.webring-body { text-align: center; }

.webring-title {
  font-size: 18px;
  margin: 0 0 4px;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  color: #000080;
}

.webring-status {
  font-size: 13px;
  margin: 2px 0 6px;
}

.webring-links {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   Button wall
   -------------------------------------------------------------------------- */

.buttons {
  margin: 0 8px;
  text-align: center;
}

.buttons .box-title { color: #ff8000; text-decoration: none; }

.button-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 4px;
  margin: 8px 0;
}

.button-wall img {
  image-rendering: pixelated;
  border: 1px solid #000;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: #c0c0c0;
  border-top: 3px solid #000;
  padding: 0 8px 10px;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

.footer p { margin: 5px 0; }

.frontpage-box {
  margin: 10px auto;
  max-width: 420px;
  background: #fff;
  border: 3px inset #808080;
  padding: 6px;
}

.frontpage-line {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #000080;
  margin: 0;
}

.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.footer-icons img { image-rendering: pixelated; }

/* --------------------------------------------------------------------------
   The message box
   -------------------------------------------------------------------------- */

.win-box {
  padding: 0;
  border: 2px outset #fff;
  background: #c0c0c0;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  color: #000;
  min-width: 260px;
  max-width: min(360px, 90vw);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.win-box::backdrop {
  background: rgba(0, 0, 96, 0.55);
}

.win-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  font-size: 12px;
}

.win-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 8px;
}

.win-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #000080;
  border: 2px solid #000080;
  font: bold 18px/28px "Times New Roman", Times, serif;
  text-align: center;
  font-style: italic;
}

.win-text { margin: 0; font-size: 13px; }

.win-actions {
  text-align: center;
  padding: 4px 12px 12px;
}

.win-button {
  font: 12px Tahoma, "MS Sans Serif", Arial, sans-serif;
  min-width: 76px;
  padding: 3px 12px;
  background: #c0c0c0;
  border: 2px outset #fff;
  cursor: pointer;
}

.win-button:active { border-style: inset; }

/* --------------------------------------------------------------------------
   Sparkles and EXTREME INTERNET MODE
   -------------------------------------------------------------------------- */

.sparkle-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.sparkle-layer span {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: #ffff00;
  opacity: 0;
}

.sparkle-layer span.on {
  animation: sparkle 500ms ease-out forwards;
}

@keyframes sparkle {
  0% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.2) rotate(90deg) translateY(12px); }
}

.extreme-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9998;
  text-align: center;
  background: #ff00ff;
  color: #ffff00;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  padding: 6px;
  border-bottom: 4px solid #00ffff;
}

html.extreme .page {
  outline: 10px solid #ff0000;
  outline-offset: -2px;
  animation: extreme-outline 2s linear infinite;
}

@keyframes extreme-outline {
  0% { outline-color: #ff0000; }
  17% { outline-color: #ff8000; }
  33% { outline-color: #ffff00; }
  50% { outline-color: #00ff00; }
  67% { outline-color: #00ffff; }
  83% { outline-color: #0000ff; }
  100% { outline-color: #ff00ff; }
}

html.extreme .rainbow-text { animation-duration: 1s; }
html.extreme .rainbow-bar { animation-duration: 0.4s; }
html.extreme .unicorn { animation-duration: 0.4s; }

/* --------------------------------------------------------------------------
   Narrow screens. The site stays a 1999 desktop site that has been squashed,
   not a 2026 card layout: the columns stack, the graphics stay, the counter
   stays, the marquee stays.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body { padding: 4px; }
  .layout, .layout > tbody, .layout > tbody > tr, .layout > tbody > tr > td {
    display: block;
    width: auto;
    box-sizing: border-box;
  }
  .layout { padding: 4px; }
  .sidebar { margin-bottom: 8px; }
  h1.rainbow-text { font-size: 26px; }
  .projects .name { width: auto; white-space: normal; }
  .projects .desc { font-size: 12px; }
  .construction-title { font-size: 24px; }
  .notice-icon { display: none; }
  .win-box { min-width: 0; }
}

@media (max-width: 420px) {
  h1.rainbow-text { font-size: 22px; }
  .projects thead { display: none; }
  .projects, .projects tbody, .projects tr, .projects td { display: block; }
  .projects tr { margin-bottom: 4px; border: 1px solid #808080; }
  .projects td { padding: 3px 6px; }
  .projects .icon { display: inline-block; width: auto; }
  .projects .name { display: inline-block; }
  .projects .status { text-align: left; width: auto; }
  .big-button { font-size: 14px; padding: 6px 10px; }
  .counter span { width: 12px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Reduced motion. Every animation is switched off by name, the marquee
   becomes a paragraph, and index.html swaps each animated GIF for its
   first frame with <picture>. The script reads the same query before it
   draws a single sparkle.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; }
  .marquee-track { animation: none; padding-left: 0; }
  .rainbow-bar, .hazard-frame { animation: none; }
  .rainbow-text { animation: none; }
  .bounce, .blink, .dot, .lights span, .unicorn { animation: none; }
  .blink { visibility: visible; }
  .sparkle-layer { display: none; }
  html.extreme .page { animation: none; outline-color: #ff00ff; }
}

@media (forced-colors: active) {
  .rainbow-text { color: CanvasText; background: none; -webkit-text-fill-color: CanvasText; filter: none; }
  .counter span { border: 1px solid CanvasText; }
}