Floating bubbles animation failed

help
1

My first ever project is creating a screen of full-filled floating bubbles but Im kinda failed as the bubbles bottom bubbles only started from 1/4 of the screen instead of bottom of the screen(full viewpoint). And many seems to be stucked at left top corner when the animation comes to the end. PLease help if you have spare time, thank you so much bros and siss.
CSS:
body {
background-color: hsla(212, 64%, 52%, 0.51);
margin: 0;
overflow: hidden;
}

.bubble {
position: absolute;
border-radius: 50%;
opacity: 0.7;
animation: moveBubble linear;
}

#container {
overflow: hidden;
position: relative;
width: 100vw;
height: 100vh;
}

@keyframes moveBubble {
from {
left: var(–start-x);
top: var(–start-y);
}
to {
left: var(–end-x);
top: var(–end-y);
}
}
JS:
document.addEventListener(‘DOMContentLoaded’, () => {
const container = document.getElementById(‘container’);
const numofBubbles = 100;

function getRandomHSLColor() {
    const h = Math.floor(Math.random() * 360);
    const s = Math.floor(Math.random() * 100);
    const l = Math.floor(Math.random() * 100);
    return `hsl(${h}, ${s}%, ${l}%)`;
}

function createBubbles() {
    for (let i = 0; i < numofBubbles; i++) {
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        const duration = Math.random() * 5 + 5; 
        const size = Math.random() * 60 + 10;
        const direction = Math.floor(Math.random() * 4);
        let startX, startY, endX, endY;

        switch (direction) {
            case 0: // From top
                startX = Math.random() * 100;
                startY = -size; 
                endX = startX;
                endY = 100 + size; 
                break;
            case 1: // From bottom
                startX = Math.random() * 100;
                startY = 100 + size; 
                endX = startX;
                endY = -size; 
                break;
            case 2: // From right
                startX = 100 + size; 
                startY = Math.random() * 100;
                endX = -size; 
                endY = startY;
                break;
            case 3: // From left
                startX = -size; 
                startY = Math.random() * 100;
                endX = 100 + size; 
                endY = startY;
                break;
        }

        bubble.style.width = `${size}px`;
        bubble.style.height = `${size}px`;
        bubble.style.backgroundColor = getRandomHSLColor();
        bubble.style.setProperty('--start-x', `${startX}%`);
        bubble.style.setProperty('--start-y', `${startY}px`);
        bubble.style.setProperty('--end-x', `${endX}%`);
        bubble.style.setProperty('--end-y', `${endY}px`);
        bubble.style.animation = `moveBubble ${duration}s linear`;

        container.appendChild(bubble);
    }
}

createBubbles();

});