// -------------- Dimensions & Font Size -------------

      let resolutionA = 16;
      let resoutionB = 9;
      let fontSize = 1;
      // let global_scale = 1;

      $(window).resize(function () {

        // Window Dimensions
        let windowWidth = $(window).width();
        let windowHeight = $(window).height();

        // Adjust font size (dynamically set size based on screen size)
		    fontSize = 0.022 * Math.min(windowWidth, windowHeight) + 4; 
        $("*")
          .not("video, audio, track, option, img")
          .css({
            fontSize: fontSize + "px",
            lineHeight: fontSize * 1.3 + "px",
          });
        $("h1, h2").css({ fontSize: fontSize * 1.1 + "px" });
        $("h3, h4").css({ fontSize: fontSize + "px" });
        $("h5, h6, p, i, a, b, ol, ul, li").css({
          fontSize: fontSize * 0.9 + "px",
        });
        $(".bi").css({ fontSize: fontSize * 1.8 + "px" });
        $(".footer-text").css({ fontSize: fontSize * 0.8 + "px" });

        // Adjust width
        let maxWidth = 1280;
        let width = (windowWidth >= maxWidth) ? maxWidth : windowWidth;
        
        // Adjust resolution (landscape OR portrait)
        if (windowWidth > windowHeight) {
          resolutionA = 16;
          resolutionB = 9;
        } else if (windowWidth < windowHeight) {
          resolutionA = 9;
          resolutionB = 16;
        }

        // Adjust height
        let height = (width * resolutionB) / resolutionA;

        if (height > windowHeight) {
          height = windowHeight;// add  - (2 * windowWidth / 100); if body has padding
          width = (height * resolutionA) / resolutionB;
        }
        $("#outer_container").css({ width: width + "px" });

        let tHeight = height - $("#header").outerHeight() - $("footer").outerHeight() /*- ( 2 * width * 2/100)*/ - ($("#outer_container").outerHeight() - $("#outer_container").innerHeight()); // remove from height (header height) - (footer-height) - (canvas_container padding (2% on each side)) - (outer_container border)
        $("#canvas_container").css({ height: tHeight + "px" });
        $("#video_frame").css({ height: (tHeight - ( 2 * tHeight * 5/100)) + "px" });

      });

      // $(window).resize();

      $(document).ready(function () {
        $(window).resize();
      });
