/* ============================================================
   WING I — THE ARCADE
   Recovered personal homepages, 1996–2001. Still updating.
   ============================================================ */

body{
  background:#000080;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px),
    repeating-linear-gradient(-45deg,rgba(255,0,255,.05) 0 18px,transparent 18px 36px),
    radial-gradient(circle at 20% 10%,#2a2ab0,#000050 60%);
  color:#ffff00;
  font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive,var(--sans);
  font-size:15px;
}

.geo-page{
  max-width:820px;margin:0 auto;padding:0 12px 60px;
}

/* the classic centred table */
.geo-table{
  background:#c0c0c0;
  border:4px ridge #ffffff;
  color:#000080;
  margin:14px 0;
  padding:14px;
}
.geo-table h1,.geo-table h2,.geo-table h3{font-family:"Comic Sans MS",cursive;color:#000080}

.geo-banner{
  background:#000;border:3px ridge #ff00ff;padding:10px;text-align:center;margin:12px 0;
}
.geo-banner h1{
  font-family:"Impact","Haettenschweiler","Arial Black",sans-serif;
  font-size:clamp(28px,7vw,64px);margin:0;letter-spacing:.02em;line-height:1;
  color:#ff00ff;
  text-shadow:2px 2px 0 #00ffff,4px 4px 0 #ffff00,-1px -1px 0 #ff0000;
}

.geo-hr{
  height:14px;border:0;margin:16px 0;
  background:repeating-linear-gradient(90deg,#ff0000 0 14px,#ff7f00 14px 28px,#ffff00 28px 42px,#00ff00 42px 56px,#0000ff 56px 70px,#8b00ff 70px 84px);
  animation:geohr 2.4s linear infinite;
}
@keyframes geohr{to{background-position:84px 0}}

.geo-box{
  background:#ffffcc;border:3px double #000080;color:#000080;padding:16px;margin:14px 0;
}
.geo-box.dark{background:#000;color:#00ff00;border-color:#00ff00;font-family:var(--mono)}
.geo-box h3{margin-top:0;color:#cc0000}

.geo-counter{
  display:inline-flex;background:#000;border:2px inset #888;padding:3px;gap:2px;
}
.geo-counter span{
  background:#000;color:#00ff00;font-family:var(--mono);font-size:22px;
  width:19px;text-align:center;border:1px solid #333;
  text-shadow:0 0 8px #00ff00;
}

.geo-btn88{
  display:inline-block;width:88px;height:31px;line-height:31px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:0;text-decoration:none;
  border:1px outset #999;margin:3px;overflow:hidden;white-space:nowrap;
}

.geo-nav{
  background:#000;border:2px ridge #00ffff;padding:10px;text-align:center;margin:12px 0;
}
.geo-nav a{
  color:#00ffff;font-family:var(--mono);font-size:12px;text-decoration:none;
  padding:2px 7px;display:inline-block;
}
.geo-nav a:hover{background:#ff00ff;color:#fff}
.geo-nav a::before{content:"[ "}
.geo-nav a::after{content:" ]"}

.geo-flame{color:#ff6600;text-shadow:0 0 10px #ff0000;animation:flame .18s steps(2) infinite}
@keyframes flame{0%{text-shadow:0 0 10px #ff0000,0 0 20px #ff6600}100%{text-shadow:0 0 14px #ffcc00,0 0 26px #ff0000}}

.geo-star{animation:spin 3s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.underconstruction{
  background:repeating-linear-gradient(45deg,#ffcc00 0 18px,#000 18px 36px);
  padding:5px;margin:14px 0;
}
.underconstruction div{background:#000;color:#ffcc00;padding:12px;text-align:center;font-weight:bold;font-family:var(--mono)}

.geo-guest{
  background:#fff;border:2px inset #ccc;color:#000;padding:12px;margin-bottom:10px;font-size:14px;
}
.geo-guest .gh{color:#000080;font-weight:bold;border-bottom:1px dotted #999;padding-bottom:4px;margin-bottom:6px;font-size:13px}
.geo-guest.old{background:#f4f0e0;color:#443}
.geo-guest.wrong{background:#000;color:#ff0000;border-color:#ff0000;font-family:var(--mono)}

.geo-input{font-family:"Comic Sans MS",cursive;font-size:14px;padding:6px;border:2px inset #999;width:100%;background:#fff;color:#000}
.geo-submit{font-family:"Comic Sans MS",cursive;background:#c0c0c0;border:3px outset #fff;padding:6px 20px;cursor:pointer;font-size:14px;color:#000080;font-weight:bold}
.geo-submit:active{border-style:inset}

a{color:#00ffff}
a:visited{color:#ff00ff}
a:hover{color:#ffff00;background:#ff00ff}

.geo-page .igk-nav{background:rgba(0,0,40,.92);border-bottom-color:#00ffff}
.igk-nav a{color:#8ad}
.igk-nav a:hover{background:#ff00ff;color:#fff}

.webring{
  background:#000;border:2px ridge #ffff00;padding:14px;text-align:center;margin:16px 0;
  font-family:var(--mono);font-size:12px;color:#ffff00;
}
.webring a{color:#00ff00;text-decoration:none;padding:0 6px}
.webring a:hover{background:#ffff00;color:#000}

.awardwall{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

.geo-foot{text-align:center;font-family:var(--mono);font-size:11px;color:#aac;margin-top:26px;line-height:1.9}

/* the dark thing bleeding through the wallpaper */
.bleed{
  position:relative;
}
.bleed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),rgba(0,0,0,.9) 0,transparent 34%);
  opacity:0;transition:opacity 1.2s;
}
.bleed.seeping::after{opacity:1}

[data-calm="1"] body{background-image:radial-gradient(circle at 20% 10%,#2a2ab0,#000050 60%)}
[data-calm="1"] .geo-hr{animation:none}
[data-calm="1"] .geo-flame{animation:none;text-shadow:none}
[data-calm="1"] .geo-star{animation:none}