/*
SPDX-License-Identifier: MPL-2.0
Copyright (c) 2025 Nick Chiaravalle

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/

/* ===== 90s Tiled Background + Global Look ===== */
html, body { height: 100%; }
body{
  margin:0;
  color:#000;
  font: 14px/1.4 "Trebuchet MS", Verdana, Arial, sans-serif;
  /* Neon starfield-ish tile using gradients (no external gif) */
  background:
    radial-gradient(circle at 12px 10px, rgba(255,255,255,.45), transparent 24px),
    radial-gradient(circle at 22px 26px, rgba(255, 0, 255,.35), transparent 20px),
    radial-gradient(circle at 4px 24px, rgba(0, 255, 234,.35), transparent 16px),
    #000814;
  background-size: 48px 48px;
}

/* Page frame */
.page {
  max-width: 880px;
  margin: 10px auto 40px;
  background: #fffef7;
  border: 4px double #000;
  box-shadow: 0 0 0 8px #ff00ff, 0 0 0 12px #00ffff, 0 0 20px rgba(0,0,0,.6);
}

/* Header */
.header {
  background: linear-gradient(180deg, #ffffcc, #ffd6ff 45%, #caffff);
  border-bottom: 4px groove #000;
  padding: 10px;
  text-align:center;
}
.header h1 {
  font: 900 28px/1 "Comic Sans MS", "Marker Felt", cursive;
  color:#0000aa; text-shadow: 1px 1px 0 #fff, 0 0 6px #00f7ff;
  margin: 6px 0 2px;
}
.header .subtitle {
  font: 700 14px/1 Arial, sans-serif;
  color:#d100d1; text-shadow: 0 0 4px #ffb7ff;
}

/* Navigation */
.nav {
  background:#ffffe0;
  border-top: 4px ridge #000;
  border-bottom: 4px groove #000;
}
.nav table { width:100%; border-collapse: collapse; }
.nav td {
  border-right: 2px dashed #000;
  text-align:center; padding: 8px;
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ffd 6px, #ffd 12px);
}
.nav a { color:#0000ee; text-decoration: underline; font-weight:700; }
.nav td:last-child { border-right:none; }

/* Content */
.content { padding: 14px 16px 20px; }
hr.rule {
  border:0; height:10px; margin: 12px 0;
  background:
    linear-gradient(90deg, #f0f, #0ff, #ff0, #0f0, #00f, #f0f);
}

/* Blink-y bits (tastefully-ish) */
.blink { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Float boxes */
.box {
  background:#fffffc; border:3px outset #000; padding:10px; margin:8px 0;
}
.badge {
  display:inline-block; padding:4px 8px; margin: 6px 0;
  background:#000; color:#0f0; font-weight:700; border:2px inset #0f0;
}

/* Footer & webring */
.footer {
  border-top: 4px ridge #000;
  background: #fffde6;
  padding: 12px; text-align:center; font-size:13px;
}
.webring { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.webring a {
  display:inline-block; padding:6px 10px; border:2px outset #000; background:#eaffff;
  font-weight:700; color:#000; text-decoration:none;
}
.webring a:hover { background:#fff; }

/* Guestbook */
.guest-entry { border:2px dashed #000; padding:8px; background:#fff; margin:8px 0; }
.guest-entry .name { font-weight:900; color:#aa00aa; }
.guest-form input, .guest-form textarea {
  width:100%; padding:8px; margin:4px 0; border:2px inset #000; background:#fffff2;
  font-family: inherit; font-size:14px;
}
.guest-form button {
  padding:8px 12px; background:#0000ee; color:#fff; border:3px outset #000; font-weight:900; cursor:pointer;
}
.counter {
  display:inline-block; background:#000; color:#0f0; padding:4px 6px; border:2px inset #0f0; font: 700 13px/1 monospace;
}

/* Little helper for mini side banners */
.side-image {
  float:right; margin:0 0 8px 12px; border:3px ridge #000; background:#fff;
}