body{align-items:center;background:#866b6b;color:#fff;display:flex;font-family:Arial,Helvetica,sans-serif;height:100vh;justify-content:center;margin:0}#drum-machine{background-color:#222;border:3px solid #f7e605;border-radius:12px;padding:20px;text-align:center;width:-webkit-max-content;width:max-content}.volume-control{flex-direction:column}.power-control,.volume-control{align-items:center;display:flex}.power-control{gap:10px;justify-content:center;margin-bottom:20px}.power-label{font-weight:700}.power-status{margin-left:5px}h1{font-size:1.8rem}.drum-grid,h1{margin-bottom:20px}.drum-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,80px);justify-content:center}.drum-pad{background:#8a8686;border-radius:8px;box-shadow:2px 2px 5px #111;color:#1e1e1e;cursor:pointer;font-size:1.2rem;font-weight:700;padding:20px;transition:background .2s}.drum-pad:hover{background:#555}.display{background:#333;border-radius:6px;font-weight:700;margin:0 auto 10px;min-width:150px;padding:15px}.controls{color:#fff;margin-top:20px}.controls label{display:block;margin:10px 0}.controls input[type=range]{width:100%}.hint{color:#aaa;font-size:12px;margin-top:10px}.switch{display:inline-block;height:24px;position:relative;width:50px}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;border-radius:24px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;width:18px}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translateX(26px)}
/*# sourceMappingURL=main.a568db2a.css.map*/