*{box-sizing:border-box}body{margin:0;padding:15px;font:normal normal normal 1rem/1.6 Nunito Sans,Helvetica,Arial,sans-serif;color:#aaa;background-color:#aaa}a{text-decoration:none;color:#35ca35}.drum{padding:15px;background-color:#3f3f3f;margin:30px auto 0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px}.drum-display{background-color:#202020;color:#35ca35;text-transform:uppercase;font-weight:700;padding:20px 15px;text-align:center;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;margin-top:30px;border:1px solid #000}.drum-display h1{margin:0;transition:all .35s ease-in-out}.drum-control{display:flex;display:-webkit-flex;justify-content:space-between;margin-top:30px;font-size:.85rem}.drum-control-volumn{margin-left:5px;width:calc(100% - 140px)}.drum-control-bank{width:120px}.drum-control-volumn-value{opacity:0;color:#35ca35;transition:all .35s ease-in-out}.drum-control-volumn input{padding-right:15px}.drum-pads{margin-top:40px;width:100%;display:flex;display:-webkit-flex;flex-flow:row wrap;justify-content:space-around}.drum-pad{display:block;flex-grow:1;flex-shrink:1;flex-basis:calc(33.3333% - 0.5rem);width:33.3333%;margin:.25rem;background-color:#202020;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;padding-top:30px;padding-bottom:30px;text-align:center;border:1px solid #000;transition:all .35s ease-in-out}.drum-pad:hover{cursor:pointer;box-shadow:0 1px 3px hsla(0,0%,100%,.12),0 1px 2px hsla(0,0%,100%,.24);-webkit-box-shadow:0 1px 3px hsla(0,0%,100%,.12),0 1px 2px hsla(0,0%,100%,.24);-moz-box-shadow:0 1px 3px hsla(0,0%,100%,.12),0 1px 2px hsla(0,0%,100%,.24)}.drum-pad.active,.drum-pad:active{background-color:#35ca35}.drum-footer{text-align:center;margin-top:15px}@media (min-width:576px){.drum{max-width:385px}}.switch{position:relative;display:inline-block;width:38px;height:23px}.switch input{display:none}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#202020;border:1px solid #000}.slider,.slider:before{position:absolute;transition:all .35s ease-in-out}.slider:before{content:"";height:15px;width:15px;left:3px;bottom:3px;background-color:#35ca35}input:checked+.slider:before{transform:translateX(15px)}.slider.round{border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px}.slider.round:before{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%}[type=range]{--range:calc(var(--max, 100) - var(--min, 0));--ratio:calc((var(--val, 50) - var(--min, 0))/var(--range));--sx:calc(var(--thumb-width, "1.15em")*0.5 + var(--ratio)*(100% - var(--thumb-width, "1.15em")));margin:0;padding:0;width:100%;width:var(--width,100%);height:"1.5em";height:var(--height,"1.5em");background:transparent;font:1em/1 arial,sans-serif;outline:none}[type=range],[type=range]::-webkit-slider-thumb{-webkit-appearance:none}[type=range]::-webkit-slider-runnable-track{box-sizing:border-box;border:1px "solid" "#000";border:var(--track-border-width,1px) var(--track-border-style,"solid") var(--track-border-color,"#000");width:100%;width:var(--width,100%);height:"0.75em";height:var(--track-height,"0.75em");background:"#202020";background:var(--track-color,"#202020");border-radius:"0.5em";border-radius:var(--border-radius,"0.5em");-webkit-border-radius:"0.5em";-webkit-border-radius:var(--border-radius,"0.5em");-moz-border-radius:"0.5em";-moz-border-radius:var(--border-radius,"0.5em");-ms-border-radius:"0.5em";-ms-border-radius:var(--border-radius,"0.5em");background:linear-gradient(#35ca35,#35ca35) 0/var(--sx) 100% no-repeat "#202020";background:linear-gradient(var(--progress-color,#35ca35),var(--progress-color,#35ca35)) 0/var(--sx) 100% no-repeat var(--track-color,"#202020")}[type=range]::-moz-range-track{box-sizing:border-box;border:1px "solid" "#000";border:var(--track-border-width,1px) var(--track-border-style,"solid") var(--track-border-color,"#000");width:100%;width:var(--width,100%);height:"0.75em";height:var(--track-height,"0.75em");background:"#202020";background:var(--track-color,"#202020");border-radius:"0.5em";border-radius:var(--border-radius,"0.5em");-webkit-border-radius:"0.5em";-webkit-border-radius:var(--border-radius,"0.5em");-moz-border-radius:"0.5em";-moz-border-radius:var(--border-radius,"0.5em");-ms-border-radius:"0.5em";-ms-border-radius:var(--border-radius,"0.5em")}[type=range]::-ms-track{box-sizing:border-box;border:1px "solid" "#000";border:var(--track-border-width,1px) var(--track-border-style,"solid") var(--track-border-color,"#000");width:100%;width:var(--width,100%);height:"0.75em";height:var(--track-height,"0.75em");background:"#202020";background:var(--track-color,"#202020");border-radius:"0.5em";border-radius:var(--border-radius,"0.5em");-webkit-border-radius:"0.5em";-webkit-border-radius:var(--border-radius,"0.5em");-moz-border-radius:"0.5em";-moz-border-radius:var(--border-radius,"0.5em");-ms-border-radius:"0.5em";-ms-border-radius:var(--border-radius,"0.5em")}[type=range]::-moz-range-progress{height:"0.75em";height:var(--track-color,"0.75em");background:#35ca35;background:var(--progress-color,#35ca35);border-radius:"0.5em";border-radius:var(--border-radius,"0.5em");-webkit-border-radius:"0.5em";-webkit-border-radius:var(--border-radius,"0.5em");-moz-border-radius:"0.5em";-moz-border-radius:var(--border-radius,"0.5em");-ms-border-radius:"0.5em";-ms-border-radius:var(--border-radius,"0.5em")}[type=range]::-ms-fill-lower{height:"0.75em";height:var(--track-color,"0.75em");background:#35ca35;background:var(--progress-color,#35ca35);border-radius:"0.5em";border-radius:var(--border-radius,"0.5em");-webkit-border-radius:"0.5em";-webkit-border-radius:var(--border-radius,"0.5em");-moz-border-radius:"0.5em";-moz-border-radius:var(--border-radius,"0.5em");-ms-border-radius:"0.5em";-ms-border-radius:var(--border-radius,"0.5em")}[type=range]::-webkit-slider-thumb{box-sizing:border-box;width:"1.15em";width:var(--thumb-width,"1.15em");height:"1.15em";height:var(--thumb-height,"1.15em");border-radius:"40%";border-radius:var(--thumb-border-radius,"40%");background:#202020;background:var(--thumb-color,#202020);border:"1px solid #000";border:var(--thumb-border,"1px solid #000")}[type=range]::-moz-range-thumb{box-sizing:border-box;width:"1.15em";width:var(--thumb-width,"1.15em");height:"1.15em";height:var(--thumb-height,"1.15em");border-radius:"40%";border-radius:var(--thumb-border-radius,"40%");background:#202020;background:var(--thumb-color,#202020);border:"1px solid #000";border:var(--thumb-border,"1px solid #000")}[type=range]::-ms-thumb{margin-top:0;box-sizing:border-box;width:"1.15em";width:var(--thumb-width,"1.15em");height:"1.15em";height:var(--thumb-height,"1.15em");border-radius:"40%";border-radius:var(--thumb-border-radius,"40%");background:#202020;background:var(--thumb-color,#202020);border:"1px solid #000";border:var(--thumb-border,"1px solid #000")}[type=range]::-ms-tooltip{display:none}
/*# sourceMappingURL=main.c783d895.chunk.css.map */