body {
  cursor: none; /*Hide default cursor */
  }
 .cursor { 
   position: fixed; width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: purple; /* Initial
color */
   pointer-events: none; /* Ensure the cursor doesn't interfere with pointer events */
   z-index: 9999; /* Ensure the cursor is on top of other elements */
}

// event listener that fires when the HTML document loads
document.addEventListener("DOMContentLoaded", function() {
const cursor = document.createElement("div");
cursor.className = "cursor";
document.body.appendChild(cursor);

 //dynamically sets the color of the cursor as the mouse moves
 document.addEventListener("mousemove", function(e) {
   // Calculate cursor position
   const cursorX = e.clientX - cursor.offsetWidth / 2; 
   const cursorY = e.clientY - cursor.offsetHeight / 2;
   
   // Update cursor position
   cursor.style.left = cursorX + "px";
   cursor.style.top = cursorY + "px";
   
   // Calculate hue based on cursor position
   const hue = Math.round((e.clientX / window.innerWidth) * 360);
   
   // Update cursor color
   cursor.style.backgroundColor = "hsl(" + hue + ", 100%, 50%)";
});
});