html, body {
    padding: 0;
    margin: 0;
}

#app-container {
    height: 100vh;
    width: 100vw;
    background: grey;
    display: grid;
    place-items: center;
}

#counter {
    position: absolute;
    top: 2rem;
    left: 50%;
    font-size: 2rem;
}

#ball-container {
    height: 80%;
    aspect-ratio: 1;
    background: black;
    position: relative;
    container-type: inline-size;
}

.ball {
    position: absolute;
    width: var(--width);
    aspect-ratio: 1;
    transform-origin: top left;
    border-radius: 50%;
    animation: move var(--lifetime) linear;
}

@keyframes move {
    0% {
        transform: translate(0, 0);
        background: var(--frm_color);
    }
    100% {
        transform: translate(var(--dx), var(--dy));
        background: var(--to_color);
    }
}