−
100%
+
fit
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="utf-8"> <meta name="viewport"
content="width=device-width,initial-scale=1">
<title>Cocotrix</title> <link rel="stylesheet"
href="https://use.typekit.net/ozv2vch.css">
<style> * { margin: 0; padding: 0; box-sizing:
border-box; } html, body { height: 100dvh;
display: flex; align-items: center;
justify-content: center; background: #99e4ff;
color: #0a0a0a; } .site { text-align: center;
padding: 2rem; } h1 { font-family: giulia,
serif; font-size: clamp(3rem, 10vw, 7rem);
font-weight: 700; letter-spacing: -0.03em;
line-height: 1; margin-bottom: 1.5rem; }
.tagline { font-family: puffin-display-soft,
sans-serif; font-size: clamp(0.9rem, 2vw,
1.25rem); color: #1a4a5a; letter-spacing:
0.02em; max-width: 480px; line-height: 1.5; }
</style> </head> <body> <div class=site>
<h1>Cocotrix</h1> <p class=tagline>It's me
Trixie under the big top of this arcane
wonderland we call Cocotrix.stream</p> </div>
</body> </html>
△