body,
html {
    width: 100vw;
    height: 100vh;
    display: block;
    margin: 0;
    padding: 0;
    background-color: #f0f8ff;
    transition: .7s all;
}

body.darkmode {
    background-color: #3a3b3c;
}

.contenedor {
    width: 600px;
    height: 250px;
    display: flex;
    justify-content: center;
    border-radius: 9rem;
    background-color: #ffffff;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    filter: drop-shadow(0px 7px 2px #ffffff6e) drop-shadow(0px -6px 2px #0000006e);
}

.check {
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 53px #000000a1;
    border-radius: 9rem;
    background: #6495ed;
    transition: .7s all;
    cursor: pointer;
}

.active.check {
    background: #3a3b3c;
}

.check:before {
    width: 100%;
    height: 100%;
    box-shadow: inset 0 10px 10px #00000069;
    border-radius: 9rem;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
}

.sun-moon {
    display: block;
    --size: 13.5rem;
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-50%);
    z-index: 10;
    transition: .7s all;
    overflow: hidden;
}

.sun {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffe23e;
    position: relative;
    transform: translate(30%, 115%);
    transform: translate(0%, 0%) !important;
    transition: .7s all;
    overflow: hidden;
}

.active.check .sun {
    transform: translate(0%, 0%) !important;
}

.sun:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    box-shadow: inset 0 8px 8px -2px white;
    border-radius: 50%;
}

.sun:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    box-shadow: inset 0 -8px 8px -2px #00000047;
    border-radius: 50%;
}

.moon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: gainsboro;
    position: absolute;
    transition: .7s all;
    top: 0%;
    left: 206%;
    overflow: hidden;
}

.moon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    box-shadow: inset 0 8px 8px -2px white;
    border-radius: 50%;
}

.moon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    box-shadow: inset 0 -8px 8px -2px #00000047;
    border-radius: 50%;
}

.active.check .moon {
    top: 0%;
    left: 0%;
}

.circulos {
    width: 22rem;
    height: 22rem;
    transform: scale(2);
    position: absolute;
    top: -50px;
    left: -47px;
    display: block;
    overflow: hidden;
    transition: .7s all;
}

.active.check .circulos {
    left: 273px;
}

.circulos>.circulo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    transform: scale(.5);
    opacity: .3;
    position: absolute;
}

.circulos>.circulo:nth-child(2) {
    transform: scale(0.7);
}

.circulos>.circulo:nth-child(3) {
    transform: scale(0.9);
}

.nubes {
    margin: 20px 0px 0px 17px;
    transform: translateY(0rem);
    transition: .7s all;
}

.nube {
    position: absolute;
}

.nube:nth-child(2) {
    top: -2rem;
    opacity: .7;
    left: -1rem;
}

.nube:nth-child(2) {
    top: -5rem;
    opacity: .4;
    left: 0rem;
    transform: scale(.8);
}

.active.check .nubes {
    transform: translateY(25rem);
}

.active.check>.sun-moon {
    left: calc(100% - 15.3rem);
    right: 1.3rem;
    transition: .7s all;
}

.crater:nth-child(1) {
    width: 4rem;
    height: 4rem;
    display: block;
    position: absolute;
    top: 42%;
    left: 20%;
    background: #acafc2;
    border-radius: 50%;
    box-shadow: inset 0 0 13px #00000029;
}

.crater:nth-child(2) {
    width: 2rem;
    height: 2rem;
    display: block;
    position: absolute;
    top: 19%;
    left: 45%;
    background: #acafc2;
    border-radius: 50%;
    box-shadow: inset 0 0 13px #00000029;
}

.crater:nth-child(3) {
    width: 3rem;
    height: 3rem;
    display: block;
    position: absolute;
    top: 55%;
    left: 56%;
    background: #acafc2;
    border-radius: 50%;
    box-shadow: inset 0 0 13px #00000029;
}

.estrellas {
    transform: scale(0.8);
    position: absolute;
    top: -1rem;
    top: 16rem;
    transition: .7s all;
}

.active.check .estrellas {
    top: 16rem;
    top: -1rem;
}

@media screen and (max-width: 600px) {
    .contenedor {
        transform: translate(-50%, -50%) scale(0.4)!important;
    }
}