.switch{font-size:17px;position:relative;width:64px;height:30px;cursor:pointer}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#212121;border-radius:30px}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:24px;width:24px;border-radius:20px;left:4px;bottom:3px;z-index:2;background-color:#fff}.sun svg{left:36px}.moon svg,.sun svg{position:absolute;top:4px;z-index:1;width:22px;height:22px}.moon svg{fill:#333434;left:5px}.sun svg{animation:rotate 15s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.moon svg{animation:tilt 5s linear infinite}@keyframes tilt{0%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}to{transform:rotate(0deg)}}.input:checked+.slider{background-color:#bfbfbf}.input:focus+.slider{box-shadow:0 0 1px #183153}.input:checked+.slider:before{transform:translateX(30px)}