.elementor-kit-177{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-3a6c6eb:#FFFFFF;--e-global-color-648a1e3:#2F2F2F;--e-global-color-62ea2e7:#82FF1F;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-177 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<div id="app">
  <canvas id="canvas"></canvas>
  <button id="fullscreenBtn">⤢</button>
  </div>

<style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #000;
  }

  #app {
    position: relative; /* Context for the absolute canvas */
    width: 100%;
    min-height: 80vh; /* Set minimum height to 80% of viewport */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #app canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Keep it behind other content you might add */
    display: block;
  }

  #fullscreenBtn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.3s;
  }

  #fullscreenBtn:hover {
    background: rgba(255, 255, 255, 0.2);
  }
</style>

<script type="module">
  import { Bokeh1Background } from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.2/build/backgrounds/bokeh1.cdn.min.js";
  
  const canvasEl = document.getElementById("canvas");
  const threeBackground = Bokeh1Background(canvasEl);
  
  threeBackground.loadMap(
    "https://cdn.jsdelivr.net/npm/threejs-components@0.0.2/build/assets/bokeh-particles2.png"
  );

  const getRandomColor = () => Math.floor(Math.random() * 16777215);

  // Initial colors
  threeBackground.setColors([getRandomColor(), getRandomColor(), getRandomColor()]);

  // Change colors on click
  document.getElementById("app").addEventListener("click", (e) => {
    // Prevent color change if clicking the fullscreen button
    if(e.target.id === 'fullscreenBtn') return;
    
    threeBackground.setColors([getRandomColor(), getRandomColor(), getRandomColor()]);
  });

  const fullscreenBtn = document.getElementById("fullscreenBtn");
  fullscreenBtn.addEventListener("click", () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  });
</script>/* End custom CSS */