body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}body{color:#000;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;margin:1% auto}.footer{text-align:center;font-size:20px;margin:auto}.drum-mach{border:1px solid orange;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;margin:auto;width:450px}.title{background-color:orange;padding:10px;font-weight:700}.label{font-size:20px}.pad-display{display:-ms-grid;display:grid;-ms-grid-columns:auto auto auto;grid-template-columns:auto auto auto;margin:30px auto;width:360px;height:300px;border:5px solid #fb0;border-radius:10px}.pad-display .drum-pad{border:1px solid #fb0;height:45px;width:70px;margin:auto;display:inline-block}.pad-display .btn-active{background-color:red}.drum-control-volume{width:400px;margin:auto}.drum-control-volume .label{display:block;text-align:center;margin-top:10px;margin-bottom:0;font-size:20px}.drum-control-volume input[type=range]{height:27px;-webkit-appearance:none;margin:10px auto;width:90%}.drum-control-volume input[type=range]:focus{outline:none}.drum-control-volume input[type=range]::-webkit-slider-runnable-track{width:50%;height:11px;cursor:pointer;box-shadow:1px 1px 1px #50555c;background:#1e1e1e;border-radius:50px;border:0 solid #000}.drum-control-volume input[type=range]::-webkit-slider-thumb{box-shadow:0 0 1px #000;border:3px solid #646464;height:18px;width:18px;border-radius:50px;background:#fb0;cursor:pointer;-webkit-appearance:none;margin-top:-5px}.drum-control-volume input[type=range]:focus::-webkit-slider-runnable-track{background:#50555c}.drum-control-volume input[type=range]::-moz-range-track{width:90%;height:11px;cursor:pointer;box-shadow:1px 1px 1px #50555c;background:#50555c;border-radius:50px;border:0 solid #000}.drum-control-volume input[type=range]::-moz-range-thumb{box-shadow:0 0 1px #000;border:3px solid #fff;height:18px;width:18px;border-radius:50px;background:#fb0;cursor:pointer}.drum-control-volume input[type=range]::-ms-track{width:90%;height:11px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.drum-control-volume input[type=range]::-ms-fill-lower,.drum-control-volume input[type=range]::-ms-fill-upper{background:#323232;border:0 solid #000;border-radius:100px;box-shadow:1px 1px 1px #323232}.drum-control-volume input[type=range]::-ms-thumb{margin-top:1px;box-shadow:0 0 1px #000;border:3px solid #646464;height:18px;width:18px;border-radius:50px;background:#fb0;cursor:pointer}.drum-control-volume input[type=range]:focus::-ms-fill-lower,.drum-control-volume input[type=range]:focus::-ms-fill-upper{background:#50555c}.switch{position:relative;display:inline-block;width:50px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#505050}.slider,.slider:before{position:absolute;transition:.4s;border-radius:50px}.slider:before{content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fb0}input:checked+.slider:before{-webkit-transform:translateX(22px);transform:translateX(22px)}
/*# sourceMappingURL=main.f1ee5fb1.chunk.css.map */