body {
    background: #252525;
}

.container {
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

[data-day-night-switch] {
    background: none;
    border-collapse: collapse;
    border: none;
    padding: 0px;
    border-radius: 80px;
}

[data-day-night-switch]:focus {
    outline: none;
    box-shadow: none;
}

[data-day-night-switch]:focus-visible {
    outline: 4px solid #0b1118;
    box-shadow: none;
}

[data-day-night-switch] > svg {
    pointer-events: none;
}

[data-day-night-switch][data-state="day"] > svg [data-name="Background"] {
    fill: #2670B4;
}

[data-day-night-switch][data-state="day"] > svg [data-name="Sun-Moon"],
[data-day-night-switch][data-state="day"] > svg [data-name="Rays"] {
    transform: translate(0px, 0px);
}

[data-day-night-switch][data-state="day"] > svg [data-name="Clouds"] {
    transform: translate(0px, 0px);
}

[data-day-night-switch][data-state="day"] > svg [data-name="Stars"] {
    transform: translate(0px, -140px);
}

[data-day-night-switch][data-state="day"] > svg [data-name="Sun-Moon_2"] circle {
    fill: #FFB911;
}

[data-day-night-switch][data-state="day"] > svg [data-name="Moon Crater 1"] circle,
[data-day-night-switch][data-state="day"] > svg [data-name="Moon Crater 2"] circle,
[data-day-night-switch][data-state="day"] > svg [data-name="Moon Crater 3"] circle {
    fill: #929EAF00;
}

[data-day-night-switch][data-state="night"] > svg [data-name="Background"] {
    fill: #151D26;
}

[data-day-night-switch][data-state="night"] > svg [data-name="Sun-Moon"],
[data-day-night-switch][data-state="night"] > svg [data-name="Rays"] {
    transform: translate(240px, 0px);
}

[data-day-night-switch][data-state="night"] > svg [data-name="Clouds"] {
    transform: translate(0px, 180px);
}

[data-day-night-switch][data-state="night"] > svg [data-name="Stars"] {
    transform: translate(0px, 0px);
}

[data-day-night-switch][data-state="night"] > svg [data-name="Sun-Moon_2"] circle {
    fill: #C0C8D4;
}

[data-day-night-switch][data-state="night"] > svg [data-name="Moon Crater 1"] circle,
[data-day-night-switch][data-state="night"] > svg [data-name="Moon Crater 2"] circle,
[data-day-night-switch][data-state="night"] > svg [data-name="Moon Crater 3"] circle {
    fill: #929EAFFF;
}

[data-day-night-switch].is-animating > svg [data-name="Background"] {
    animation: 870ms ease-in-out forwards day-to-night-background;
}

[data-day-night-switch].is-animating > svg [data-name="Sun-Moon"],
[data-day-night-switch].is-animating > svg [data-name="Rays"] {
    animation: 1s ease-in-out forwards day-to-night-sun;
}

[data-day-night-switch].is-animating > svg [data-name="Clouds"] {
    animation: 870ms ease-in-out forwards day-to-night-clouds;
}

[data-day-night-switch].is-animating[data-state="night"] > svg [data-name="Stars"] {
    animation: 770ms ease-in-out both day-to-night-stars;
    animation-delay: 230ms;
}

[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Stars"] {
    animation: 770ms ease-in-out both day-to-night-stars;
    animation-direction: reverse;
    animation-delay: 0ms;
}

[data-day-night-switch].is-animating > svg [data-name="Sun-Moon_2"] circle {
    animation: 1s ease-in-out forwards day-to-night-sun-background;
}

[data-day-night-switch].is-animating[data-state="night"] > svg [data-name="Moon Crater 1"] circle {
    animation: 500ms ease-in-out both day-to-night-moon-craters;
    animation-delay: 500ms;
}

[data-day-night-switch].is-animating[data-state="night"] > svg [data-name="Moon Crater 2"] circle {
    animation: 572ms ease-in-out both day-to-night-moon-craters;
    animation-delay: 428ms;
}

[data-day-night-switch].is-animating[data-state="night"] > svg [data-name="Moon Crater 3"] circle {
    animation: 644ms ease-in-out both day-to-night-moon-craters;
    animation-delay: 356ms;
}

[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Moon Crater 1"] circle {
    animation: 500ms ease-in-out both day-to-night-moon-craters;
    animation-direction: reverse;
    animation-delay: 0ms;
}

[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Moon Crater 2"] circle {
    animation: 572ms ease-in-out both day-to-night-moon-craters;
    animation-direction: reverse;
    animation-delay: 0ms;
}

[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Moon Crater 3"] circle {
    animation: 644ms ease-in-out both day-to-night-moon-craters;
    animation-direction: reverse;
    animation-delay: 0ms;
}

[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Background"],
[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Sun-Moon"],
[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Rays"],
[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Clouds"],
[data-day-night-switch].is-animating[data-state="day"] > svg [data-name="Sun-Moon_2"] circle {
    animation-direction: reverse;
}

@keyframes day-to-night-background {
    from { fill: #2670B4; }
    to { fill: #151D26; }
}

@keyframes day-to-night-sun {
    from { transform: translate(0px, 0px); }
    to { transform: translate(240px, 0px); }
}

@keyframes day-to-night-clouds {
    from { transform: translate(0px, 0px); }
    to { transform: translate(0px, 180px); }
}

@keyframes day-to-night-stars {
    from { transform: translate(0px, -140px); }
    to { transform: translate(0px, 0px); }
}

@keyframes day-to-night-sun-background {
    from { fill: #FFB911; }
    to { fill: #C0C8D4; }
}

@keyframes day-to-night-moon-craters {
    from { fill: #929EAF00; }
    to { fill: #929EAFFF; }
}