.drum-pad{background-color:gray;border-radius:5px;width:100px;height:80px;cursor:pointer;box-shadow:3px 3px 5px #000;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.drum-pad:active{background-color:orange}.drum-pad audio{display:none;width:30px;height:30px}@media only screen and (max-width: 670px){.drum-pad{flex:1;min-width:30%;height:auto;min-height:40px}}@media only screen and (max-width: 450px){.drum-pad{width:40px;height:auto;min-height:30px}}@media only screen and (max-width: 290px){.drum-pad{min-height:none;max-width:none;width:40px;height:25px}}.pad-bank{width:100%;flex:1;display:flex;flex-wrap:wrap;gap:.625rem}@media only screen and (max-width: 290px){.pad-bank{gap:.6rem}}.control{width:100%;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.control p{font-size:1rem}.control .select{background-color:#000;padding:1px;width:50px;height:20px;position:relative}.control .select .inner{width:23px;height:15px;background-color:#00f;cursor:pointer;position:absolute;left:3px;top:2px}.control .select .inner.active{left:23px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;background-color:#333;color:#000;height:.5rem;writing-mode:horizontal-tb!important;-webkit-rtl-ordering:logical;box-shadow:1px 1px 2px #000}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:25px;border-radius:none;background:blue;border:none;box-shadow:1px 1px 3px #000}input[type=range]::-ms-range-thumb{width:10px;height:25px;border-radius:none;border:none;background:blue;box-shadow:1px 1px 3px #000}#display{padding:1rem;height:50px;width:200px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;background-color:gray}@media only screen and (max-width: 670px){#display{width:70%}}@media only screen and (max-width: 290px){#display{font-size:.9rem}}.controls-container{width:100%;flex:1;gap:1.5rem;max-width:240px;max-height:272px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}@media only screen and (max-width: 450px){.controls-container{gap:1.2rem}}#drum-machine{width:660px;border:5px solid orange;background-color:#b3b3b3;text-align:center;display:flex;align-items:center;flex-wrap:wrap;justify-items:space-evenly;padding:2rem 1.5rem;gap:2rem}@media only screen and (max-width: 670px){#drum-machine{width:90%;flex-direction:column}}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100vh;font-family:Russo One,sans-serif;font-weight:400}#root{width:100%;height:100vh;background-color:#8d8d8d;position:relative;display:flex;justify-content:center;align-items:center}