/* ============================================================
   DILFORCE DOMINATION — official stylesheet
   Frozen in 2004. Thawed in 2026. No frameworks. No build.

   HOW TO RECOLOUR THE WHOLE SITE:
   Change the values in :root below. That is it.
   ============================================================ */

:root {
  --navy: #071018;
  --navy-2: #0e1c2c;
  --panel: #132338;
  --gold: #d4a017;
  --gold-light: #ffd24a;
  --parchment: #f4ebd4;
  --ink: #1a1a18;
  --teal: #4a7c8c;
  --picasso: #6b9aaa;
  --beacon: #ff8a00;
  --link: #0033cc;
  --visited: #660099;
  --shell-width: 920px;
  --sidebar-width: 178px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-color: var(--navy);
  background-image: url("gfx/stars.svg");
  background-repeat: repeat;
  color: var(--ink);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

/* Subtle falling snow — CSS only, no javascript blizzard */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 34%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 88%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 22%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 61%, rgba(255,255,255,.75) 50%, transparent 51%);
  animation: drift 18s linear infinite;
  opacity: .55;
}

@keyframes drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 240px, 40px 180px, -20px 220px, 10px 200px, -30px 260px, 20px 190px; }
}

.wrap {
  position: relative;
  z-index: 1;
  width: var(--shell-width);
  max-width: 100%;
  margin: 12px auto 24px auto;
  background: var(--navy-2);
  border: 6px outset var(--gold);
  box-shadow: 0 0 24px rgba(0,0,0,.65), 0 0 0 2px #000;
}

.netbar {
  background: #000;
  color: #9aa8b5;
  font-size: 10px;
  text-align: center;
  padding: 4px 8px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--gold);
}
.netbar a { color: var(--gold-light); text-decoration: none; }
.netbar a:hover { text-decoration: underline; }
.netbar .here { color: #fff; font-weight: 700; }

.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- BANNER ---------- */

.banner {
  background: linear-gradient(180deg, #1c3a58 0%, #0b1522 55%, #071018 100%);
  color: var(--gold-light);
  text-align: center;
  padding: 10px 12px 6px 12px;
  border-bottom: 3px solid var(--gold);
}

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

.banner-top img {
  width: 58px;
  height: 44px;
}

.logo {
  margin: 0;
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--gold-light);
  text-shadow:
    2px 2px 0 #000,
    4px 4px 0 #7a5a00,
    0 0 18px rgba(255, 210, 74, .35);
  line-height: 1;
}

.tagline {
  margin: 4px 0 2px 0;
  color: #d7e6f5;
  font-size: 12px;
  letter-spacing: .4px;
}

.tagline b { color: var(--gold-light); }

.marquee-bar {
  background: #000;
  color: var(--gold-light);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.marquee-bar marquee {
  padding: 4px 0;
}

/* ---------- LAYOUT: sidebar + content (looks like a 2004 table) ---------- */

.columns {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.sidebar,
.main {
  vertical-align: top;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--panel);
  color: #e9eef5;
  border-right: 3px solid var(--gold);
  padding: 10px 8px 18px 8px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--parchment);
  color: var(--ink);
  padding: 14px 18px 24px 18px;
}

/* ---------- SIDEBAR BITS ---------- */

.nav-title,
.side-title {
  margin: 8px 0 6px 0;
  padding: 3px 6px;
  background: var(--gold);
  color: #1a1200;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  border: 2px outset #ffe27a;
}

.nav a {
  display: block;
  background: #2a3d55;
  color: var(--gold-light);
  border: 3px outset #6a7d95;
  padding: 7px 8px;
  margin: 5px 0;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}

.nav a:hover,
.nav a:focus {
  background: var(--gold);
  color: #1a1200;
  border-style: inset;
}

.nav a.here {
  background: var(--gold-light);
  color: #1a1200;
  border-style: inset;
  border-color: #a07a10;
}

.counter {
  font-family: "Courier New", Courier, monospace;
  background: #000;
  color: #ff3b3b;
  letter-spacing: 3px;
  padding: 6px 4px;
  border: 3px inset #555;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 6px #ff3b3b;
}

.side-box {
  background: #0b1522;
  border: 3px inset #3a516b;
  padding: 8px;
  margin: 8px 0;
  font-size: 11px;
  color: #d7e6f5;
}

.side-box b { color: var(--gold-light); }

.winamp {
  background: #1a1a1a;
  border: 3px outset #666;
  padding: 6px;
  margin: 8px 0;
  font-size: 10px;
  color: #66ff66;
  font-family: "Courier New", Courier, monospace;
}

.winamp .eq {
  height: 6px;
  background: #003300;
  border: 1px inset #333;
  margin-top: 4px;
  overflow: hidden;
}

.winamp .eq > span {
  display: block;
  height: 100%;
  width: 55%;
  background: linear-gradient(90deg, #00aa00, #eeff00);
  animation: eq 2.8s linear infinite;
}

@keyframes eq {
  0% { width: 20%; }
  40% { width: 80%; }
  70% { width: 45%; }
  100% { width: 20%; }
}

.construction {
  margin: 10px 0 4px 0;
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #1a1200;
  background: repeating-linear-gradient(
    -45deg,
    #ffcc00,
    #ffcc00 8px,
    #111 8px,
    #111 16px
  );
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  border: 2px solid #000;
}

.tiny {
  font-size: 10px;
  color: #b9c8d6;
  text-align: center;
  margin: 8px 0 0 0;
}

/* ---------- CONTENT ---------- */

.main h1, .main h2, .main h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #0b1522;
  margin: 0 0 8px 0;
}

.main h1 {
  font-size: 22px;
  border-bottom: 3px double var(--gold);
  padding-bottom: 4px;
}

.main h2 {
  font-size: 16px;
  background: var(--navy-2);
  color: var(--gold-light);
  display: inline-block;
  padding: 3px 10px;
  border: 3px outset var(--gold);
  margin: 16px 0 8px 0;
}

.main h3 { font-size: 14px; color: #3a2a00; }

.main p { margin: 0 0 10px 0; }

.main a { color: var(--link); }
.main a:visited { color: var(--visited); }
.main a:hover { color: var(--beacon); }

.blink {
  animation: blink 1.1s step-end infinite;
  color: #cc0000;
  font-weight: 700;
}

@keyframes blink {
  50% { opacity: 0; }
}

.new {
  display: inline-block;
  background: #cc0000;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  margin-left: 4px;
  letter-spacing: 1px;
  animation: blink 1.1s step-end infinite;
  vertical-align: middle;
}

.hot {
  display: inline-block;
  background: var(--beacon);
  color: #1a1200;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  margin-left: 4px;
  letter-spacing: 1px;
}

hr.rainbow {
  border: 0;
  height: 6px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    #cc0000, #ff8a00, #ffd24a, #33aa33, #2266cc, #6633aa, #cc0000
  );
}

hr.gold {
  border: 0;
  height: 3px;
  background: var(--gold);
  margin: 12px 0;
}

.photo, .main img.photo {
  display: block;
  max-width: 100%;
  height: auto;
  border: 4px inset #888;
  background: #111;
  padding: 3px;
  margin: 8px auto;
}

.caption {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: #444;
  margin: 0 0 14px 0;
}

.frame {
  background: #1a1a1a;
  border: 6px ridge #c0c0c0;
  padding: 6px;
  margin: 8px 0 4px 0;
}

.news {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf6;
  border: 2px solid #0b1522;
  font-size: 12px;
}

.news th {
  background: var(--navy-2);
  color: var(--gold-light);
  text-align: left;
  padding: 4px 8px;
  font-size: 11px;
}

.news td {
  border-top: 1px solid #d4c7a6;
  padding: 6px 8px;
  vertical-align: top;
}

.news .date {
  white-space: nowrap;
  font-weight: 700;
  color: #5a3a00;
  width: 92px;
}

.facts {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 3px inset #c0c0c0;
  font-size: 12px;
}

.facts th {
  background: #2a3d55;
  color: var(--gold-light);
  text-align: left;
  padding: 5px 8px;
  width: 38%;
  font-weight: 700;
  border-bottom: 1px solid #0b1522;
}

.facts td {
  padding: 5px 8px;
  border-bottom: 1px solid #ddd;
}

.notice {
  background: #fff3b0;
  border: 3px ridge #c9a227;
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 12px;
}

.notice.red {
  background: #ffd6d6;
  border-color: #aa0000;
}

.grid {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 8px;
  margin: 0 -10px;
}

.grid .cell {
  display: table-cell;
  width: 50%;
  vertical-align: top;
  background: #fffdf6;
  border: 3px outset #c0c0c0;
  padding: 8px;
}

.grid .cell img {
  width: 100%;
  height: auto;
  display: block;
  border: 3px inset #999;
}

.album {
  width: 100%;
  border-collapse: collapse;
}

.album td {
  width: 50%;
  vertical-align: top;
  padding: 8px;
}

.album img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px inset #777;
  background: #111;
  padding: 2px;
}

.log {
  background: #fffdf6;
  border: 3px inset #c0c0c0;
  padding: 10px 12px;
  margin: 0 0 14px 0;
}

.log .when {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #5a3a00;
  font-weight: 700;
}

.gb-entry {
  background: #fff;
  border: 2px solid #0b1522;
  margin: 0 0 10px 0;
}

.gb-head {
  background: #2a3d55;
  color: var(--gold-light);
  padding: 4px 8px;
  font-size: 11px;
}

.gb-body {
  padding: 8px;
  font-size: 12px;
}

form.gb {
  background: #fffdf6;
  border: 3px inset #c0c0c0;
  padding: 10px;
}

form.gb label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  margin: 6px 0 2px 0;
}

form.gb input[type="text"],
form.gb textarea {
  width: 100%;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  padding: 4px;
  border: 2px inset #c0c0c0;
  background: #fff;
}

form.gb textarea { min-height: 80px; resize: vertical; }

.btn {
  display: inline-block;
  background: #c0c0c0;
  color: #000;
  border: 3px outset #e0e0e0;
  padding: 4px 14px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}

.btn:active { border-style: inset; }

.btn-gold {
  background: var(--gold);
  border-color: #ffe27a;
  color: #1a1200;
}

.badges img, .badges a img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  margin: 2px;
  border: 0;
  vertical-align: middle;
}

.award {
  background: #fffdf6;
  border: 3px outset #c9a227;
  padding: 8px 10px;
  margin: 0 0 10px 0;
}

.award .cup {
  font-family: Impact, "Arial Black", sans-serif;
  color: #7a5a00;
  font-size: 15px;
  letter-spacing: 1px;
}

.center { text-align: center; }
.muted { color: #555; font-size: 11px; }
.comic {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
}

/* ---------- FOOTER ---------- */

.footer {
  background: #000;
  color: #c9d4e0;
  text-align: center;
  font-size: 11px;
  padding: 10px 8px 12px 8px;
  border-top: 3px solid var(--gold);
}

.footer a { color: var(--gold-light); }
.footer a:visited { color: var(--gold); }

.footer .badges { margin: 8px 0; }

/* ---------- MOBILE (yes, in 2026 we allow this) ---------- */

@media (max-width: 720px) {
  .wrap { margin: 0; border-width: 4px; border-left: 0; border-right: 0; }
  .columns { display: block; }
  .sidebar {
    width: 100%;
    flex: none;
    border-right: 0;
    border-bottom: 3px solid var(--gold);
    padding: 8px 8px 10px 8px;
  }
  .sidebar .nav-title,
  .sidebar .side-title,
  .sidebar .side-box,
  .sidebar .winamp,
  .sidebar .construction,
  .sidebar .counter,
  .sidebar .tiny {
    display: none;
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
  }
  .nav a {
    flex: 1 1 calc(50% - 6px);
    display: block;
    width: auto;
    max-width: calc(50% - 6px);
    margin: 2px;
    padding: 8px 4px;
    font-size: 11px;
    border-width: 2px;
  }
  .logo { font-size: 26px; letter-spacing: 1px; }
  .banner-top img { width: 36px; height: 28px; }
  .tagline { font-size: 11px; padding: 0 8px; }
  .grid, .grid .cell { display: block; width: 100%; }
  .album td { display: block; width: 100%; }
  .main { padding: 12px; }
  .news .date { white-space: normal; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .new, .winamp .eq > span, body::before { animation: none; }
  marquee { animation: none; }
}