.drum-pad{display:flex;justify-content:center;align-items:center;height:100px;background-color:#f0f0f0;font-size:2rem;border:1px solid #ccc;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 6px #0000001a}.drum-pad:hover{background-color:#e0e0e0;transform:scale(1.05);box-shadow:0 8px 12px #0003}.drum-pad:active{background-color:#d0d0d0;transform:scale(.95);box-shadow:0 2px 4px #0000001a}@media (max-width:768px){.drum-pad{height:80px;font-size:1.5rem}}#root{display:flex;align-items:center;justify-content:center;margin:auto;height:100vh}#drum-machine{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:auto;gap:30px;padding:30px;width:90%;max-width:1200px;border:5px solid orange;background-color:#f3f3f3;border-radius:10px}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px;padding:10px;border-radius:10px;background-color:#f8f8f8}.bank,.power{height:40px;width:120px;background-color:#ff4500;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 6px #0000001a}.bank:hover,.power:hover{background-color:orange;transform:scale(1.05);box-shadow:0 8px 12px #0003}.bank:active,.power:active{background-color:#003f8a;transform:scale(.95);box-shadow:0 2px 4px #0000001a}.second-part{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:400px}#display{color:#000;font-weight:500;background-color:gray;padding:10px 20px;border-radius:5px;font-size:1.5rem;width:80%;text-align:center}.volume{display:flex;flex-direction:column;align-items:center;width:100%}.volume input[type=range]{width:100%;max-width:300px}@media (max-width: 768px){.app{flex-direction:column;gap:20px;padding:20px}.keys,.second-part{width:100%;max-width:none}.bank,.power{width:100px}}