@font-face { font-family: "Title"; src: url("/fonts/title.woff2") format("woff2"); font-display: swap; } :root { color-scheme: dark; --bg: #0b0b12; --fg: #f4f4f8; --muted: rgba(244, 244, 248, 0.7); --radius: 999px; --bg-image: none; /* set inline on when a background file exists */ } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: linear-gradient(rgba(11, 11, 18, 0.55), rgba(11, 11, 18, 0.85)), url("/img/background.png") center / cover no-repeat fixed, radial-gradient(ellipse at top, #1b1b33, var(--bg) 60%); background-color: var(--bg); /* Pixel-art background: keep pixels crisp instead of blurring when upscaled */ image-rendering: pixelated; -webkit-font-smoothing: antialiased; } main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem 1rem; } /* ---------- Profile ---------- */ .profile { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; /* Downscaled with a non-integer ratio: smooth looks better than pixelated here */ image-rendering: auto; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.5); } .name { font-family: "Title", system-ui, sans-serif; font-size: clamp(2.25rem, 8vw, 3.5rem); font-weight: 700; margin: 0; letter-spacing: 0.02em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); } /* ---------- Links ---------- */ .links { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0.85rem; } .link { --brand: #444; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-radius: var(--radius); background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: transform 150ms ease, filter 150ms ease; } .link:hover, .link:focus-visible { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); outline: none; } .link:active { transform: translateY(0) scale(0.99); } .link:focus-visible { box-shadow: 0 0 0 3px #fff, 0 6px 20px rgba(0, 0, 0, 0.35); } .icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; } .icon svg { width: 100%; height: 100%; fill: currentColor; } .label { flex: 1; text-align: center; /* Balance the icon on the left so the text looks centered */ margin-right: 28px; } @media (prefers-reduced-motion: reduce) { .link { transition: none; } }