: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 (per your requests) === */ /* 1) remove previous contrast shadows, 2) make text white with thin black outline */ .error-text, .back-home { font-size: 24px; color: #fff; text-decoration: none; /* 3) hide underline */ -webkit-text-stroke: 1.25px #000; /* thin black outline */ text-shadow: none; /* remove contrast shadow */ } .back-home:hover { color: black; /* turn text black */ text-shadow: none; /* remove glow if any */ transition: color 0.3s ease; /* smooth change */ } /* 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; } }