body{margin:0;-webkit-user-select:none;user-select:none}.activeClass{background-color:#020d82!important;transform:translateY(3px);box-shadow:none!important}#drum-machine{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;flex-direction:column}#drum-machine h1{margin:0 0 40px;color:#ff0}#drum-machine:focus{outline:none}.container{display:flex;justify-content:center;align-items:center;background-color:#ff0;padding:15px;border:5px solid rgb(52,21,255);box-shadow:0 0 20px 2px #ff0}.padsContainer{max-width:340px}.settings{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:0 15px}.settings button{background-color:#ffff5a;font-size:18px;font-weight:700;padding:5px;border:2px solid rgb(52,21,255);border-radius:5px;box-shadow:0 0 3px 1px #3415ff;outline:none;transition:all .5s}.settings button:hover{cursor:pointer;background-color:#dcdc22}.setting button:active{box-shadow:0 0 5px 1px #3415ff}#display{width:175px;height:40px;background-color:#0011ce;font-weight:700;font-size:20px;text-align:center;line-height:40px}.volume{display:flex;flex-direction:column;color:#000;font-size:18px;font-weight:700;text-align:center}input{outline:none}.drum-pad{width:100px;height:80px;background-color:#0011ce;font-weight:700;border-radius:5px;margin:5px;text-align:center;line-height:80px;cursor:pointer;box-shadow:3px 3px 5px 2px #000;color:#fff;border:none;outline:none}.drum-pad:active{background-color:#020d82;transform:translateY(3px);box-shadow:none}body{background-color:#110266;color:#fff}