#ambient-light {
    position: relative;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    bottom: 0;
}
:root {
    color-scheme: light only;
}
/* Base styles for all circles */
.circle {
    position: absolute;
    left: 50%;
    width: 90%; /* Base width */
    height: 90px; /* Base height */
    border-radius: 100%;
    transform: translateX(-50%) scale(1);
    filter: blur(50px);
    background-color: var(--start-color);
    opacity: 1;
    animation: pulse var(--duration) ease-in-out infinite alternate;
    will-change: transform, background-color, opacity;
}

/* Individual circle customizations */
.circle.one {
    --start-color: #473C78;
    --end-color: #F72A3B;
    --duration: 5s;
    transform: translateX(-50%) scale(1);
    bottom: -120px; /* Lowered to hide more of the circle */
}

.circle.two {
    --start-color: #18C499;
    --end-color: #D8F05E;
    --duration: 4s;
    transform: translateX(-50%) scale(0.9);
    bottom: -110px;
}

.circle.three {
    --start-color: #FFDD00;
    --end-color: #3E33FF;
    --duration: 3s;
    transform: translateX(-50%) scale(0.8);
    bottom: -100px;
}

.circle.four {
    --start-color: #781848;
    --end-color: #F2BBE9;
    --duration: 2s;
    transform: translateX(-50%) scale(0.7);
    bottom: -90px;
}

.circle.five {
    --start-color: #42F2A1;
    --end-color: #F4F6AD;
    --duration: 1s;
    transform: translateX(-50%) scale(0.6);
    bottom: -80px;
}

/* Animation keyframes */
@keyframes pulse {
    from {
        transform: translateX(-50%) scale(1);
        background-color: var(--start-color);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) scale(0.8);
        background-color: var(--end-color);
        opacity: 0.7;
    }
}