/* Variables for background colors (optional, for gradient) */
:root {
    --bg-color-start: var(--first-color); /* Starting color for background gradient */
    --bg-color-end: var(--body-color);   /* Ending color for background gradient */
}

/* Main background container */
.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /* Optional: A cool gradient instead of a solid color */
    background: linear-gradient(0deg, var(--container-color) 0%, hsla(var(--hue), 60%, 40%, 0.15) 100%);

    /*background: linear-gradient(to bottom right, var(--bg-color-start), var(--bg-color-end));
    */

    overflow: hidden;
    z-index: -1; /* Ensures the background is behind other content */
}

/* Styles for the dynamically created elements */
.background > div { 
    position: absolute;
    display: block;
    background: hsla(var(--hue), 60%, 40%, 0.2);
    animation: animate var(--duration) linear infinite;
    /* Using CSS variables for dynamic values (set by JS) */
    width: var(--size);
    height: var(--size);
    left: var(--left);
    bottom: var(--bottom);
    animation-delay: var(--delay);
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1500px) rotate(720deg); 
        opacity: 0; 
        border-radius: 50%; 
    }
}