/* ============================================================
   Skin: "geocities" — full mid-90s personal homepage. Tiled starfield,
   Comic Sans, centred everything, marquee, under-construction bar, rainbow
   rules, blinking text, hit counter, Netscape badges. As loud as it gets.
   ============================================================ */
.skin-geocities {
  background-color: #000044;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 70px 90px, #ff0, transparent),
    radial-gradient(2px 2px at 130px 50px, #fff, transparent),
    radial-gradient(1px 1px at 180px 140px, #0ff, transparent),
    radial-gradient(2px 2px at 30px 160px, #f0f, transparent);
  background-size: 200px 180px;
}
.skin-geocities .winframe { border: 4px ridge #9a9; }
.skin-geocities .viewport { background: #008080; }
.skin-geocities .site {
  max-width: 740px; margin: 16px auto; border: 5px ridge #ffcc00; text-align: center;
  font-family: "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
  background-color: #ffffcc;
  background-image: repeating-linear-gradient(45deg, rgba(255,153,0,.06) 0 10px, rgba(0,128,128,.06) 10px 20px);
}

@keyframes gc-blink { 50% { opacity: 0; } }
@keyframes gc-scroll { to { transform: translateX(-100%); } }
@keyframes gc-rainbow { 0% { color: #f00; } 25% { color: #ff0; } 50% { color: #0f0; } 75% { color: #0ff; } 100% { color: #f0f; } }

/* Masthead */
.skin-geocities .masthead { padding: 18px 14px 12px; background: #000044; border-bottom: 3px groove #ffcc00; }
.skin-geocities .brand {
  margin: 0; font: bold 44px "Comic Sans MS", cursive; color: #ffff00;
  text-shadow: 2px 2px 0 #ff00ff, -1px -1px 0 #00ffff, 3px 3px 0 #000;
}
.skin-geocities .brand::after { content: " \2728"; }
.skin-geocities .tag { margin: 8px 0 0; color: #00ff66; font-size: 17px; font-weight: bold; }
.skin-geocities .tag::before { content: "\1F525 "; }
.skin-geocities .tag::after { content: " \1F525"; }

/* Marquee */
.skin-geocities .marquee { overflow: hidden; white-space: nowrap; background: #ff00ff; color: #ffff00; font-weight: bold; font-size: 16px; padding: 5px 0; border-bottom: 2px solid #000; }
.skin-geocities .marquee span { display: inline-block; padding-left: 100%; animation: gc-scroll 22s linear infinite; }

/* Under-construction bar (hazard stripes, blinking) */
.skin-geocities .content::before {
  content: "\1F6A7  UNDER CONSTRUCTION  \1F6A7";
  display: block; font: bold 16px "Comic Sans MS", cursive; color: #ffcc00; background: #000;
  letter-spacing: 2px; padding: 9px 8px; margin: 0 0 18px;
  border-top: 6px solid; border-bottom: 6px solid;
  border-image: repeating-linear-gradient(45deg, #ffcc00 0 10px, #000 10px 20px) 6;
  animation: gc-blink 1.2s step-end infinite;
}

/* Content */
.skin-geocities .content { padding: 18px 24px 22px; }
.skin-geocities .content p { font-size: 16px; line-height: 1.65; color: #000; margin: 0 0 1em; }
.skin-geocities .content h2 { font: bold 26px "Comic Sans MS", cursive; margin: 1.1em 0 .4em; animation: gc-rainbow 2s linear infinite; }
.skin-geocities .content h2::before { content: "\25C8 "; }
.skin-geocities .content h2::after { content: " \25C8"; }
/* Rainbow horizontal rules */
.skin-geocities .content hr { height: 6px; border: 0; margin: 1.4em auto; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.skin-geocities .content a, .skin-geocities .period-links a { color: #0000ee; font-weight: bold; }
.skin-geocities .content a:visited { color: #551a8b; }
.skin-geocities .period-links { font-size: 16px; margin: 0 0 16px; }

/* Images: chunky ridge frames */
.skin-geocities .inline img, .skin-geocities .tile img { border: 4px ridge #cccccc; background: #fff; padding: 3px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.skin-geocities .inline figcaption, .skin-geocities .tile figcaption { font-size: 14px; color: #333; margin-top: 4px; }
.skin-geocities .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; }
.skin-geocities .tile { margin: 0; }

/* Hit counter (LCD odometer) */
.skin-geocities .counter { font: bold 15px "Comic Sans MS", cursive; color: #000; margin: 6px 0 14px; }
.skin-geocities .counter b { font-family: "Courier New", monospace; background: #000; color: #00ff00; padding: 2px 6px; border: 2px inset #888; letter-spacing: 3px; }

/* Footer: webring + Netscape badges */
.skin-geocities .period-foot { background: #000044; color: #66ccff; font-size: 13px; padding: 14px 12px; border-top: 3px groove #ffcc00; }
.skin-geocities .period-foot::before { content: "[ \2190 Previous | Random | Next \2192 ]   \2022   "; color: #ffff00; display: block; margin-bottom: 8px; }
.skin-geocities .period-foot::after { content: "\1F4E7 Sign my guestbook!   \2022   Best viewed in Netscape Navigator 4.0   \2022   [ Netscape Now! ]  [ HTML 3.2 ]  [ Cool Site of the Day ]"; display: block; margin-top: 8px; color: #00ff66; }