/* The GeoCities homepages: one layout, six themes (flames, space, underwater, hacker, pastel, 90s corporate) */
.gc { --bg: #000; --ink: #fff; --accent: #ff0; --box: rgba(40, 0, 60, .55); --edge: #f0f; --tick: #0ff; --link: #7df9ff; --vlink: #ff9cf5; --hfont: PS2P, monospace; --bfont: Comic, 'Comic Sans MS', cursive; --h2: #ff0;
  position: relative; min-height: 100%; background: var(--bg); color: var(--ink); font: 400 19px/1.4 var(--bfont); overflow: hidden; -webkit-font-smoothing: antialiased; }
.gc a { color: var(--link); }
.gc a:visited { color: var(--vlink); }
.gc .gc-wrap { position: relative; z-index: 1; width: min(1000px, 100%); margin: 0 auto; padding: 18px 20px 40px; text-align: center; }
.gc-marq { overflow: hidden; white-space: nowrap; font: 400 14px/1 var(--hfont); color: #0f0; margin: 4px 0 14px; }
.gc-marq span { display: inline-block; padding-left: 100%; animation: marq 22s linear infinite; }
@keyframes marq { to { transform: translateX(-100%); } }
.gc-head { border: 4px ridge var(--accent); background: #000; aspect-ratio: 7 / 3; overflow: hidden; }
.gc-head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-pix { position: relative; width: 100%; height: 100%; }
.gc-pixhead { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.gc-pixtag { position: absolute; left: 8px; top: 8px; background: #000; color: #ff0; font: 400 12px/1 var(--hfont); padding: 6px 8px; border: 1px solid #ff0; }
.gc-pixtag::before { content: ''; display: inline-block; width: 8px; height: 8px; background: #ff0; margin-right: 6px; animation: blink 1s steps(1) infinite; }
@keyframes ucmove { to { background-position: 62px 0; } }
@keyframes blink { 50% { opacity: 0; } }
.gc-title { font: 400 clamp(26px, 5vw, 50px)/1.2 var(--hfont); margin: 22px 0 8px; word-break: break-word; background: linear-gradient(180deg, #fff, #ffe066 40%, #ff7a00 70%, #ff2a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(3px 3px 0 #6a00ff); }
.gc-title .cur { -webkit-text-fill-color: #0f0; animation: blink 1s steps(1) infinite; font-style: normal; }
.gc-tagline { font-style: italic; margin: -2px 0 10px; }
.gc-ticks { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tick { display: inline-block; border: 3px ridge var(--tick); padding: 9px 16px; font: 400 13px/1.5 var(--hfont); color: var(--tick); }
.tick a { color: inherit; }
.gc-rule { height: 8px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red); background-size: 200% 100%; margin: 22px 0; animation: rulemove 6s linear infinite; }
@keyframes rulemove { to { background-position: -200% 0; } }
.gc .box { border: 3px ridge var(--edge); padding: 16px; background: var(--box); text-align: left; min-width: 0; }
.gc .box h2 { color: var(--h2); font: 400 13px/1.4 var(--hfont); margin: 0 0 12px; letter-spacing: .5px; }
.gc .box p { margin: 0 0 10px; }
.gc-grid3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.gc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.gc-hosting { margin-top: 12px; }
.gc-about { font-size: 20px; }
.gc-small { font-size: 15px; opacity: .85; }
.new { color: #f00; background: #ff0; font: 400 9px/1 var(--hfont); padding: 3px 4px; margin-left: 6px; vertical-align: 2px; animation: blink .8s steps(1) infinite; }
.counter { display: inline-flex; gap: 3px; margin: 2px 0 12px; }
.counter span { background: #000; color: #0f0; box-shadow: inset 2px 2px #444, inset -2px -2px #222; font: 400 20px/1 var(--hfont); padding: 7px 5px; }
.counter.roll span { animation: roll .5s steps(5) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes roll { from { transform: translateY(-40%); opacity: 0; } }
.gc-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 16px; }
.gc-facts dt { opacity: .8; }
.gc-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.gb-mini .gb-e { padding: 4px 0; }
.gb-e { padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--edge) 60%, transparent); }
.gb-e:last-child { border-bottom: 0; }
.gb-who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.gb-who b { color: var(--accent); font-weight: 700; }
.gb-who span { opacity: .7; margin-left: auto; }
.gb-tag { font: 700 11px/1 var(--ui); font-style: normal; background: #00a000; color: #fff; padding: 2px 5px; }
.gb-tag.web { background: #c00000; }
.gb-t { overflow-wrap: anywhere; }
.gb-list { max-height: 420px; overflow: auto; margin-top: 12px; }
.gb-form { display: grid; gap: 8px; }
.gb-form textarea { color: #000; font: 400 16px/1.35 var(--ui); }
.gb-go { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gc .btn { color: #000; font-family: var(--ui); font-size: 15px; }
.gc .btn.big { font-size: 17px; width: 100%; }
.trade { display: grid; gap: 10px; color: var(--ink); }
.trade-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.trade .input { color: #000; font: 400 17px var(--ui); }
.trade .input#gc-amt { flex: 1; min-width: 120px; }
.trade-q { font-size: 16px; min-height: 44px; }
.trade-q .err, .gc .err { color: #ff6b6b; }
.thermo-bar { height: 34px; background: #fff; box-shadow: var(--sunken); padding: 4px; position: relative; margin-bottom: 14px; }
.thermo-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff2a00 0 14px, #ff7a00 14px 26px, transparent 26px 28px); }
.thermo-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px/1 var(--hfont); color: #000; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; }
.ipo-done { display: flex; gap: 16px; align-items: center; }
.ipo-done .big { font: 400 18px/1.3 var(--hfont); color: var(--accent); }
.ipo-done .bell { flex: none; }
.host-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.host-steps li { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px; border: 2px dashed color-mix(in srgb, var(--edge) 60%, transparent); opacity: .7; }
.host-steps li::before { counter-increment: s; content: counter(s); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; background: var(--edge); color: #000; font: 400 13px var(--hfont); }
.host-steps li.now { opacity: 1; border-style: solid; }
.host-steps li.done { opacity: 1; }
.host-steps li.done::before { content: '✓'; background: #0c0; }
.host-steps li > span, .host-steps .pings { grid-column: 2; font-size: 15px; }
.host-steps li > .btn { grid-column: 3; grid-row: 1 / span 2; }
.pings { font: 400 16px/1.25 VT, monospace; }
.pings .wait { opacity: .5; }
.gc-subs { margin: 0 0 12px; padding-left: 20px; }
.gc-links { margin: 0; padding-left: 22px; }
.gc-links li { margin: 4px 0; }
.gc-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.gc-table td { padding: 4px 6px; border-bottom: 1px dotted color-mix(in srgb, var(--edge) 50%, transparent); }
.gc-table .r { text-align: right; white-space: nowrap; }
.gc-ca { display: inline-flex; gap: 10px; align-items: center; margin: 22px auto 0; background: #000; padding: 6px 8px 6px 12px; border: 2px inset #808080; max-width: 100%; }
.gc-ca span { font: 700 14px 'Lucida Console', Monaco, monospace; color: #ff0; flex: none; }
.gc-ca code { white-space: nowrap; font: 400 clamp(9.5px, 2.7vw, 15px) 'Lucida Console', Monaco, monospace; color: #0f0; }
.th-corporate .gc-ca { display: flex; width: fit-content; margin-left: 0; }
@media (max-width: 760px) { .gc-ca { gap: 6px; padding: 5px 6px; } .gc-ca span { display: none; } }
.gc-ring { display: grid; justify-items: center; gap: 6px; text-align: center; font: 400 12px/1.6 var(--hfont); }
.ring-bar { border: 2px outset #c0c0c0; background: #c0c0c0; color: #000; padding: 6px 10px; max-width: 100%; }
.ring-bar a { color: #0000ee; font-weight: 700; }
.ring-note { font-size: 12px; }
.ring-list { font-size: 11px; opacity: .9; }
.ring-list a { text-decoration: underline; }
.gc-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 22px 0 16px; }
.b88 { width: 88px; height: 31px; display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; gap: 1px; font: 700 10px/1 var(--ui); border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #555; letter-spacing: .3px; overflow: hidden; }
.b88 i { font-style: normal; font-weight: 400; font-size: 9px; }
.b-netscape { background: linear-gradient(180deg, #003 0, #00307a 100%); color: #fff; }
.b-netscape i { color: #ff0; animation: blink 1s steps(1) infinite; }
.b-dotcom { background: #008080; color: #ff0; }
.b-sol { background: linear-gradient(90deg, #9945ff, #14f195); color: #000; }
.b-np { background: #fff; color: #000080; }
.b-800 { background: #000; color: #0f0; }
.gc-foot { display: grid; gap: 10px; justify-items: center; }
.uc { font: 400 12px/1 var(--hfont); color: #000; background: repeating-linear-gradient(45deg, #ff0 0 14px, #000 14px 28px); padding: 10px; display: inline-block; }
.uc span { background: #ff0; padding: 4px 8px; display: inline-block; }

/* ---------------------------------------------------------------- flames */
.th-flames { --bg: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ccircle cx='12' cy='18' r='1' fill='%23fff'/%3E%3Ccircle cx='70' cy='40' r='1.3' fill='%23ff0'/%3E%3Ccircle cx='40' cy='75' r='.9' fill='%230ff'/%3E%3C/svg%3E"); }
.th-flames .gc-wrap::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: radial-gradient(12px 30px at 10px 60px, #ff2a00 60%, transparent 62%) 0 0 / 22px 60px repeat-x, radial-gradient(9px 22px at 16px 60px, #ffb000 60%, transparent 62%) 0 0 / 30px 60px repeat-x; opacity: .85; animation: flick .4s steps(2) infinite; pointer-events: none; }
@keyframes flick { 50% { transform: scaleY(.85); transform-origin: bottom; } }

/* ---------------------------------------------------------------- space */
.th-space { --bg: radial-gradient(circle at 85% 12%, #3b1d6e 0, transparent 30%), radial-gradient(circle at 10% 80%, #0a2a5e 0, transparent 35%), #02021a; --edge: #0ff; --box: rgba(0, 20, 60, .6); --tick: #ff9ad5; --h2: #7df9ff; --accent: #c0c0ff; --link: #9ff; }
.th-space::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #fff, transparent), radial-gradient(2px 2px at 200px 150px, #9ff, transparent), radial-gradient(1px 1px at 300px 40px, #fff, transparent), radial-gradient(1px 1px at 60px 190px, #ff9ad5, transparent); background-size: 340px 220px; animation: twinkle 3s steps(3) infinite; }
@keyframes twinkle { 50% { opacity: .5; } }
.th-space .gc-title { background: linear-gradient(180deg, #fff 0, #c8d8ff 45%, #5a6aa0 50%, #e8f0ff 70%, #8ff 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(3px 3px 0 #ff00aa); }
.th-space .gc-wrap::after { content: ''; position: absolute; right: -30px; top: 330px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd27a, #c26b00 70%); box-shadow: 0 0 0 10px transparent, inset -14px -10px 0 rgba(0, 0, 0, .25); z-index: -1; }
.th-space .gc-rule { background: linear-gradient(90deg, transparent, #0ff, #f0f, #0ff, transparent); height: 4px; }

/* ---------------------------------------------------------------- underwater */
.th-underwater { --bg: linear-gradient(180deg, #00b8d4 0, #0077b6 40%, #023e8a 80%, #03045e 100%); --edge: #aaf6ff; --box: rgba(0, 40, 90, .45); --tick: #fff36b; --h2: #fff36b; --accent: #aaf6ff; --link: #fff; --vlink: #ffe; --hfont: Comic, 'Comic Sans MS', cursive; }
.th-underwater .gc-title { font: 700 clamp(34px, 6vw, 64px)/1.1 Comic, 'Comic Sans MS', cursive; background: linear-gradient(180deg, #fff, #aaf6ff 50%, #00e5ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(3px 3px 0 #03045e); }
.th-underwater .gc-marq, .th-underwater .tick, .th-underwater .box h2, .th-underwater .gc-ring { font-family: Comic, 'Comic Sans MS', cursive; font-weight: 700; font-size: 17px; }
.th-underwater .gc-marq { color: #fff36b; }
.gc-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gc-bubbles i { position: absolute; left: var(--x); bottom: -30px; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8) 0 15%, transparent 20%); animation: rise var(--d) linear infinite; animation-delay: calc(var(--w) * -1); }
@keyframes rise { to { transform: translateY(-110vh) translateX(20px); } }
.th-underwater .gc-rule { background: repeating-linear-gradient(90deg, #aaf6ff 0 16px, transparent 16px 24px); height: 6px; }

/* ---------------------------------------------------------------- hacker */
.th-hacker { --bg: #000; --ink: #33ff66; --edge: #0f0; --box: rgba(0, 20, 0, .7); --tick: #0f0; --h2: #9f9; --accent: #0f0; --link: #9f9; --vlink: #6c6; --hfont: VT, monospace; --bfont: VT, 'Courier New', monospace; font-size: 22px; }
.gc-rain { position: absolute; left: 0; top: 0; width: 100%; height: 900px; opacity: .55; image-rendering: pixelated; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.th-hacker .gc-title { font: 400 clamp(40px, 8vw, 84px)/1 VT, monospace; background: none; color: #33ff66; -webkit-text-fill-color: #33ff66; filter: none; text-shadow: 0 0 8px #0f0; }
.th-hacker .gc-marq, .th-hacker .tick, .th-hacker .box h2, .th-hacker .gc-ring { font-family: VT, monospace; font-size: 22px; }
.th-hacker .box { border: 2px dashed #0f0; }
.th-hacker .gc-rule { background: repeating-linear-gradient(90deg, #0f0 0 6px, transparent 6px 12px); height: 3px; animation: none; }
.th-hacker .gb-form textarea { background: #000; color: #0f0; box-shadow: inset 0 0 0 2px #0f0; font: 400 20px VT, monospace; }
.th-hacker .gc-head { border: 2px solid #0f0; }

/* ---------------------------------------------------------------- pastel */
.th-pastel { --bg: #ffd6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 20c-3-5-10-3-9 3 1 4 9 9 9 9s8-5 9-9c1-6-6-8-9-3z' fill='%23ffb3dd'/%3E%3Cpath d='M48 50l2 5 5 1-4 3 1 5-4-3-4 3 1-5-4-3 5-1z' fill='%23d9b3ff'/%3E%3C/svg%3E"); --ink: #5a2a6e; --edge: #ff69b4; --box: rgba(255, 255, 255, .78); --tick: #b05ce6; --h2: #ff3fa4; --accent: #b05ce6; --link: #b0006a; --vlink: #7a2aa0; --hfont: Comic, 'Comic Sans MS', cursive; }
.th-pastel .gc-title { font: 700 clamp(34px, 6vw, 64px)/1.1 Comic, 'Comic Sans MS', cursive; background: linear-gradient(90deg, #ff3fa4, #b05ce6, #4fc3ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(3px 3px 0 #fff) drop-shadow(-1px -1px 0 #fff); }
.th-pastel .gc-marq, .th-pastel .tick, .th-pastel .box h2, .th-pastel .gc-ring { font-family: Comic, 'Comic Sans MS', cursive; font-weight: 700; font-size: 17px; }
.th-pastel .gc-marq { color: #ff3fa4; }
.th-pastel .box { border: 3px dotted var(--edge); border-radius: 14px; }
.th-pastel .counter span { background: #fff; color: #ff3fa4; box-shadow: inset 0 0 0 2px #ff69b4; }
.th-pastel .gc-head { border: 5px dotted #ff69b4; }
.th-pastel .gc-rule { height: 10px; background: radial-gradient(circle, #ff69b4 3px, transparent 4px) 0 0 / 16px 10px repeat-x, transparent; animation: none; }
.th-pastel .new { background: #ff69b4; color: #fff; }
.th-pastel .gb-who b { color: #b05ce6; }

/* ---------------------------------------------------------------- 90s corporate */
.th-corporate { --bg: #fff; --ink: #000; --edge: #000080; --box: #f4f4f4; --tick: #000080; --h2: #fff; --accent: #000080; --link: #0000ee; --vlink: #551a8b; --hfont: 'Times New Roman', Times, serif; --bfont: 'Times New Roman', Times, serif; font-size: 19px; }
.th-corporate .gc-wrap { text-align: left; }
.th-corporate .gc-marq { background: #000; color: #0f0; font: 400 20px/1.2 VT, monospace; padding: 4px 0; }
.th-corporate .gc-head { border: 1px solid #000; box-shadow: 4px 4px 0 #c0c0c0; }
.th-corporate .gc-title { font: 700 clamp(32px, 5vw, 54px)/1.1 'Times New Roman', Times, serif; background: none; color: #000080; -webkit-text-fill-color: #000080; filter: drop-shadow(2px 2px 0 #c0c0c0); text-align: left; }
.th-corporate .gc-tagline { color: #800000; font-size: 20px; }
.th-corporate .gc-ticks { justify-content: flex-start; }
.th-corporate .tick { font: 700 15px/1.4 Arial, Helvetica, sans-serif; border: 1px solid #000080; background: #e8e8ff; }
.th-corporate .gc-rule { background: #000080; height: 3px; animation: none; }
.th-corporate .box { border: 1px solid #000080; padding: 0 14px 14px; }
.th-corporate .box h2 { font: 700 16px/1.2 Arial, Helvetica, sans-serif; background: linear-gradient(90deg, #000080, #1084d0); margin: 0 -14px 12px; padding: 7px 14px; letter-spacing: 0; }
.th-corporate .new { display: none; }
.th-corporate .gc-ring { font: 400 15px Arial, sans-serif; justify-items: start; text-align: left; }
.th-corporate .counter span { background: #000080; color: #fff; font-family: Arial, sans-serif; }
.th-corporate .gb-who b { color: #000080; }
.th-corporate .gc-foot { justify-items: start; }
.th-corporate .uc { display: none; }
.th-corporate .thermo-bar i { background: repeating-linear-gradient(90deg, #000080 0 14px, transparent 14px 16px); }

/* ---------------------------------------------------------------- the Navigator's page on a phone */
@media (max-width: 760px) {
  .gc { font-size: 17px; }
  .gc .gc-wrap { padding: 12px 10px 30px; }
  .gc-grid3, .gc-grid2 { grid-template-columns: 1fr; }
  .gc-marq { font-size: 11px; }
  .tick { font-size: 10px; padding: 7px 10px; }
  .gc .box h2 { font-size: 11px; }
  .counter span { font-size: 15px; padding: 5px 4px; }
  .host-steps li { grid-template-columns: 30px 1fr; }
  .host-steps li > .btn { grid-column: 2; grid-row: auto; justify-self: start; }
  .th-hacker { font-size: 20px; }
}
.th-hacker .gc-facts, .th-hacker .gc-table, .th-hacker .gc-small, .th-hacker .gb-who { font-size: 20px; }
.th-hacker .thermo-bar { background: #000; box-shadow: inset 0 0 0 2px #0f0; }
.th-hacker .thermo-bar i { background: repeating-linear-gradient(90deg, #0f0 0 10px, transparent 10px 13px); }
.th-hacker .thermo-bar span { color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; font: 400 22px VT, monospace; }
.th-hacker .counter span { font: 400 26px/1 VT, monospace; padding: 4px 6px; }
.th-space .thermo-bar i { background: repeating-linear-gradient(90deg, #0ff 0 14px, #f0f 14px 26px, transparent 26px 28px); }
.th-underwater .thermo-bar i { background: repeating-linear-gradient(90deg, #00e5ff 0 14px, #aaf6ff 14px 26px, transparent 26px 28px); }
.th-pastel .thermo-bar i { background: repeating-linear-gradient(90deg, #ff69b4 0 14px, #d9b3ff 14px 26px, transparent 26px 28px); }
.th-hacker .host-steps li > span, .th-hacker .host-steps .pings, .th-hacker .pings { font-size: 20px; }