:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--color-primary: #00b4c8 !important}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}a{color:#000!important;border-bottom:none!important}h1{font-size:3.2em;line-height:1.1}input[type=checkbox].toggle{height:0;width:0;visibility:hidden}label.toggle{cursor:pointer;text-indent:-9999px;width:200px;height:100px;background:grey;display:block;border-radius:100px;position:relative}label.toggle:after{content:"";position:absolute;top:5px;left:5px;width:90px;height:90px;background:#fff;border-radius:90px;transition:.3s}input.toggle:checked+label.toggle{background:#00b4c8}input.toggle:checked+label.toggle:after{left:calc(100% - 5px);transform:translate(-100%)}label.toggle:active:after{width:130px}.spacer{height:30px}li a:hover{color:#00b4c8!important}span a:hover{color:#fff!important}p{margin:0 auto}.inputExample input{border-radius:4px;padding:6px 12px}.inputExample label{display:blocK}.buttonsExample{display:flex;gap:4px;justify-content:center;padding-bottom:4px}.buttonsExample button{display:flex;justify-content:center;padding:8px 16px;border-radius:4px;width:96px;height:86px}.activeButton{background-color:#2975d0}.inactiveButton{background-color:#c0ddf5}