:root{ --fade-duration: 2250ms; --text:#fff; --muted:#777; --muted-strong:#444; --hover:#e0e0e0; --container-max:1100px; --container-pad:4rem 1rem; --z-link-layer:2; --z-newsletter:1000; } /* Reset & base */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html, body{ height:100%; background:#000; } body{ position:relative; z-index:1; color:var(--text); font-family:"Times New Roman", Times, serif; text-align:justify; text-justify:inter-word; overflow-x:hidden; } /* Per-page background via CSS vars set on */ body::before{ content:""; position:fixed; inset:0; background-image:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.95; transform:var(--bg-transform, none); transition:opacity .6s ease, transform 1.2s ease; pointer-events:none; z-index:0; } /* SOFT CROSSFADE OVERLAY (last page’s background) */ #xfade{ position:fixed; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; /* start invisible */ pointer-events:none; z-index:9999; /* above everything */ transition:opacity var(--fade-duration) ease; display:none; /* don’t paint unless used */ } #xfade.show{ opacity:1; } /* Layout */ .container{ max-width:var(--container-max); margin:0 auto; padding:var(--container-pad); text-align:left; } .menu{ font-size:64px; line-height:1.25; } .menu a{ display:inline-block; color:var(--muted); text-decoration:none; transition:color .3s ease, text-shadow .3s ease; } .menu a + a{ margin-top:.35em; } .menu a:hover{ color:#cfcfcf; text-shadow:0 0 8px rgba(255,255,255,.3); } a{ color:gray; text-decoration-style:dotted; } a:hover{ text-decoration-style:solid; } /* Hotspot layer */ .link-layer{ position:fixed; inset:0; transform:translateX(-8%) scale(1.2); transform-origin:center; pointer-events:none; z-index:var(--z-link-layer); } .link-layer a{ position:absolute; pointer-events:auto; font-size:clamp(16px, 2vw, 28px); color:var(--muted-strong); text-decoration:none; transition:color .25s ease, text-shadow .25s ease; } .link-layer a:hover{ color:var(--hover); text-shadow:0 0 10px rgba(255,255,255,.35); } /* --- 404 stage + precise positioning --- */ .notfound { position: fixed; inset: 0; pointer-events: none; /* clicks pass through */ } .notfound__group { position: absolute; left: var(--msg-left, 60vw); top: var(--msg-top, 60vh); transform: translate(-50%, -50%) rotate(var(--msg-rotate, 0deg)); max-width: min(80ch, 70vw); text-align: center; line-height: 1.15; pointer-events: auto; /* links clickable */ } /* === 404 text/link appearance === */ .error-text, .back-home { font-size: 24px; color: #fff; text-decoration: none; -webkit-text-stroke: 1.25px #000; text-shadow: none; } .back-home:hover { color: black; text-shadow: none; transition: color 0.3s ease; } /* optional mobile nudge */ @media (max-width: 700px) { .notfound__group { left: var(--msg-left-sm, var(--msg-left, 55vw)); top: var(--msg-top-sm, var(--msg-top, 65vh)); } } /* Flip the 404 hand image horizontally on mobile */ @media (max-width: 700px) { body[style*="hand.JPG"]::before { transform: scaleX(-1) scale(1.05); transform-origin: center; } } /* --- WEBRING BAR (center-bottom across all pages) --- */ .webring { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10000; /* ABOVE #xfade (9999) */ display: flex; gap: 20px; align-items: center; justify-content: center; font-family: "Times New Roman", Times, serif; font-size: 18px; text-align: center; } .webring a { color: white !important; text-decoration: none; -webkit-text-fill-color: white !important; -webkit-text-stroke: 1px black; transition: opacity 0.2s ease, text-decoration-color 0.2s ease; } .webring a:hover { opacity: 0.7; text-decoration: underline; }