:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde}body{margin:0;display:flex;place-items:center;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.App{font-family:Roboto,sans-serif;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background-color:#bb7702;color:#fff;width:100vw}.drum-container{background-color:#333;border-radius:5px;padding:20px;width:300px;box-shadow:0 0 10px #0000004d}.drum-pads{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-bottom:20px}.drum-pad{background-color:#555;border-radius:5px;display:flex;align-items:center;justify-content:center;height:80px;cursor:pointer;box-shadow:3px 3px 5px #00000080;font-weight:700;font-size:1.5rem;transition:background-color .1s,transform .1s}.drum-pad:active,.drum-pad.active{background-color:#777;transform:scale(.95);box-shadow:1px 1px 3px #00000080}.controls{background-color:#222;padding:15px;border-radius:5px}#display{background-color:#000;font-family:Digital,monospace;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;letter-spacing:1px;border-radius:3px}