.scenery-switch{width:300px;height:140px;display:block;position:relative}.switch__background,.switch__background:after,.switch__background:before{position:absolute;left:0;top:0;right:0;bottom:0}.switch__background{border-radius:70px;box-shadow:0 35px 70px -16px rgba(32,15,55,.3);transition:box-shadow .8s;overflow:hidden;will-change:box-shadow}.switch__background:before{background:linear-gradient(#200F37,#272065);overflow:hidden}.switch__background:after,.switch__background:before{content:"";border-radius:70px;transition:opacity .8s;z-index:-2}.switch__background:after{opacity:0;background:linear-gradient(90deg,#21D2F2,#B0FFF8)}.switch__toggle{content:"";height:124px;width:124px;position:relative;display:block;top:8px;left:8px;background:white;border-radius:100%;box-shadow:inset 8px -8px 0 #F8E3EF,0 0 93px rgba(255,255,255,.65);transition:transform .8s,box-shadow .8s;overflow:hidden;cursor:pointer;will-change:transform,box-shadow;transform:translateZ(0)}.switch__toggle:after,.switch__toggle:before{content:"";height:90%;width:124px;position:absolute;left:50%;top:50%;z-index:-1;opacity:0;transition:transition .8s,opacity .8s;background:rgba(255,255,255,.65);filter:blur(8px)}.switch__toggle:before{transform:translate(-50%,-50%) rotate(45deg)}.switch__toggle:after{transform:translate(-50%,-50%)}.switch__moon{width:28px;height:28px;display:block;position:absolute;left:40%;top:35%;background:linear-gradient(to top right,#F8E3EF,rgba(248,227,239,0));box-shadow:28px -28px 0 -8px rgba(248,227,239,.5);border-radius:100%;transition:transform .8s,opacity .8s;will-change:transform,opacity}.switch__moon:before{width:23px;height:23px;left:-70%;top:195%;box-shadow:23px -23px 0 -8px rgba(248,227,239,.5);transform:rotate(-60deg)}.switch__moon:after,.switch__moon:before{content:"";display:block;position:absolute;background:linear-gradient(to top right,#F8E3EF,rgba(248,227,239,0));border-radius:100%}.switch__moon:after{width:35px;height:35px;left:190%;top:55%;box-shadow:35px -35px 0 -8px rgba(248,227,239,.5)}.switch__stars{width:8px;height:8px;left:60%;top:35%;box-shadow:24px -24px 0 -3px white;will-change:transform,opacity}.switch__stars,.switch__stars:before{display:block;position:absolute;background:white;filter:blur(.5px);border-radius:100%;transition:transform .8s,opacity .8s}.switch__stars:before{content:"";width:7px;height:7px;left:700%;top:560%;box-shadow:21px -21px 0 -3px white;transform:rotate(-75deg)}.switch__stars:after{content:"";height:5px;width:5px;position:absolute;left:200%;top:260%;opacity:0;background:linear-gradient(90deg,white,rgba(255,255,255,0));filter:blur(.5px);border-radius:100%;animation:falling-stars 6.4s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:3.2s}.switch__clouds{height:28px;width:28px;top:50%;left:-84px;display:block;transition:1.6s cubic-bezier(.175,.885,.32,1.275);will-change:transform}.switch__clouds,.switch__clouds:after,.switch__clouds:before{background:white;position:absolute;border-radius:50% 50% 0 50%}.switch__clouds:after,.switch__clouds:before{content:"";height:23px;width:23px;left:-33%;bottom:0;box-shadow:inset 4px -2px 0 #F6F8F8}.switch__clouds:after{height:21px;width:21px;left:auto;right:-30%;border-radius:100%}.switch__input{display:none}.switch__input:checked+.switch__background{box-shadow:0 35px 70px -16px rgba(33,210,242,.3)}.switch__input:checked+.switch__background:before{opacity:0}.switch__input:checked+.switch__background:after{opacity:1}.switch__input:checked+.switch__background .switch__toggle{transform:translateX(160px);box-shadow:inset 0 0 .1px white,0 0 32px white;animation:overlay 0s forwards;animation-delay:.4s}.switch__input:checked+.switch__background .switch__toggle:after,.switch__input:checked+.switch__background .switch__toggle:before{opacity:1;transition-delay:.4s}.switch__input:checked+.switch__background .switch__toggle:before{transform:translate(-50%,-50%) rotate(45deg);animation:spin-before 12.8s linear infinite}.switch__input:checked+.switch__background .switch__toggle:after{transform:translate(-50%,-50%);animation:spin-after 12.8s linear infinite}.switch__input:checked+.switch__background .switch__moon{opacity:0;transform:translate(-50%,100%) rotate(30deg)}.switch__input:checked+.switch__background .switch__stars{opacity:0;transform:translateX(-46px)}.switch__input:checked+.switch__background .switch__stars:before{opacity:0;transform:translateX(-35px)}.switch__input:checked+.switch__background .switch__stars:after{animation:none}.switch__input:checked+.switch__background .switch__clouds{transform:translateX(150px);transition-delay:.2s}.switch__input:checked+.switch__background .switch__clouds,.switch__input:checked+.switch__background .switch__clouds:after,.switch__input:checked+.switch__background .switch__clouds:before{animation:cloud-move 8s linear infinite;animation-delay:1.6s}@keyframes overlay{0%{overflow:hidden}to{overflow:visible}}@keyframes spin-before{0%{transform:translate(-50%,-50%) rotate(45deg)}to{transform:translate(-50%,-50%) rotate(405deg)}}@keyframes spin-after{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes falling-stars{0%{width:50%;opacity:1;transform:translate(70px,-70px) rotate(-45deg)}5%{width:400%;opacity:1}15%{box-shadow:-100px -30px 0 -3px white}25%,to{box-shadow:-100px -30px 0 -6px white;width:400%;opacity:0;transform:translate(-70px,70px) rotate(-45deg)}}@keyframes cloud-move{0%{box-shadow:inset 4px -2px 0 #F6F8F8,-100px -46px 5px -2px rgba(33,210,242,0)}50%{box-shadow:inset 4px -2px 0 #F6F8F8,-30px -46px 6px -2px #90e9f8}90%,to{box-shadow:inset 4px -2px 0 #F6F8F8,-3px -46px 15px 2px rgba(33,210,242,0)}}