:root {
    --bg-color-light: #f0f0e8;
    --bg-color-dark: #1c2135;
    --border-color-light: #1c2135;
    --border-color-dark: #f0f0e8;
    --sun-color: #fabc1c;
    --moon-color: #fffdf2;
    --day-bg-color: #0dbdf6;
    --night-bg-color: #272a30;
    --cloud-color: #fffdf2;
    --star-color: #fffdf2;
}
.flip-body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-top: 32px;
    transition: background-color 0.8s ease;
}
.theme-switcher-grid {
    display: grid;
    grid-template-columns: repeat(54, 1px);
    grid-template-rows: repeat(24, 1px);
    gap: 0;
    position: relative;
    background-color: var(--day-bg-color);
    border-radius: 49px;
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: background-color 0.8s ease, border-color 0.8s ease;
    appearance: none;
    padding: 0;
}
.theme-switcher-grid.night-theme {
    background-color: var(--night-bg-color);
    border-color: var(--border-color-dark);
}
.sun {
    background-color: var(--sun-color);
    grid-column: 3 / 23;
    grid-row: 3 / 23;
    border-radius: 50%;
    transition: grid-column 0.8s ease, background-color 0.8s ease;
    height: 20px;
}
.theme-switcher-grid.night-theme .sun {
    grid-column: 33 / 53;
    background-color: var(--moon-color);
}
.moon-overlay {
    position: absolute;
    border-radius: 50%;
    transition: left 0.8s ease, background-color 0.8s ease;
    z-index: 1;
    background-color: var(--day-bg-color);
}
.theme-switcher-grid.night-theme .moon-overlay {
    display: block;
    left: calc(28 / 54 * 100%);
    top: calc(4 / 29 * 100%);
    width: 18px;
    height: 18px;
    background-color: var(--night-bg-color);
}
.cloud-ball {
    background-color: var(--cloud-color);
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: absolute;
    transition: all 0.8s ease;
    z-index: 2;
}
#ball1 {
    top: calc((8 / 24) * 100%);
    left: calc((12 / 54) * 100%);
}
#ball2 {
    top: calc((8 / 24) * 100%);
    left: calc((17 / 54) * 100%);
}
#ball3 {
    top: calc((8 / 24) * 100%);
    left: calc((22 / 54) * 100%);
}
#ball4 {
    top: calc((6 / 24) * 100%);
    left: calc((17 / 54) * 100%);
}
.theme-switcher-grid.night-theme #ball1 {
    top: calc((16 / 24) * 100%);
    left: calc((16 / 54) * 100%);
    width: 2px;
    height: 2px;
}
.theme-switcher-grid.night-theme #ball2 {
    top: calc((3 / 24) * 100%);
    left: calc((22 / 54) * 100%);
    width: 2px;
    height: 2px;
}
.theme-switcher-grid.night-theme #ball3 {
    top: calc((10 / 24) * 100%);
    left: calc((29 / 54) * 100%);
    width: 2px;
    height: 2px;
}
.theme-switcher-grid.night-theme #ball4 {
    top: calc((5 / 24) * 100%);
    left: calc((34 / 54) * 100%);
    width: 2px;
    height: 2px;
}
.star {
    background-color: var(--star-color);
    width: 1px;
    height: 1px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.8s ease;
}
#star1 {
    top: calc((7 / 24) * 100%);
    left: calc((10 / 54) * 100%);
    border-radius: 50%;
}
#star2 {
    top: calc((9 / 24) * 100%);
    left: calc((16 / 54) * 100%);
    border-radius: 50%;
}
#star3 {
    top: calc((13 / 24) * 100%);
    left: calc((23 / 54) * 100%);
    border-radius: 50%;
}
#star4 {
    top: calc((18 / 24) * 100%);
    left: calc((29 / 54) * 100%);
    border-radius: 50%;
}
.theme-switcher-grid.night-theme #star1,
.theme-switcher-grid.night-theme #star2,
.theme-switcher-grid.night-theme #star3,
.theme-switcher-grid.night-theme #star4 {
    opacity: 1;
}