*{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh;margin:0}body{font-family:Lato,sans-serif;font-size:16px;line-height:1.5;padding:1rem;display:flex;justify-content:center;align-items:center;background-color:gray}#drum-machine{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:600px;margin:0 auto;border:5px solid orange;padding:2rem;background-color:#b3b3b3}#left-panel{display:flex;align-items:center;height:100%}.drum-pad{display:flex;justify-content:center;align-items:center;width:100px;height:80px;border:1px solid gray;text-align:center;font-weight:700;border-radius:5px;background-color:gray;cursor:pointer;box-shadow:6px 6px 10px #00000080}#pads-container{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.drum-pad.active{box-shadow:0 0 20px orange;transform:scale(1.05)}#right-panel{display:flex;align-items:center;height:100%}#power{background-color:#48d1cc;padding:.2rem;font-weight:700;border:none}#display{background-color:gray;padding:1rem 2rem}#controls-container{display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;height:100%}