.switch{--toggle-size:1}.switch *,.switch :after,.switch :before{box-sizing:border-box}.switch{display:inline-flex;align-items:center;width:170px;height:90px;background-color:#b7cecc;position:relative;border-radius:999px;transition:.4s;cursor:pointer;transform:scale(var(--toggle-size))}.moons{position:absolute;width:100px;height:65px;overflow:hidden;top:0;left:-10px}.moons .star{position:absolute;width:1px;height:1px;top:45px;left:30px;border-radius:999px;background-color:#ffffff}.moons .star.star-1{top:100%;left:75px;transition:.2s}.moons .star.star-2{top:100%;left:65px;transition:.3s}.moons .star.star-3{top:100%;left:85px;transition:.4s}.moons .star.star-4{top:100%;left:60px;transition:.5s}.moons .star.star-5{top:100%;left:44px;transition:.6s}.moons .first-moon{transition:.4s;width:30px;height:30px;left:30px;background-color:#e0d6d6}.moons .first-moon,.moons:after,.moons:before{position:absolute;top:100%;border-radius:999px}.moons:after,.moons:before{transition:.6s;content:"";width:8px;height:8px;background-color:#dde4e6;left:70px}.moons:after{width:5px;height:5px;left:81px;transition:.8s}.sand{width:100%;height:45px;bottom:0;left:0;border-radius:0 0 999px 999px;overflow:hidden}.sand,.suns{position:absolute}.suns{border-radius:1in;width:40px;height:40px;top:10px;right:30px;box-shadow:0 0 15px #EAB308;background-color:#EAB308;transition:.6s}.sand:before{position:absolute;width:100%;height:25px;bottom:0;left:0;content:"";background-color:#B69C77;border-radius:0 0 999px 999px}.bb8{position:absolute;left:-18%;width:140px;transform:scale(.45);transition:left .4s}.slider{display:none}.ball{background-color:ghostwhite;height:165px;overflow:hidden;position:relative;width:165px;transition:transform .4s}.ball,.shadow{border-radius:50%}.shadow{background:#3A271C;box-shadow:5px 0 50px #3A271C;height:23.33px;opacity:.25;position:absolute;width:110px;left:28px;z-index:-1;bottom:-8px}.slider:checked+.switch .bb8{left:29%}.slider:checked+.switch .bb8 .ball{transform:rotate(180deg)}.slider:hover+.switch .bb8 .eyes{left:60%}.slider:checked:hover+.switch .bb8 .eyes{left:-20%}.slider:active+.switch .bb8 .head{transform:translate(30px,3px) rotate(17deg)}.slider:checked:active+.switch .bb8 .head{transform:translate(-35px,6px) rotate(-17deg)}.slider:active+.switch .antennas{transform:translate(35px,-20px) rotate(17deg)}.slider:active:not(:hover)+.switch .antennas{transform:translate(35px,-10px) rotate(17deg)}.slider:checked:active+.switch .antennas{transform:translate(-35px,10px) rotate(-17deg)}.slider:checked:active:not(:hover)+.switch .antennas{transform:translate(-25px,25px) rotate(-17deg)}.slider:checked+.switch .antennas,.slider:hover+.switch .antennas{left:6%}.slider:checked+.switch .stripe.detail,.slider:hover+.switch .stripe.detail{left:0}.slider:checked:hover+.switch .antennas{left:28%}.slider:checked:hover+.switch .stripe.detail{left:-38%}.slider:checked+.switch{background-color:#112350}.slider:checked+.switch .suns{top:50px}.slider:checked+.switch .moons .first-moon{top:15px;box-shadow:0 0 10px #B8CCCD}.slider:checked+.switch .moons:after{top:38px;box-shadow:0 0 15px #B8CCCD}.slider:checked+.switch .moons:before{top:34px;box-shadow:0 0 15px #B8CCCD}.slider:checked+.switch .moons .star{box-shadow:0 0 20px 2px #fff}.slider:checked+.switch .moons .star.star-1{top:20px}.slider:checked+.switch .moons .star.star-2,.slider:checked+.switch .moons .star.star-3{top:15px}.slider:checked+.switch .moons .star.star-4{top:45px}.slider:checked+.switch .moons .star.star-5{top:53px}