const btn = document.getElementById("moveBtn");

btn.addEventListener("mouseover", () => {
    let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px
    let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px

    // Get viewport dimensions
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    
    // Get button dimensions
    const btnRect = btn.getBoundingClientRect();
    
    // Ensure button stays within viewport
    randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right);
    randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom);

    btn.style.transform = `translate(${randX}px, ${randY}px)`;
});

btn.addEventListener("click", () => {
    let randX = (Math.random() * 600) - 300; // Move randomly left/right up to 200px
    let randY = (Math.random() * 600) - 300; // Move randomly up/down up to 200px

    // Get viewport dimensions
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    
    // Get button dimensions
    const btnRect = btn.getBoundingClientRect();
    
    // Ensure button stays within viewport
    randX = Math.min(Math.max(randX, -btnRect.left), viewportWidth - btnRect.right);
    randY = Math.min(Math.max(randY, -btnRect.top), viewportHeight - btnRect.bottom);

    btn.style.transform = `translate(${randX}px, ${randY}px)`;
});