function animate() {
    const bg = document.querySelector("#bg");

    for (const star of bg.children) {
        star.x += star.vx;
        star.y += star.vy;
        
        star.style.left = `${star.x}px`;
        star.style.top = `${star.y}px`;
    }
    
    requestAnimationFrame(animate);
}

document.addEventListener("DOMContentLoaded", () => {
    const bg = document.createElement("div");
    bg.setAttribute("id", "bg");

    const numStars = Math.floor((window.innerWidth * window.innerHeight)/10_000);
    for (let i = 0; i < numStars; i++) {
        const star = document.createElement("div");
        star.classList.add("star");
        
        star.x = Math.random() * window.innerWidth;
        star.y = Math.random() * window.innerHeight;
        
        star.vx = (Math.random() - 0.5) * 0.2;
        star.vy = (Math.random() - 0.5) * 0.2;
        
        star.style.left = `${star.x}px`;
        star.style.top = `${star.y}px`;
        
        bg.appendChild(star);
    }
    document.body.prepend(bg);

    var styleBlock = document.createElement("style");
    styleBlock.textContent = `
        #bg {
            position: fixed;
            inset: 0;
            pointer-events: none;
        }

        .star {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #e6e6e6;
            box-shadow: 0 0 4px white;
        }
    `;
    document.head.append(styleBlock);

    requestAnimationFrame(animate);
})