@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
*{box-sizing:border-box}body{font-family:"Roboto",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;overflow:hidden;margin:0}.toggle-container{display:flex;align-items:center;margin:10px 0;width:200px}.toggle{visibility:hidden}.label{position:relative;background-color:#d0d0d0;border-radius:50px;cursor:pointer;display:inline-block;margin:0 15px 0;width:80px;height:40px}.toggle:checked+.label{background-color:#8e44ad}.ball{background:#fff;height:34px;width:34px;border-radius:50%;position:absolute;top:3px;left:3px;align-items:center;justify-content:center;animation:slideOff .3s linear forwards}.toggle:checked+.label .ball{animation:slideOn .3s linear forwards}@keyframes slideOn{0%{transform:translateX(0) scale(1)}50%{transform:translateX(20px) scale(1.2)}100%{transform:translateX(40px) scale(1)}}@keyframes slideOff{0%{transform:translateX(40px) scale(1)}50%{transform:translateX(20px) scale(1.2)}100%{transform:translateX(0) scale(1)}}