body{background-color:#121212;color:#fff;font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}#drum-machine{display:flex;flex-direction:column;align-items:center}#drum-pads{display:grid;grid-template-columns:repeat(3,100px);grid-gap:10px}.drum-pad{width:100px;height:100px;background-color:#333;border:2px solid #444444;border-radius:5px;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s,transform .1s}.drum-pad:hover{background-color:#555}.drum-pad:active{background-color:#777;transform:scale(.95)}.clip{display:none}#display{margin-top:20px;padding:10px;width:100%;max-width:300px;text-align:center;background-color:#222;border:2px solid #444444;border-radius:5px;font-size:1.2em;height:50px;display:flex;justify-content:center;align-items:center}