#eniac-galaxy {
    background: radial-gradient(circle at center, #00064c 0, #000000 100%);
    --stars-color: white;
    overflow: hidden;
}

body.light #eniac-galaxy {
    background: radial-gradient(circle at bottom, #CCC 0, #FFF 100%);
    --stars-color: black;
}

#eniac-galaxy .space {
    background: rgba(0, 0, 0, 0) center / 200px 200px round;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#eniac-galaxy .stars-1 {
    animation: space 80s ease infinite;
    background-image: radial-gradient(1px 1px at 25px 5px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 50px 25px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 125px 20px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 110px 80px, var(--stars-color), rgba(255, 255, 255, 0));
}

#eniac-galaxy .stars-2 {
    animation: space 100s ease infinite;
    background-image: radial-gradient(1px 1px at 75px 125px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 100px 75px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 199px 100px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 5px 5px, var(--stars-color), rgba(255, 255, 255, 0));
}

#eniac-galaxy .stars-3 {
    animation: space 150s ease infinite;
    background-image: radial-gradient(1px 1px at 10px 10px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 150px 150px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 60px 170px, var(--stars-color), rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 95px 145px, var(--stars-color), rgba(255, 255, 255, 0));
}

@keyframes space {
    40% {
        opacity: 0.75;
    }
    50% {
        opacity: 0.25;
    }
    60% {
        opacity: 0.75;
    }
    100% {
        transform: rotate(360deg);
    }
}
