/* Ensure the bubble is in the background, below content but above the body background */
body {
    position: relative;
    z-index: 0; /* Default z-index for body content */
}

#droplet {
    position: fixed; /* Fixed positioning allows it to stay in place */
    top: 50%;
    left: 50%;
    width: 600px; /* This value is dynamic in JS */
    height: 600px; /* This value is dynamic in JS */
    pointer-events: none; /* Ensures the bubble doesn't interfere with interactions */
    z-index: -1;  /* Set z-index lower than body content, but higher than the body background */
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease-out, scale 0.5s ease-out;
}

#dropletGroup {
    transition: transform 0.8s ease-out;
}

/* Entferne die feste Füllfarbe für Satelliten und Hauptkreis */
/* .satellite, #mainCircle {
    fill: black;
} */

.bubble {
    width: 20px;
    height: 20px;
    /* Entferne die feste Hintergrundfarbe */
    /* background: black; */
    border-radius: 50%;
    position: absolute;
    /* Weitere Stile können hier hinzugefügt werden */
}