viewport height fix (mobile devices which have their buttons as part of the screen)

viewportHeight.html

    <!-- viewport height fix -->
    <script>
      function recalculateViewportHeight() {
        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
        const vh = window.innerHeight * 0.01;
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`);
      }

      window.addEventListener('load', () => {
        recalculateViewportHeight();
      });

      // We listen to the resize event
      window.addEventListener('resize', () => {
        // We execute the same script as before
        recalculateViewportHeight();
      });
    </script>