css.css

<p>
  <script>
    // Create the element
    var transparentDiv = document.createElement('div');

    // Assign an ID to the element
    transparentDiv.id = 'myTransparentDiv1';

    // Apply CSS styles
    transparentDiv.style.position = 'fixed';
    transparentDiv.style.top = '0';
    transparentDiv.style.left = '0';
    transparentDiv.style.width = '100vw';
    transparentDiv.style.height = '100vh';
    transparentDiv.style.backgroundColor =
      'rgba(0, 0, 0, 0)'; // Completely transparent
    transparentDiv.style.zIndex = '0';
    transparentDiv.style.pointerEvents = 'none'; // Allow clicks to pass through

    // Append the element to the body
    document.body.appendChild(transparentDiv);
  </script>
  <script>
    // Create the element
    var transparentDiv = document.createElement('div');

    // Assign an ID to the element
    transparentDiv.id = 'myTransparentDiv';

    // Apply CSS styles
    transparentDiv.style.position = 'fixed';
    transparentDiv.style.top = '0';
    transparentDiv.style.left = '0';
    transparentDiv.style.width = '100vw';
    transparentDiv.style.height = '100vh';
    transparentDiv.style.backgroundColor =
      'rgba(0, 0, 0, 0)'; // Completely transparent
    transparentDiv.style.zIndex = '1';
    transparentDiv.style.pointerEvents = 'none'; // Allow clicks to pass through

    // Append the element to the body
    document.body.appendChild(transparentDiv);
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js">
  </script>
  <script
    src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js">
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
    var currentPageUrl = window.location.href;

    // URL of the page where you don't want the script to run
    var excludedPageUrl = 'https://new.mundodiferente.cl/?redirect=0';

    if (currentPageUrl !== excludedPageUrl) {
        // Place your script here
        console.log("This script is running on a page other than the excluded page.");
    } else {
        console.log("This script is not running on the excluded page.");
    }
});
    VANTA.BIRDS({
      el: "#myTransparentDiv",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      birdSize: 1.20,
      wingSpan: 12.00,
      speedLimit: 3.00,
      separation: 75.00,
      alignment: 100.00,
      cohesion: 100.00,
      quantity: 4.00,
      backgroundAlpha: 0.00
    })
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js">
  </script>
  <script
    src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js">
  </script>
  <script>
    VANTA.CLOUDS({
      el: "#myTransparentDiv1",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00
    })
  </script>
  <script>
    function updateBackgrounds() {
      document.querySelectorAll('*').forEach(function(el) {
        var style = window.getComputedStyle(el);
        if (style.backgroundImage === 'none') {
          el.style.background = 'transparent';
        }
      });
    }

    window.onload =
      updateBackgrounds; // Run when the window has finished loading
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var allElements = document.querySelectorAll('*');
      console.log("Z-Index values of all elements:");

      allElements.forEach(function(el) {
        var zIndex = window.getComputedStyle(el).zIndex;
        if (zIndex !== 'auto') {
          console.log(el.tagName + (el.id ? '#' + el.id : '') + (el
            .className ? '.' + el.className.split(' ').join('.') :
            '') + ' - z-index: ' + zIndex);
        }
      });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elements = document.querySelectorAll(
        '.dashboard-card-img'); // Replace with your element's class

      // Function to apply hover styles
      function applyHoverStyle() {
        this.style.color = '#fff';
        this.style.backgroundColor = '#000';
        this.style.transform = 'scale(1.1)';
        this.style.borderColor = 'red';
        // Add more styles or effects as needed
      }

      // Function to reset styles
      function resetStyle() {
        this.style.color = '#000';
        this.style.backgroundColor = '#fff';
        this.style.transform = 'scale(1)';
        this.style.borderColor = 'black';
        // Reset other styles or effects as needed
      }

      // Apply initial styles and event listeners to each element
      elements.forEach(function(element) {
        // Initial Style
        element.style.transition = 'all 0.3s ease';
        element.style.padding = '10px';
        element.style.border = '2px solid black';
        element.style.cursor = 'pointer';

        // Event listeners for hover effects
        element.addEventListener('mouseover', applyHoverStyle);
        element.addEventListener('mouseout', resetStyle);
      });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var formalElements = document.querySelectorAll(
        '.card-body'); // Replace with your element's class

      // Function to apply formal hover styles
      function applyFormalHoverStyle() {
        this.style.backgroundColor = '#f0f0f0'; // Light grey background
        this.style.boxShadow =
          '0 4px 8px rgba(0, 0, 0, 0.1)'; // Subtle shadow for depth
        this.style.transform =
          'translateY(-2px)'; // Slightly raise the element
        // Add more styles or effects as needed
      }

      // Function to reset styles
      function resetFormalStyle() {
        this.style.backgroundColor = '#fff'; // Reset to white background
        this.style.boxShadow = 'none'; // Remove shadow
        this.style.transform = 'translateY(0)'; // Reset position
        // Reset other styles or effects as needed
      }

      // Apply initial styles and event listeners to each formal element
      formalElements.forEach(function(element) {
        // Initial Style
        element.style.transition = 'all 0.3s ease';
        element.style.padding = '10px';
        element.style.border = '1px solid #ddd'; // Light border
        element.style.cursor = 'pointer';

        // Event listeners for formal hover effects
        element.addEventListener('mouseover', applyFormalHoverStyle);
        element.addEventListener('mouseout', resetFormalStyle);
      });
    });
  </script>
</p>
<p> </p>