#switch{position:relative;width:5.6rem;height:2.6rem;border-radius:2rem;border:2px solid #ebebeb;background-color:#9bdaff;transition:background-color 1s;box-shadow:0 0 2px 1px #aeaeae}#switch.off{border-color:#282833;background-color:#171723}#contentwrapper{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:2rem;-webkit-border-radius:2rem;overflow:hidden;z-index:2}#circle{position:absolute;left:1%;top:50%;transform:translateY(-50%);background:#ffdc6e;box-shadow:0 0 30px 15px rgba(255,240,140,.8),0 0 60px 30px rgba(255,220,120,.7);transition:left 2s,transform 2s,width 2s,height 2s,box-shadow 2s,background-color 2s .2s;z-index:1}#circle,#switch.off #circle{width:2.25rem;height:2.25rem;border-radius:50%}#switch.off #circle{background-color:#edf2f1;left:99%;transform:translate(-100%,-50%);box-shadow:0 0 20px 3px #f4f7f6}#circle:before{height:10px;left:13%;top:30%;box-shadow:0 0 4px 1px #b7bcbb,0 0 10px 6px #c0c6c5}#circle:after,#circle:before{content:"";position:absolute;width:6px;border-radius:50%;background-color:#b7bcbb;opacity:0;transition:opacity 0s}#circle:after{height:6px;left:60%;top:75%;box-shadow:0 0 3px 1px #b7bcbb,0 0 5px 4px #c0c6c5}#switch.off #circle:after,#switch.off #circle:before{opacity:1;transition:opacity 2s .2s}.star{position:absolute;width:3px;height:3px;left:80%;top:50%;border-radius:50%;background-color:#fff;box-shadow:0 0 5px 0 #fff;animation:none;opacity:0}.star:before{width:10px;height:1px}.star:after,.star:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background-color:#fff;box-shadow:0 0 4px 0 #fff;animation:growbrighter 1s linear infinite alternate}.star:after{width:1px;height:10px}#switch.off .star{opacity:1;transition:opacity 2s 1.5s}#switch.off #stars .star:first-of-type{animation:startravel1 15s linear infinite;animation-delay:.4s}#switch.off #stars .star:nth-of-type(2){animation:startravel2 12s linear infinite;animation-delay:.2s}#switch.off #stars .star:nth-of-type(3){animation:startravel3 18s linear infinite;animation-delay:0s}@keyframes growbrighter{0%{box-shadow:0 0 4px 0 #fff}to{box-shadow:0 0 15px 0 #fff}}@keyframes startravel1{0%{transform:rotate(65deg) translate(-80px) scale(1)}to{transform:rotate(-60deg) translate(-80px) scale(1.3)}}@keyframes startravel2{0%{transform:rotate(27deg) translate(-160px) scale(1.6)}to{transform:rotate(-25deg) translate(-160px) scale(1.2)}}@keyframes startravel3{0%{transform:rotate(22deg) translate(-200px) scale(1.2)}to{transform:rotate(-20deg) translate(-200px) scale(.7)}}#shtngstarwrapper{position:absolute;transform:translate(200px,-30px) rotate(-30deg);opacity:0}#shootingstar{position:absolute;width:12.5px;height:12.5px;border-radius:50%;left:50%;top:40%;background:radial-gradient(rgba(255,231,193,.9) 30%,#ed9b3d);box-shadow:-5px 0 20px 2px rgba(237,155,61,.7),0 0 15px 5px rgba(237,155,61,.5)}#shootingstar:after{content:"";position:absolute;width:80px;height:7.5px;border-top-right-radius:70%;border-bottom-right-radius:70%;border-top-left-radius:10px;border-bottom-left-radius:10px;top:50%;transform:translateY(-50%);background:radial-gradient(rgba(255,231,193,.9) 1%,rgba(237,155,61,.9));box-shadow:10px 0 10px 1px rgba(237,155,61,.5),0 3px 15px 5px rgba(237,155,61,.5),0 -3px 15px 5px rgba(237,155,61,.5);z-index:-1}#switch.off #shtngstarwrapper{animation:shootingstartravel 24s linear infinite;animation-delay:6s;opacity:1;transition:opacity 0s 2s}#switch.off #shootingstar:after{animation:growtrail 24s linear infinite;animation-delay:6s}@keyframes shootingstartravel{0%{transform:translate(200px,-30px) rotate(-30deg)}8.33%{transform:translate(-180px,170px) rotate(-30deg)}to{transform:translate(-180px,170px) rotate(-30deg)}}@keyframes growtrail{0%{width:40px}8.33%{width:180px}to{width:180px}}.cloud:first-of-type{position:absolute;width:25px;height:27.5px;left:-80px;top:5px;border-radius:50%;background:radial-gradient(#fff 30%,#e6e6e6);z-index:2;opacity:1;transition:opacity 2s .4s;animation:cloudtravel1 22s linear infinite;animation-delay:5.4s}.cloud:first-of-type:before{width:15px;height:10px;left:-55%;top:70%;transform:translate(100%)}.cloud:first-of-type:after,.cloud:first-of-type:before{content:"";position:absolute;border-radius:50%;background:inherit;z-index:3}.cloud:first-of-type:after{width:20px;height:15px;left:100%;top:50%;transform:translate(-70%)}.cloud:first-of-type .cloudpart:first-of-type{content:"";position:absolute;width:30px;height:22.5px;left:-100%;bottom:0;transform:translate(40%);border-radius:50%;background:inherit;z-index:2}.cloud:first-of-type .cloudpart:nth-of-type(2){content:"";position:absolute;width:20px;height:20px;left:100%;bottom:0;transform:translate(-50%);border-radius:50%;background:inherit;z-index:2}.cloud:first-of-type .cloudpart:first-of-type:after{content:"";position:absolute;width:27.5px;height:17.5px;left:50%;top:50%;transform:translate(-35%,-50%);border-radius:50%;background:inherit;z-index:3}.cloud:first-of-type .cloudpart:nth-of-type(2):before{content:"";position:absolute;width:22.5px;height:20px;left:-50%;top:50%;transform:translate(20%,-70%);border-radius:50%;background:inherit;z-index:3}.cloud:nth-of-type(2){position:absolute;width:27.5px;height:25px;left:-90px;top:26px;border-radius:50%;background:radial-gradient(#fff 30%,#e6e6e6);z-index:2;opacity:1;transition:opacity 2s .4s;animation:cloudtravel2 18s linear infinite;animation-delay:1.2s}.cloud:nth-of-type(2):before{width:15px;height:10px;left:-55%;top:70%;transform:translate(100%,-30%)}.cloud:nth-of-type(2):after,.cloud:nth-of-type(2):before{content:"";position:absolute;border-radius:50%;background:inherit;z-index:3}.cloud:nth-of-type(2):after{width:20px;height:15px;left:50%;top:50%;transform:translate(-50%,-40%)}.cloud:nth-of-type(2) .cloudpart:first-of-type{content:"";position:absolute;width:27.5px;height:22.5px;left:-100%;bottom:0;transform:translate(50%);border-radius:50%;background:inherit;z-index:2}.cloud:nth-of-type(2) .cloudpart:nth-of-type(2){content:"";position:absolute;width:25px;height:20px;left:100%;bottom:0;transform:translate(-50%);border-radius:50%;background:inherit;z-index:2}.cloud:nth-of-type(2) .cloudpart:first-of-type:after{content:"";position:absolute;width:27.5px;height:15px;left:50%;top:50%;transform:translate(-35%,-20%);border-radius:50%;background:inherit;z-index:3}.cloud:nth-of-type(2) .cloudpart:nth-of-type(2):before{content:"";position:absolute;width:25px;height:17.5px;left:-50%;top:50%;transform:translate(10%,-40%);border-radius:50%;background:inherit;z-index:3}.cloud:nth-of-type(3){position:absolute;width:25px;height:20px;left:-100px;top:48px;border-radius:50%;z-index:3;opacity:1;background:radial-gradient(#fff 30%,#e6e6e6);transition:opacity 2s .4s;animation:cloudtravel3 30s linear infinite;animation-delay:8.6s}.cloud:nth-of-type(3):before{height:15px;left:-50%;transform:translate(25%,-30%)}.cloud:nth-of-type(3):after,.cloud:nth-of-type(3):before{content:"";position:absolute;width:20px;top:50%;border-radius:50%;z-index:3;background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3):after{height:12.5px;left:50%;transform:translate(5%,-60%)}.cloud:nth-of-type(3) .cloudpart:first-of-type{position:absolute;width:22.5px;height:17.5px;left:-50%;top:50%;border-radius:50%;z-index:2;transform:translateY(-40%);background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3) .cloudpart:first-of-type:before{width:15px;height:10px;left:-30%;transform:translateY(-60%)}.cloud:nth-of-type(3) .cloudpart:first-of-type:after,.cloud:nth-of-type(3) .cloudpart:first-of-type:before{content:"";position:absolute;top:50%;border-radius:50%;z-index:3;background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3) .cloudpart:first-of-type:after{width:10px;height:7.5px;left:0;transform:translateY(10%)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(2){position:absolute;width:25px;height:22.5px;left:50%;top:50%;border-radius:50%;z-index:2;transform:translate(10%,-20%);background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(2):before{left:50%;transform:translate(-50%,-50%)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(2):after,.cloud:nth-of-type(3) .cloudpart:nth-of-type(2):before{content:"";position:absolute;width:17.5px;height:12.5px;top:50%;border-radius:50%;z-index:3;background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(2):after{left:60%;transform:translateY(-40%)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(3){position:absolute;width:27.5px;height:20px;left:50%;top:50%;border-radius:50%;z-index:2;transform:translate(-50%,-10%);background:radial-gradient(#fff 30%,#e6e6e6)}.cloud:nth-of-type(3) .cloudpart:nth-of-type(3):before{content:"";position:absolute;width:20px;height:12.5px;left:-50%;top:50%;transform:translate(40%,-30%);border-radius:50%;z-index:3;background:radial-gradient(#fff 30%,#e6e6e6)}#switch.off .cloud:first-of-type,#switch.off .cloud:nth-of-type(2),#switch.off .cloud:nth-of-type(3){animation:none;opacity:0;transition:opacity 1s 0s}@keyframes cloudtravel1{0%{left:-80px;transform:scale(1)}to{left:330px;transform:scale(.8)}}@keyframes cloudtravel2{0%{left:-90px;transform:scale(.6)}to{left:330px;transform:scale(1)}}@keyframes cloudtravel3{0%{left:-100px;transform:scale(.7)}to{left:340px;transform:scale(.65)}}