/* GeoCities circa 1999 — no reset, we're going raw */

body {
  margin: 0;
  padding: 16px 8px 32px;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: #000;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='18' font-size='18'%3E⭐%3C/text%3E%3C/svg%3E") 12 12, auto;
}

/* Tiled star background */
.tile-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #000066;
  background-image:
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23000066'/%3E%3Ccircle cx='8' cy='12' r='1' fill='%23ffffff'/%3E%3Ccircle cx='28' cy='6' r='1.2' fill='%23ffff00'/%3E%3Ccircle cx='35' cy='30' r='1' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='32' r='1' fill='%2300ffff'/%3E%3Ccircle cx='22' cy='22' r='0.8' fill='%23ff00ff'/%3E%3C/svg%3E");
}

.layout {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.mobile-banner {
  display: none;
}

.mobile-only {
  display: none;
}

/* Address bar */
.address-bar {
  background: #c0c0c0;
  border-color: #fff #808080 #808080 #fff !important;
  border-style: outset !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.address-text {
  background: #fff;
  border: 1px inset #808080;
  padding: 3px 6px !important;
  color: #000;
}

/* Marquees */
marquee {
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-weight: bold;
  font-size: 13px;
  color: #ff0;
  background: #000080;
  padding: 4px;
  border: 2px ridge #00f;
}

.marquee-top {
  margin-top: 6px;
}

.marquee-inner {
  font-size: 11px;
  color: #0f0;
  background: #000;
  max-width: 320px;
  margin: 8px auto;
  display: block;
}

/* Construction banner */
.construction {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #ff0;
  background: #000;
  padding: 8px;
  margin: 8px 0;
  border: 3px double #f00;
}

.construction-icon {
  display: inline-block;
  animation: bob 0.6s ease-in-out infinite alternate;
}

@keyframes bob {
  to { transform: translateY(-4px); }
}

/* Rainbow HR — classic GeoCities */
hr.rainbow {
  border: none;
  height: 6px;
  margin: 10px 0;
  background: linear-gradient(
    90deg,
    #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00
  );
  background-size: 200% 100%;
  animation: rainbowMove 3s linear infinite;
}

@keyframes rainbowMove {
  to { background-position: 200% 0; }
}

/* Sidebars */
.sidebar {
  vertical-align: top;
}

.box {
  border: 3px outset;
  padding: 8px;
  margin-bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.box-yellow { background: #ffff99; border-color: #fc0 #990 #990 #fc0; }
.box-pink   { background: #ffccff; border-color: #f9f #939 #939 #f9f; }
.box-green  { background: #ccffcc; border-color: #9f9 #393 #393 #9f9; }
.box-cyan   { background: #ccffff; border-color: #9ff #399 #399 #9ff; }

.box-title {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  margin: 0 0 6px;
  color: #000080;
  font-family: "Comic Sans MS", "Comic Neue", cursive;
}

.link-list {
  list-style: square;
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}

.link-list a {
  color: #0000ee;
}

.link-list a:visited {
  color: #551a8b;
}

.tiny {
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
}

.center { text-align: center; }

/* Main panel */
.main-panel {
  background: #000033;
  border-color: #ff0 #990 #990 #ff0 !important;
  border-style: ridge !important;
}

.welcome-line {
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  color: #0ff;
  font-size: 14px;
  margin: 0 0 12px;
}

.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  color: #ff0;
  font-size: 13px;
  margin: 8px 0 0;
}

/* Name */
.name {
  display: flex;
  justify-content: center;
  font-family: "Comic Sans MS", "Comic Neue", cursive;
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.letter {
  display: inline-block;
  text-shadow:
    2px 2px 0 #000,
    0 0 8px currentColor;
  animation:
    letterRainbow 2s linear infinite,
    letterBounce 1.2s ease-in-out infinite;
  animation-delay:
    calc(var(--i) * 0.15s),
    calc(var(--i) * 0.1s);
}

@keyframes letterRainbow {
  0%   { color: #f00; }
  16%  { color: #ff8800; }
  33%  { color: #ff0; }
  50%  { color: #0f0; }
  66%  { color: #08f; }
  83%  { color: #f0f; }
  100% { color: #f00; }
}

@keyframes letterBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Blink */
.blink {
  animation: blink 0.8s step-start infinite;
}

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

@keyframes blink {
  50% { visibility: hidden; }
}

/* Bravenet counter */
.bravenet-counter {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background: linear-gradient(180deg, #ece9d8, #d4d0c8);
  border: 3px outset #fff;
  padding: 10px 16px 8px;
  box-shadow: 2px 2px 0 #808080;
}

.counter-label {
  font-size: 11px;
  font-weight: bold;
  color: #008;
  margin: 0 0 6px;
}

.counter-digits {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
}

.counter-digits .digit {
  display: inline-block;
  min-width: 1.3em;
  padding: 3px 5px;
  font-family: "Courier New", Courier, monospace;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  color: #c00;
  background: #111;
  border: 2px inset #444;
  text-shadow: 0 0 6px #f00;
}

.counter-since {
  font-size: 9px;
  color: #666;
  margin: 0 0 4px;
}

.counter-brand {
  font-size: 8px;
  color: #333;
  border-top: 1px solid #999;
  padding-top: 4px;
  margin: 0;
}

/* Fake buttons */
.fake-btn {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000;
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 6px 10px;
  cursor: default;
  white-space: nowrap;
}

.fake-btn:hover {
  border-style: inset;
}

.fake-link {
  color: #00e;
  text-decoration: underline;
  cursor: default;
  font-size: 10px;
}

.webring {
  color: #008;
  font-weight: bold;
}

.awards {
  text-align: center;
  font-size: 28px;
  margin-top: 8px;
}

.award {
  display: inline-block;
  animation: spin 4s linear infinite;
}

.award:nth-child(2) { animation-direction: reverse; animation-duration: 3s; }
.award:nth-child(3) { animation-duration: 5s; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin-slow {
  animation: hueSpin 6s linear infinite;
}

@keyframes hueSpin {
  to { filter: hue-rotate(360deg); }
}

.midi {
  font-size: 12px;
  font-weight: bold;
}

/* Footer */
.footer {
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc;
}

.browser-note {
  font-size: 11px;
  line-height: 1.5;
  color: #ff0;
  margin: 0 0 8px;
}

.geocities-footer {
  font-size: 11px;
  color: #0ff;
  margin: 8px 0 4px;
}

.updated {
  font-size: 10px;
  color: #fff;
  margin: 0 0 4px;
}

.copyright {
  font-size: 10px;
  color: #999;
  margin: 0;
}

.inline-icon {
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  *, marquee {
    animation: none !important;
  }

  .blink, .blink-slow {
    animation: none;
  }
}

@media (max-width: 640px) {
  body {
    padding: 8px 6px 24px;
    font-size: 13px;
  }

  .mobile-banner {
    display: block;
    text-align: center;
    font-family: "Comic Sans MS", "Comic Neue", cursive;
    font-weight: bold;
    font-size: 11px;
    color: #0f0;
    background: #909;
    border: 2px dashed #ff0;
    padding: 6px;
    margin-bottom: 6px;
  }

  .mobile-only {
    display: block;
    color: #0ff !important;
  }

  .layout,
  .layout tbody,
  .layout tr,
  .layout > tbody > tr > td,
  .three-col,
  .three-col tbody,
  .three-col tr,
  .three-col td {
    display: block;
    width: 100% !important;
  }

  .address-text {
    font-size: 9px;
    word-break: break-all;
  }

  .construction {
    font-size: 14px;
    padding: 6px;
  }

  marquee {
    font-size: 11px;
  }

  .sidebar {
    margin-bottom: 4px;
  }

  .sidebar .box {
    margin-bottom: 8px;
  }

  .link-list {
    columns: 2;
    column-gap: 12px;
  }

  .main-panel {
    margin-bottom: 8px;
  }

  .name {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }

  .marquee-inner {
    max-width: 100%;
  }

  .counter-digits .digit {
    font-size: 18px;
    min-width: 1.1em;
    padding: 2px 4px;
  }

  .btn-row,
  .btn-row tbody,
  .btn-row tr,
  .btn-row td {
    display: block;
    width: 100% !important;
  }

  .fake-btn {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
    box-sizing: border-box;
  }

  .awards {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .browser-note {
    font-size: 10px;
  }

  hr.rainbow {
    height: 4px;
  }
}

@media (max-width: 380px) {
  .address-text b {
    font-weight: normal;
  }

  .construction {
    font-size: 12px;
  }

  .construction-icon {
    display: block;
    margin: 2px 0;
  }

  .link-list {
    columns: 1;
  }

  .counter-digits .digit {
    font-size: 15px;
  }

  .box-title {
    font-size: 11px;
  }
}