diff --git a/shared_templates/main.html b/shared_templates/main.html
index 6fa61f5..d102267 100644
--- a/shared_templates/main.html
+++ b/shared_templates/main.html
@@ -15,12 +15,75 @@
     document.documentElement.className = class_;
     // document.documentElement.className += ' invert'; // 'invert' to swap colors
   </script>
+  <script defer>
+    let maxH1FontSize = null;
+
+    function fitH1ToContainer(h1) {
+      const container = h1.closest(".container");
+      if (!container || window.devicePixelRatio > 2) return;
+
+      const maxFontSize = maxH1FontSize;
+      const minFontSize = 8;
+
+      h1.style.whiteSpace = "nowrap";
+      h1.style.display = "inline-block";
+
+      const style = getComputedStyle(container);
+      const paddingLeft = parseFloat(style.paddingLeft);
+      const paddingRight = parseFloat(style.paddingRight);
+
+      const availableWidth =
+        container.getBoundingClientRect().width - paddingLeft - paddingRight;
+      const containerWidth = availableWidth;
+
+      let low = minFontSize;
+      let high = maxFontSize;
+      let best = minFontSize;
+
+      while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        h1.style.fontSize = mid + "px";
+
+        if (h1.scrollWidth <= containerWidth) {
+          best = mid;
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
+      }
+
+      h1.style.fontSize = best + "px";
+
+      if (h1.scrollWidth > containerWidth) {
+        h1.style.whiteSpace = "normal";
+        h1.style.display = "block";
+      }
+    }
+
+    function runFitText() {
+      document.querySelectorAll("h1").forEach(fitH1ToContainer);
+    }
+
+    function start() {
+      document.fonts.ready.then(() => {
+        const firstH1 = document.querySelector("h1");
+        if (firstH1) {
+          maxH1FontSize = parseFloat(getComputedStyle(firstH1).fontSize);
+        }
+        runFitText();
+        window.addEventListener("resize", runFitText);
+      });
+    }
+
+    window.addEventListener("DOMContentLoaded", start);
+
+  </script>
 </head>
 
 <body>
   <main class="container">
   </main>
-<!--   <footer class="invert">
+  <!--   <footer class="invert">
     <span class="container"
       style="display: block; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: space-between">
       <span><a href="/" class="er-color">take
