/* 1990s: tiled starfield, table-ish layout, navy backgrounds with web-safe cyan and teal (the few colours that held on every monitor), Times and Comic Sans. */
html[data-decade="1990s"] body {
  background-color: #000080;
  background-image:
    radial-gradient(#00ffff 1px, transparent 1.5px),
    radial-gradient(#ffffff 1px, transparent 1.5px);
  background-size: 48px 48px, 48px 48px;
  background-position: 0 0, 24px 24px;
  color: #000;
}
html[data-decade="1990s"] .site {
  max-width: 800px; margin: 16px auto; background: #c0c8d8; border: 4px outset #dfe6f2;
  font: 16px/1.35 "Times New Roman", Times, serif;
  display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "head head" "nav main" "foot foot";
}
html[data-decade="1990s"] .site-head { grid-area: head; text-align: center; padding: 12px; background: #000066; color: #fff; }
html[data-decade="1990s"] .site-title { margin: 8px 0; font: bold 30px "Comic Sans MS", "Comic Sans", cursive; color: #00ffff; text-shadow: 2px 2px 0 #0000cc; }
html[data-decade="1990s"] .site-tagline { margin: 0 0 8px; color: #ccffff; font-family: "Courier New", monospace; }
html[data-decade="1990s"] .nineties-marquee { overflow: hidden; white-space: nowrap; background: #00ffff; color: #000080; font-weight: bold; padding: 2px 0; }
html[data-decade="1990s"] .nineties-marquee span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
html[data-decade="1990s"] .construction {
  margin: 10px auto 2px; width: 220px; padding: 6px; color: #000; font: bold 13px Arial, sans-serif;
  background: repeating-linear-gradient(45deg, #ff0 0 12px, #000 12px 24px);
}
html[data-decade="1990s"] .construction span { background: #ff0; padding: 2px 6px; display: inline-block; animation: blink 1s steps(1) infinite; }
html[data-decade="1990s"] .site-nav { grid-area: nav; background: #003399; padding: 8px; border-right: 3px ridge #c0c8d8; }
html[data-decade="1990s"] .site-nav ul { list-style: none; margin: 0; padding: 0; }
html[data-decade="1990s"] .site-nav li { margin: 0 0 8px; }
html[data-decade="1990s"] .site-nav a { color: #00ffff; font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
html[data-decade="1990s"] .site-nav a::before { content: "\25BA"; color: #ffff00; }
html[data-decade="1990s"] .site-main { grid-area: main; padding: 8px 14px; background: #fff; }
html[data-decade="1990s"] a { color: #00e; }
html[data-decade="1990s"] a:visited { color: #551a8b; }
html[data-decade="1990s"] .card { border-bottom: 4px groove #c0c8d8; padding: 6px 0 12px; }
html[data-decade="1990s"] .card-title { font: bold 22px "Times New Roman", serif; color: #008080; text-decoration: underline; margin: 10px 0 6px; }
html[data-decade="1990s"] .stat { border: 2px inset #c0c8d8; background: #000033; color: #00ffff; font-family: "Courier New", monospace; padding: 6px; display: inline-block; }
html[data-decade="1990s"] .stat-value { font-size: 22px; }
html[data-decade="1990s"] .terms dt { color: #008080; }
html[data-decade="1990s"] .uses { list-style-type: square; }
html[data-decade="1990s"] .site-foot { grid-area: foot; text-align: center; padding: 8px 12px 14px; font-size: 14px; }
html[data-decade="1990s"] .site-foot hr { border: 0; height: 6px; background: linear-gradient(90deg, #000066, #008080, #00ffff, #008080, #000066); }
html[data-decade="1990s"] .hitcounter .digits b { display: inline-block; background: #000033; color: #00ffff; font: bold 16px "Courier New", monospace; padding: 1px 4px; margin: 0 1px; }
html[data-decade="1990s"] .blink { color: #f00; font-weight: bold; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
html[data-decade="1990s"] .badge88 { display: inline-block; width: 88px; height: 31px; font: bold 10px/27px Arial, sans-serif; color: #fff; background: linear-gradient(#003, #06c); border: 2px outset #ccc; vertical-align: middle; overflow: hidden; }

@media (max-width: 640px) {
  html[data-decade="1990s"] .site { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "nav" "main" "foot"; margin: 0; border-width: 2px; }
  html[data-decade="1990s"] .site-nav { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-decade="1990s"] .nineties-marquee span { animation: none; padding-left: 0; white-space: normal; }
  html[data-decade="1990s"] .blink, html[data-decade="1990s"] .construction span { animation: none; }
}