*{margin:0;padding:0;border-size:border-box}#root{display:flex;justify-content:center;align-items:center;height:70vh;padding:50px}body{background-color:gray}#drum-machine{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;width:477px;margin-top:100px;outline:5px darkcyan solid;border-radius:7px;background-color:#696969}#display{font-size:24px;text-align:center;margin-bottom:20px;width:70%;padding:10px;border-radius:5px;box-shadow:-7px 7px 5px gray;background-color:#a9a9a9;color:#000}.row{display:grid;grid-template-columns:repeat(3,100px);gap:17px}.drum-pad{width:100px;height:100px;font-size:24px;display:flex;align-items:center;justify-content:center;text-align:center;outline:1px solid lightgrey;border-radius:5px;background-color:gray;font-weight:700;font-family:sans-serif,cursive,Arial;color:#000;border:none;cursor:pointer;box-shadow:-5px 5px 5px gray}.drum-pad:active{background-color:#008b8b}button{background-color:#2b8786;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:5px;cursor:pointer;margin-top:20px;box-shadow:-5px 5px 5px gray;transition:background-color .2s ease-in-out}button:hover{background-color:#008b8b}.clip{display:none}@media (max-width: 600px){#drum-machine{padding:15px}.current-sound{font-size:18px}.drum-pad{font-size:22px}}@media (max-width: 400px){.pad-bank{gap:10px}.drum-pad{font-size:18px}.toggle-button{font-size:14px;padding:10px 15px}}@keyframes padActive{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.drum-pad.active{animation:padActive .1s ease}