:root { color-scheme: dark; }
* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	background: #000;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding:
		max(1.5rem, env(safe-area-inset-top))
		max(1.25rem, env(safe-area-inset-right))
		max(1.5rem, env(safe-area-inset-bottom))
		max(1.25rem, env(safe-area-inset-left));
	background: #000;
	color: #f5f5f7;
	font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

main {
	width: 100%;
	max-width: 46rem;
	text-align: center;
}

h1 {
	margin: 0;
	font-size: clamp(2.75rem, 12vw, 6rem);
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: #f5f5f7;                        /* the fallback, and what the page is if gradient text is unsupported */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	h1 {
		background: linear-gradient(180deg, #ffffff 30%, #8e8e93 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

a { color: #f5f5f7; }
img, video, svg { max-width: 100%; height: auto; }

nav {
	margin: 0 auto;
	max-width: 30rem;
	text-align: left;
}

nav p { margin: 0.6rem 0; }
nav a { text-decoration: underline; text-underline-offset: 0.2em; }
nav a:hover, nav a:focus-visible { text-decoration-thickness: 2px; }
nav span { color: #a1a1a6; margin-left: 0.5em; }