feat: 💄 dynamically scale character choice page title fonts

src/index.webc

@@ -8,9 +8,10 @@
 </script>
 
 <main>
-  <h1>Welcome!</h1>
-
-  <p>Select your character:</p>
+  <header>
+    <h1>Welcome!</h1>
+    <p>Select your character:</p>
+  </header>
 
   <div class="characters">
     <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
@@ -33,6 +34,20 @@
     padding: 1em;
   }
 
+  header {
+    text-align: center;
+
+    & h1 {
+      font-size: clamp(3.5em, 5vw, 7em);
+      margin-block: clamp(0.25em, 1.75vw, 0.375em);
+    }
+
+    & p {
+      font-size: clamp(1.25em, 1.5vw, 2.25em);
+      margin-block: clamp(0.25em, 10vw, 1em);
+    }
+  }
+
   .characters {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));