@import"https://fonts.googleapis.com/css2?family=Freckle+Face&family=Luckiest+Guy&family=Rubik+Iso&display=swap";*{padding:0;margin:0}body{display:flex;align-items:center;justify-content:center;height:100vh;background-color:#fff;font-family:Luckiest Guy,cursive}div{text-align:center}#legend{display:flex;align-items:center;justify-content:center}#drum-machine{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;background-color:#b3d9f7;height:500px;width:500px}#drum-machine>*{margin:5px}#padkeys{display:grid;grid-template-columns:repeat(3,1fr)}#padkeys>*{background-color:#fff;padding:10px;margin:5px;cursor:pointer;transition:background-color .3s;min-width:100px}#padkeys>*:hover{background-color:#e72623}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#e72623}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}#legend-text{padding:40px 10px}#volume{accent-color:#E72623}#padkeys>*.active{background-color:#ff0}