/* ============================================================
   JEOCITIES.ORG - Shared Stylesheet
   90s Kitschy / Geocities
   Teal · Navy · Lime · Yellow · Comic Sans · Dithered
   Scales to 2160x1440 via clamp()
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ============================================================
   PALETTE
   ============================================================ */
:root {
  --teal:          #008080;
  --teal-dark:     #006666;
  --teal-bright:   #00cccc;
  --navy:          #000080;
  --navy-mid:      #0000a0;
  --lime:          #00ff00;
  --lime-dim:      #00cc00;
  --yellow:        #ffff00;
  --cyan:          #00ffff;
  --hot-pink:      #ff00ff;
  --orange:        #ff6600;
  --red:           #ff0000;
  --silver:        #c0c0c0;
  --silver-light:  #d8d8d8;
  --silver-dark:   #808080;
  --white:         #ffffff;
  --black:         #000000;
  --content-bg:    #e8e8e8;
}

/* ============================================================
   RESET
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* 14px at 1024px → 20px at 2160px */
  font-size: clamp(14px, 0.9vw, 20px);
}

/* ============================================================
   BODY  ──  teal checkerboard dither (from attached sheet)
   ============================================================ */
body {
  background-color: var(--teal);
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect fill="%23006666" width="2" height="2"/><rect fill="%23008888" x="2" width="2" height="2"/><rect fill="%23008888" y="2" width="2" height="2"/><rect fill="%23006666" x="2" y="2" width="2" height="2"/></svg>');
  color: var(--lime);
  /* Comic Sans is the law */
  font-family: "Comic Sans MS", "Comic Sans", "Courier New", cursive, monospace;
  font-size: 1rem;
  overflow-x: hidden;
}

/* ============================================================
   PAGE WRAPPER  ──  no more fake browser window.
   Just a slightly inset full-width column.
   ============================================================ */
#page-wrapper {
  max-width: clamp(780px, 90vw, 1960px);
  margin: clamp(8px, 0.6vw, 20px) auto;
  border: clamp(3px, 0.2vw, 5px) outset var(--white);
  box-shadow: clamp(4px, 0.3vw, 10px) clamp(4px, 0.3vw, 10px) 0 var(--black);
}

/* ============================================================
   NAVBAR  ──  navy blue, lime green buttons with outset borders
   ============================================================ */
#navbar {
  background: var(--navy);
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect fill="%23000066" width="1" height="1"/><rect fill="%230000aa" x="1" width="1" height="1"/><rect fill="%230000aa" y="1" width="1" height="1"/><rect fill="%23000066" x="1" y="1" width="1" height="1"/></svg>');
  padding: clamp(5px, 0.4vw, 10px) clamp(6px, 0.5vw, 14px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.3vw, 8px);
  align-items: center;
  border-bottom: clamp(3px, 0.22vw, 5px) groove var(--cyan);
}

.nav-btn {
  background: var(--teal);
  color: var(--yellow);
  text-decoration: none;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(11px, 0.8vw, 18px);
  font-weight: bold;
  padding: clamp(3px, 0.22vw, 7px) clamp(10px, 0.8vw, 22px);
  border: clamp(2px, 0.15vw, 3px) outset var(--cyan);
  box-shadow: clamp(1px, 0.08vw, 2px) clamp(1px, 0.08vw, 2px) 0 var(--black);
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.nav-btn:hover {
  background: var(--yellow);
  color: var(--navy);
  border-style: inset;
  text-decoration: none;
}

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

/* ============================================================
   MARQUEE  ──  hot pink bar, yellow glowing text
   ============================================================ */
#marquee-wrap {
  background: var(--hot-pink);
  border-top:    clamp(3px, 0.22vw, 5px) groove var(--yellow);
  border-bottom: clamp(3px, 0.22vw, 5px) groove var(--yellow);
  padding: clamp(6px, 0.45vw, 12px) 0;
  overflow: hidden;
}

#marquee-wrap marquee {
  color: var(--yellow);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(14px, 1vw, 22px);
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--black), 2px 2px 0 var(--red);
  letter-spacing: 0.04em;
}

/* ============================================================
   LAYOUT TABLE  ──  sidebar + content side by side
   ============================================================ */
.layout-table {
  width: 100%;
  border-collapse: collapse;
}

/* ============================================================
   SIDEBAR  ──  silver chrome, with navy blue section boxes
   ============================================================ */
#sidebar {
  background: var(--silver);
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect fill="%23b0b0b0" width="1" height="1"/><rect fill="%23d0d0d0" x="1" width="1" height="1"/><rect fill="%23d0d0d0" y="1" width="1" height="1"/><rect fill="%23b0b0b0" x="1" y="1" width="1" height="1"/></svg>');
  border-right: clamp(3px, 0.22vw, 5px) groove var(--silver-dark);
  padding: clamp(8px, 0.6vw, 16px);
  width: clamp(170px, 15vw, 310px);
  vertical-align: top;
  color: var(--black);
  font-size: clamp(11px, 0.78vw, 17px);
}

/* Navy section box inside sidebar — cribbed from attached .sidebar-section */
.sidebar-section {
  background: var(--navy);
  border: clamp(2px, 0.15vw, 3px) ridge var(--cyan);
  margin-bottom: clamp(10px, 0.75vw, 18px);
  padding: clamp(7px, 0.55vw, 14px);
  box-shadow: 2px 2px 0 var(--black);
}

.sidebar-section-title {
  color: var(--yellow);
  font-size: clamp(12px, 0.88vw, 19px);
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--black);
  margin-bottom: clamp(6px, 0.45vw, 12px);
  text-align: center;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  letter-spacing: 0.04em;
}

/* Sidebar links styled as teal buttons with outset border */
.sidebar-link {
  display: block;
  color: var(--lime);
  background: var(--teal);
  border: clamp(2px, 0.15vw, 3px) outset var(--cyan);
  padding: clamp(3px, 0.22vw, 6px) clamp(4px, 0.3vw, 8px);
  margin: clamp(3px, 0.22vw, 6px) 0;
  text-decoration: none;
  font-size: clamp(11px, 0.75vw, 15px);
  text-align: center;
  box-shadow: 1px 1px 0 var(--black);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.sidebar-link:hover {
  background: var(--yellow);
  color: var(--navy);
  border-style: inset;
  text-decoration: none;
}

/* ============================================================
   HIT COUNTER
   ============================================================ */
#hit-counter {
  background: var(--black);
  color: var(--lime);
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(22px, 1.6vw, 38px);
  letter-spacing: clamp(2px, 0.2vw, 6px);
  padding: clamp(2px, 0.15vw, 5px) clamp(6px, 0.5vw, 14px);
  display: inline-block;
  border: clamp(2px, 0.15vw, 3px) inset var(--silver-dark);
  text-shadow: 0 0 6px var(--lime);
}

/* ============================================================
   UNDER CONSTRUCTION
   ============================================================ */
.under-construction {
  background: var(--yellow);
  border: clamp(2px, 0.18vw, 4px) solid var(--orange);
  padding: clamp(4px, 0.35vw, 10px) clamp(8px, 0.65vw, 18px);
  text-align: center;
  font-weight: bold;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(14px, 1vw, 22px);
  display: inline-block;
  margin: clamp(4px, 0.3vw, 8px) 0;
  color: var(--black);
  box-shadow: 0 -3px 0 0 var(--orange), 0 3px 0 0 var(--orange);
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
#content {
  background: var(--content-bg);
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><rect fill="%23ffffff" width="1" height="1"/><rect fill="%23e0e0e0" x="1" width="1" height="1"/><rect fill="%23f0f0f0" x="2" width="1" height="1"/><rect fill="%23e0e0e0" y="1" width="1" height="1"/><rect fill="%23ffffff" x="1" y="1" width="1" height="1"/><rect fill="%23e0e0e0" x="2" y="1" width="1" height="1"/><rect fill="%23f0f0f0" y="2" width="1" height="1"/><rect fill="%23e0e0e0" x="1" y="2" width="1" height="1"/><rect fill="%23ffffff" x="2" y="2" width="1" height="1"/></svg>');
  padding: clamp(10px, 0.8vw, 22px) clamp(12px, 1vw, 28px);
  vertical-align: top;
  min-height: 500px;
}

/* ============================================================
   SECTION BOX  ──  navy panel inside content (like attached .section)
   ============================================================ */
.section-box {
  background: var(--navy);
  border: clamp(2px, 0.18vw, 4px) ridge var(--cyan);
  margin: clamp(12px, 0.9vw, 22px) 0;
  padding: clamp(10px, 0.75vw, 20px);
  box-shadow: 3px 3px 0 var(--black);
  color: var(--lime);
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(12px, 0.85vw, 18px);
}

/* ============================================================
   SECTION HEADING  ──  yellow with multi-colour bottom line
   ============================================================ */
.section-heading {
  color: var(--yellow);
  font-size: clamp(18px, 1.35vw, 30px);
  font-family: "Arial Black", "Comic Sans MS", sans-serif;
  text-shadow: 2px 2px 0 var(--black), 1px 1px 0 var(--hot-pink);
  margin-bottom: clamp(8px, 0.6vw, 16px);
  padding-bottom: clamp(4px, 0.3vw, 8px);
  letter-spacing: 0.03em;
  /* tri-colour underline */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, var(--yellow), var(--hot-pink), var(--cyan)) 1;
}

/* ============================================================
   DIVIDERS
   ============================================================ */
hr.oldschool {
  border: none;
  border-top: clamp(2px, 0.15vw, 3px) groove var(--silver-dark);
  margin: clamp(10px, 0.75vw, 20px) 0;
}

hr.rainbow {
  border: none;
  height: clamp(4px, 0.28vw, 7px);
  background: linear-gradient(to right,
    #ff0000, #ff6600, #ffff00, #00ff00,
    #00ffff, #ff00ff, #ff0000);
  background-size: 200% 100%;
  margin: clamp(10px, 0.75vw, 20px) 0;
  animation: rainbow-slide 3s linear infinite;
}

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

/* ============================================================
   BLOG POSTS
   ============================================================ */
.post {
  margin-bottom: clamp(4px, 0.3vw, 8px);
}

.post-title {
  font-size: clamp(15px, 1.1vw, 24px);
  font-weight: bold;
  color: var(--navy);
  font-family: "Arial Black", "Comic Sans MS", sans-serif;
}

.post-title a { color: var(--navy); }

.post-meta {
  font-size: clamp(10px, 0.7vw, 15px);
  color: var(--silver-dark);
  margin-bottom: clamp(4px, 0.28vw, 8px);
  font-style: italic;
  font-family: "Courier New", monospace;
}

.post-body {
  font-size: clamp(12px, 0.88vw, 19px);
  line-height: 1.6;
  color: var(--black);
}

.post-body p { margin-bottom: clamp(5px, 0.4vw, 12px); }

.post-body a { color: var(--navy); font-weight: bold; }
.post-body a:hover { color: var(--red); }

/* ============================================================
   BLINK
   ============================================================ */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink { animation: blink 1s step-start infinite; }

/* Slower glow pulse */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.pulse { animation: pulse-glow 2s ease-in-out infinite; }

/* Page load drop-in */
@keyframes scroll-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-in { animation: scroll-in 0.3s ease-out both; }

/* ============================================================
   H1 GLITCH TITLE  ──  use inside the banner SVG or on its own
   Apply class="glitch-title" to any heading
   ============================================================ */
.glitch-title {
  color: var(--red);
  text-shadow:
    2px 0  var(--yellow),
   -2px 0  var(--cyan),
    0  2px  var(--hot-pink),
    0 -2px  var(--lime);
  font-family: "Arial Black", sans-serif;
  font-size: clamp(24px, 2.2vw, 52px);
  letter-spacing: 0.05em;
  filter: drop-shadow(3px 3px 0 var(--black));
  animation: glitch 0.3s infinite;
  text-align: center;
  margin: clamp(10px, 0.8vw, 22px) 0;
}

@keyframes glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(-2px, -2px); }
  60%  { transform: translate(2px, 2px); }
  80%  { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* ============================================================
   ONLINE / STATUS BADGE
   ============================================================ */
.online-badge {
  background: var(--lime);
  color: var(--black);
  padding: clamp(2px, 0.15vw, 4px) clamp(5px, 0.4vw, 10px);
  font-weight: bold;
  display: inline-block;
  border: 2px solid var(--black);
  font-size: clamp(10px, 0.7vw, 14px);
  box-shadow: 2px 2px 0 var(--black);
  animation: pulse-glow 2s infinite;
  font-family: "Comic Sans MS", cursive;
}

/* ============================================================
   STATUSBAR  ──  silver chrome panel row
   ============================================================ */
#statusbar {
  background: var(--silver);
  border-top: 2px solid var(--silver-dark);
  font-size: clamp(10px, 0.72vw, 15px);
  padding: clamp(2px, 0.18vw, 5px) clamp(4px, 0.35vw, 10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-family: "Courier New", monospace;
  color: var(--black);
}

.status-panel {
  border-top:    1px solid var(--silver-dark);
  border-left:   1px solid var(--silver-dark);
  border-right:  1px solid var(--white);
  border-bottom: 1px solid var(--white);
  padding: 1px clamp(5px, 0.4vw, 12px);
  min-width: clamp(50px, 4vw, 120px);
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: var(--navy);
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect fill="%23000066" width="1" height="1"/><rect fill="%230000aa" x="1" width="1" height="1"/><rect fill="%230000aa" y="1" width="1" height="1"/><rect fill="%23000066" x="1" y="1" width="1" height="1"/></svg>');
  text-align: center;
  padding: clamp(8px, 0.65vw, 18px);
  font-size: clamp(11px, 0.75vw, 16px);
  color: var(--lime-dim);
  border-top: clamp(3px, 0.22vw, 5px) groove var(--cyan);
  font-family: "Courier New", monospace;
}

#footer a { color: var(--cyan); }
#footer a:hover { color: var(--yellow); }

/* ============================================================
   TABLES  ──  servers
   ============================================================ */
table.win-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(11px, 0.8vw, 17px);
  font-family: "Courier New", monospace;
}

table.win-table th {
  background: var(--navy);
  color: var(--yellow);
  padding: clamp(4px, 0.3vw, 8px) clamp(6px, 0.55vw, 14px);
  text-align: left;
  font-weight: bold;
  border: 1px solid var(--cyan);
  text-shadow: 1px 1px 0 var(--black);
  letter-spacing: 0.03em;
}

table.win-table td {
  padding: clamp(3px, 0.25vw, 7px) clamp(6px, 0.55vw, 14px);
  border: 1px solid var(--silver-dark);
  vertical-align: top;
  background: var(--white);
  color: var(--black);
}

table.win-table tr:nth-child(even) td { background: #d8f0d8; } /* lime tint */
table.win-table tr:hover td {
  background: var(--navy);
  color: var(--lime);
}
table.win-table tr:hover td a { color: var(--cyan); }

/* ============================================================
   TABLES  ──  downloads
   ============================================================ */
table.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(11px, 0.8vw, 17px);
  font-family: "Courier New", monospace;
}

table.dl-table th {
  background: var(--teal-dark);
  color: var(--yellow);
  padding: clamp(4px, 0.3vw, 8px) clamp(6px, 0.55vw, 14px);
  text-align: left;
  border: 1px solid var(--cyan);
  letter-spacing: 0.03em;
  font-weight: bold;
}

table.dl-table td {
  padding: clamp(3px, 0.25vw, 7px) clamp(6px, 0.55vw, 14px);
  border: 1px solid var(--silver-dark);
  vertical-align: top;
  background: var(--white);
  color: var(--black);
}

table.dl-table tr:nth-child(even) td { background: #d8f0f0; } /* cyan tint */
table.dl-table tr:hover td {
  background: var(--teal-dark);
  color: var(--lime);
}
table.dl-table tr:hover td a { color: var(--yellow); }

/* ============================================================
   COPY / ACTION BUTTONS (like attached .copy-btn)
   ============================================================ */
.copy-btn {
  background: var(--navy-mid);
  color: var(--white);
  border: 2px outset #6666ff;
  padding: clamp(2px, 0.15vw, 4px) clamp(6px, 0.5vw, 12px);
  cursor: pointer;
  font-size: clamp(10px, 0.7vw, 14px);
  margin-left: clamp(4px, 0.3vw, 8px);
  box-shadow: 2px 2px 0 var(--black);
  font-family: "Courier New", monospace;
}

.copy-btn:hover  { background: #3333ff; }
.copy-btn:active { border-style: inset; }

/* ============================================================
   DITHERED IMAGE FRAME
   ============================================================ */
.dither-frame {
  image-rendering: pixelated;
  border-top:    2px solid var(--silver-dark);
  border-left:   2px solid var(--silver-dark);
  border-right:  2px solid var(--white);
  border-bottom: 2px solid var(--white);
  display: block;
}

/* ============================================================
   INNER CONTENT BORDER  ──  for wrapping subsections
   like attached .inner-border
   ============================================================ */
.inner-border {
  border: clamp(2px, 0.18vw, 4px) ridge var(--silver-dark);
  padding: clamp(10px, 0.75vw, 20px);
  margin: clamp(8px, 0.6vw, 16px) 0;
  background: var(--white);
}

/* ============================================================
   SCROLLBARS  ──  Webkit only
   ============================================================ */
::-webkit-scrollbar {
  width:  clamp(14px, 1vw, 22px);
  height: clamp(14px, 1vw, 22px);
}
::-webkit-scrollbar-track { background: var(--silver); }
::-webkit-scrollbar-thumb {
  background: var(--silver);
  border-top:    2px solid var(--white);
  border-left:   2px solid var(--white);
  border-right:  2px solid var(--silver-dark);
  border-bottom: 2px solid var(--silver-dark);
}
::-webkit-scrollbar-button {
  background: var(--silver);
  border-top:    2px solid var(--white);
  border-left:   2px solid var(--white);
  border-right:  2px solid var(--silver-dark);
  border-bottom: 2px solid var(--silver-dark);
  width:  clamp(14px, 1vw, 22px);
  height: clamp(14px, 1vw, 22px);
  display: block;
}