@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@600;700&display=swap');

:root {
	--ink: #f5f5f5;
	--paper: #050505;
	--coral: #902d41;
	--turquoise: #31afd4;
	--muted: rgba(245, 245, 245, .65);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); overflow: hidden; }
body { font-family: 'DM Mono', monospace; color: var(--ink); }

canvas { display: block; width: 100vw; height: 100vh; }

.hud {
	position: fixed;
	top: 27px;
	left: 5vw;
	max-width: 420px;
	pointer-events: none;
}
.hud h1 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -.04em;
	margin: 0 0 10px;
}
.hud p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

.back-link {
	position: fixed;
	bottom: 27px;
	left: 5vw;
	font-size: 13px;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--turquoise);
	padding-bottom: 2px;
}
.back-link:hover { color: var(--turquoise); }