// -------------- 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.018 * Math.min(windowWidth, windowHeight) + 6; 
        $("*")
          .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;
          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" });

        var background_img = new Image;
        background_img.src = "./resources/image.jpg";
        var bgImgWidth = background_img.width;
        var bgImgHeight = background_img.height;
        var backgound_ratio = bgImgHeight / bgImgWidth;

        var newImgWidth = $("#canvas_container").outerWidth();
        var newImgHeight = backgound_ratio * newImgWidth;

        if(newImgHeight > tHeight){

          newImgHeight = tHeight;
          newImgWidth = newImgHeight / backgound_ratio;

        }

        $(".image-wrapper").css('height', newImgHeight);
        $(".image-wrapper").css('width', newImgWidth);

      });

      $(document).ready(function () {
        
        // Window Dimensions
        let windowWidth = $(window).width();
        let windowHeight = $(window).height();

                // Adjust font size (dynamically set size based on screen size)
       fontSize = 0.018 * Math.min(windowWidth, windowHeight) + 6; 
       $("*")
         .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;
           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" });
       var background_img = new Image();
     
       // Extract the background image URL safely
       var imageUrl = $('.image-wrapper').css('background-image')
         .replace(/^url\(["']?/, '')
         .replace(/["']?\)$/, '');
     
       background_img.src = imageUrl;
     
       // Run this once the image is loaded
       background_img.onload = function () {
         var bgImgWidth = background_img.width;
         var bgImgHeight = background_img.height;
         var background_ratio = bgImgHeight / bgImgWidth;
     
         function resizeBackground() {
           var newImgWidth = $("#canvas_container").outerWidth();
           var newImgHeight = background_ratio * newImgWidth;
     
           if (newImgHeight > tHeight) {
             newImgHeight = tHeight;
             newImgWidth = newImgHeight / background_ratio;
           }
     
           $(".image-wrapper").css({
             height: newImgHeight,
             width: newImgWidth
           });
         }
     
         // Initial sizing
         resizeBackground();
     
         // Resize on window resize
         $(window).on('resize', resizeBackground);
       };

              // Set the "welcome" alert position
              $("#intro_alert").css({
                left:
                  $("#outer_container").offset().left +
                  ($("#outer_container").width() - $("#intro_alert").width()) / 2 +
                  "px",
              });
                $("#intro_alert").focus();
     });

