:root{--white: oklch(1 0 0);--cloud: oklch(.9249 0 0);--day: oklch(.8981 .0591 233.69);--night: oklch(.2068 .0233 284.18);--day-border: oklch(.9337 .0382 233.21);--night-border: oklch(.2832 .0201 285.05);--day-shadow: oklch(.4923 0 0);--night-shadow: oklch(.9079 0 0);--sun: oklch(.941 .0684 87.53);--sun-shadow: oklch(.9022 .1072 85.47);--sun-circle-shadow: oklch(.8793 .1302 84.64);--moon: oklch(.9576 .0054 183.03);--crater: oklch(.7934 .0063 182.97);--crater-shadow: oklch(.8179 .0069 185.23)}@keyframes cloud-travel1{0%{left:-80px;transform:scale(1)}to{left:330px;transform:scale(.8)}}@keyframes cloud-travel2{0%{left:-90px;transform:scale(.6)}to{left:330px;transform:scale(1)}}@keyframes cloud-travel3{0%{left:-100px;transform:scale(.7)}to{left:340px;transform:scale(.65)}}@keyframes grow-brighter{0%{box-shadow:0 0 4px 0 var(--white)}to{box-shadow:0 0 15px 0 var(--white)}}@keyframes grow-trail{0%{width:40px}8.33%{width:180px}to{width:180px}}@keyframes shooting-star{0%{transform:translate(200px,-30px) rotate(-30deg)}8.33%{transform:translate(-180px,170px) rotate(-30deg)}to{transform:translate(-180px,170px) rotate(-30deg)}}@keyframes star-travel1{0%{transform:rotate(65deg) translate(-80px) scale(1)}to{transform:rotate(-60deg) translate(-80px) scale(1.3)}}@keyframes star-travel2{0%{transform:rotate(27deg) translate(-160px) scale(1.6)}to{transform:rotate(-25deg) translate(-160px) scale(1.2)}}@keyframes star-travel3{0%{transform:rotate(22deg) translate(-200px) scale(1.2)}to{transform:rotate(-20deg) translate(-200px) scale(.7)}}.day-and-night-switch{position:absolute;left:50%;top:50%;width:300px;height:120px;cursor:pointer;border-radius:70px;border-width:5px;border-color:var(--day-border);background-color:var(--day);box-shadow:0 0 35px 1px var(--day-shadow);transition:border-color 1s,background-color 1s,box-shadow 1s}.day-and-night-switch[data-state=checked]{border-color:var(--night-border);background-color:var(--night);box-shadow:0 0 35px 1px var(--night-shadow)}.wrapper{position:absolute;inset:0;border-radius:60px;overflow:hidden;z-index:2}.circle{position:absolute;left:0;top:50%;width:70px;height:70px;border-radius:50%;background:var(--sun);box-shadow:0 0 20px 10px var(--sun),0 0 40px 30px var(--sun-shadow),0 0 90px 50px var(--sun-circle-shadow);transform:translateY(-50%);transition:left 2s,transform 2s,width 2s,height 2s,box-shadow 2s,background-color 2s .2s;z-index:1}.circle:before,.circle:after{content:"";position:absolute;border-radius:50%;background:var(--crater);opacity:0;transition:opacity 0s}.circle:before{left:13%;top:30%;width:12px;height:20px;box-shadow:0 0 4px 1px var(--crater),0 0 10px 6px var(--crater-shadow)}.circle:after{left:60%;top:75%;width:12px;height:12px;box-shadow:0 0 3px 1px var(--crater),0 0 5px 4px var(--crater-shadow)}.day-and-night-switch[data-state=checked] .circle{left:66%;width:100px;height:100px;background:var(--moon);box-shadow:0 0 20px 3px var(--moon)}.day-and-night-switch[data-state=checked] .circle:before,.day-and-night-switch[data-state=checked] .circle:after{opacity:1;transition:opacity 2s .2s}.star{position:absolute;left:80%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--white);box-shadow:0 0 5px 0 var(--white);animation:none;opacity:0}.star:before,.star:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--white);box-shadow:0 0 4px 0 var(--white);animation:grow-brighter 1s linear alternate infinite}.star:before{width:20px;height:1px}.star:after{width:1px;height:20px}.day-and-night-switch[data-state=checked] .star{opacity:1;transition:opacity 2s 1.5s}.day-and-night-switch[data-state=checked] .star:nth-of-type(1){animation:star-travel1 15s linear infinite;animation-delay:.4s}.day-and-night-switch[data-state=checked] .star:nth-of-type(2){animation:star-travel2 12s linear infinite;animation-delay:.2s}.day-and-night-switch[data-state=checked] .star:nth-of-type(3){animation:star-travel3 18s linear infinite;animation-delay:0s}.shooting-star{position:absolute;transform:translate(200px,-30px) rotate(-30deg);opacity:0}.meteor{position:absolute;left:20%;top:50%;width:25px;height:25px;border-radius:50%;background:radial-gradient(#ffe7c1e5 30%,#ed9b3d);box-shadow:-5px 0 20px 2px #ed9b3db3,0 0 15px 5px #ed9b3d7f}.meteor:after{content:"";position:absolute;top:50%;width:160px;height:15px;transform:translateY(-50%);border-radius:10px 70% 70% 10px;background:radial-gradient(#ffe7c1e5 1%,#ed9b3de5);box-shadow:10px 0 10px 1px #ed9b3d7f,0 3px 15px 5px #ed9b3d7f,0 -3px 15px 5px #ed9b3d7f;z-index:-1}.day-and-night-switch[data-state=checked] .shooting-star{animation:shooting-star 24s linear infinite;animation-delay:6s;opacity:1;transition:opacity 0s 2s}.day-and-night-switch[data-state=checked] .meteor:after{animation:grow-trail 24s linear infinite;animation-delay:6s}.cloud{position:absolute;border-radius:50%;background:radial-gradient(var(--white) 30%,var(--cloud));z-index:2;opacity:1;transition:opacity 2s .4s}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(var(--white) 30%,var(--cloud));z-index:3}.cloud:nth-of-type(1){left:-80px;top:5px;width:50px;height:55px;animation:cloud-travel1 22s linear infinite;animation-delay:5.4s}.cloud:nth-of-type(1):before{left:-55%;top:70%;width:30px;height:20px;transform:translate(100%)}.cloud:nth-of-type(1):after{left:100%;top:50%;width:40px;height:30px;transform:translate(-70%,-0%)}.cloud:nth-of-type(2){left:-90px;top:26px;width:55px;height:50px;animation:cloud-travel2 18s linear infinite;animation-delay:1.2s}.cloud:nth-of-type(2):before{left:-55%;top:70%;width:30px;height:20px;transform:translate(100%,-30%)}.cloud:nth-of-type(2):after{left:50%;top:50%;width:40px;height:30px;transform:translate(-50%,-40%)}.cloud:nth-of-type(3){left:-100px;top:48px;width:50px;height:40px;animation:cloud-travel3 30s linear infinite;animation-delay:8.6s;z-index:3}.cloud:nth-of-type(3):before{left:-50%;top:50%;width:40px;height:30px;z-index:3}.cloud:nth-of-type(3):after{left:50%;top:50%;width:40px;height:25px;transform:translate(5%,-60%);z-index:3}.day-and-night-switch[data-state=checked] .cloud{opacity:0;transition:opacity 1s 0s;animation:none}.cloud-part,.cloud-part:before,.cloud-part:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(var(--white) 30%,var(--cloud))}.cloud-part:nth-of-type(1),.cloud-part:nth-of-type(2){bottom:0;z-index:2}.cloud-part:nth-of-type(1):before,.cloud-part:nth-of-type(1):after,.cloud-part:nth-of-type(2):before,.cloud-part:nth-of-type(2):after{top:50%;z-index:3}.cloud:nth-of-type(1) .cloud-part:nth-of-type(1){left:-100%;width:60px;height:45px;transform:translate(40%)}.cloud:nth-of-type(1) .cloud-part:nth-of-type(1):after{left:50%;width:55px;height:35px;transform:translate(-35%,-50%)}.cloud:nth-of-type(1) .cloud-part:nth-of-type(2){left:100%;width:40px;height:40px;transform:translate(-50%)}.cloud:nth-of-type(1) .cloud-part:nth-of-type(2):before{left:-50%;width:45px;height:40px;transform:translate(20%,-70%)}.cloud:nth-of-type(2) .cloud-part:nth-of-type(1){left:-100%;width:55px;height:45px;transform:translate(50%)}.cloud:nth-of-type(2) .cloud-part:nth-of-type(1):after{left:50%;width:55px;height:30px;transform:translate(-35%,-20%)}.cloud:nth-of-type(2) .cloud-part:nth-of-type(2){left:100%;width:50px;height:40px;transform:translate(-50%)}.cloud:nth-of-type(2) .cloud-part:nth-of-type(2):before{left:-50%;width:50px;height:35px;transform:translate(10%,-40%)}.cloud:nth-of-type(3) .cloud-part:nth-of-type(1){left:-50%;top:50%;width:45px;height:35px;transform:translateY(-40%);z-index:2}.cloud:nth-of-type(3) .cloud-part:nth-of-type(1):before{left:-30%;top:50%;width:30px;height:20px;transform:translateY(-60%);z-index:3}.cloud:nth-of-type(3) .cloud-part:nth-of-type(1):after{left:0;top:50%;width:20px;height:15px;transform:translateY(10%);z-index:3}.cloud:nth-of-type(3) .cloud-part:nth-of-type(2){left:50%;top:50%;width:50px;height:45px;transform:translate(10%,-20%);z-index:2}.cloud:nth-of-type(3) .cloud-part:nth-of-type(2):before{left:50%;top:50%;width:35px;height:25px;transform:translate(-50%,-50%);z-index:3}.cloud:nth-of-type(3) .cloud-part:nth-of-type(2):after{left:60%;top:50%;width:35px;height:25px;transform:translateY(-40%);z-index:3}.cloud:nth-of-type(3) .cloud-part:nth-of-type(3){left:50%;top:50%;width:55px;height:40px;transform:translate(-50%,-10%);z-index:2}.cloud:nth-of-type(3) .cloud-part:nth-of-type(3):before{left:-50%;top:50%;width:40px;height:25px;transform:translate(40%,-30%);z-index:3}