add: setVH fallback

src/App.svelte

@@ -15,6 +15,7 @@
     export let name: Name;
 
     let active: string | undefined;
+    let WH = 0;
 
     function intersection(section: HTMLElement) {
         const observer = new IntersectionObserver(observe, { threshold: 1 });
@@ -24,12 +25,23 @@
             active = intersecting?.target.id;
         }
     }
+
+    function resize(window: Window) {
+        setVH();
+        window.onresize = setVH;
+        function setVH() {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+        }
+    }
 </script>
 
 <svelte:head>
     <title>{name}</title>
 </svelte:head>
 
+<svelte:window use:resize />
+
 {#await Promise.all([images.load(), quotes.load()]) then}
     <main>
         {#each $counters as counter, id}

src/css/base.css

@@ -1,34 +1,32 @@
 html {
-    height: 100dvh;
+    height: 100vh;
+    /* Fallback for browsers that do not support Custom Properties */
+    height: calc(var(--vh, 1vh) * 100);
     font-family: system-ui;
 }
 
-html:fullscreen {
-    height: 100vh;
+html::before {
+    content: '';
+    background: rgba(0, 0, 0, 0.27);
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    overflow: hidden;
 }
 
-html::before {
+html::after {
     content: attr(title);
     position: absolute;
-    inset: 97.5% 0 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
     font-size: 0.8rem;
     font-weight: 300;
     font-family: inherit;
     opacity: 0.69;
     text-align: center;
 }
 
-html::after {
-    content: '';
-    background: rgba(0, 0, 0, 0.27);
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    overflow: hidden;
-    height: 100%;
-}
-
-
 body {
     margin: 0;
     display: grid;