@keyframes easeIn {
    0% {
        opacity: 0.7;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes easeOut {
    0% {
        opacity: 0.7;
        transform: scale(1);
        background-color: black;
        background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 40px 70px, #fffafa, rgba(255, 250, 250, 0)),
            radial-gradient(1px 1px at 90px 10px, white, rgba(255, 255, 255, 0)),
            radial-gradient(1.5px 1.5px at 130px 160px, #f0f8ff, rgba(240, 248, 255, 0)),
            radial-gradient(1px 1px at 160px 200px, white, rgba(255, 255, 255, 0)),
            radial-gradient(2.5px 2.5px at 200px 20px, #fffaf0, rgba(255, 250, 240, 0)),
            radial-gradient(1px 1px at 220px 80px, white, rgba(255, 255, 255, 0)),
            radial-gradient(1.5px 1.5px at 240px 180px, #f8f8ff, rgba(248, 248, 255, 0)),
            radial-gradient(1px 1px at 70px 40px, white, rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 180px 120px, #fffafa, rgba(255, 250, 250, 0)),
            radial-gradient(1.5px 1.5px at 210px 60px, #f0f8ff, rgba(240, 248, 255, 0)),
            radial-gradient(1px 1px at 20px 200px, white, rgba(255, 255, 255, 0));
        background-repeat: repeat;
        background-size: 250px 250px;
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
        background-color: black;
    }
}
[id='day']:checked ~ .starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: -1;
    overflow: hidden;
    animation: easeOut 0.8s alternate;
}
[id='night']:checked ~ .starfield {
    animation: easeIn 0.8s alternate;
}