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}.App{text-align:center;display:flex;background-color:#fff;min-height:100vh;justify-content:center;align-items:center;background-image:url(https://publicdomainvectors.org/download.php?file=TheresaKnott_Drum_Kit_3.svg);background-repeat:no-repeat;background-position:50%;background-size:contain}.container{display:flex;padding:2rem;border:2px solid #000;max-width:90%;background-color:rgba(5,5,5,.658)}@media (max-width:689px){.App{background-size:cover}.container{flex-direction:column}.Drumpad{margin:0 auto}.Display{margin-left:0}}@font-face{font-family:"DiscoFont";src:url(/drum-machine/static/media/DISKOTEQUE.1850b2ef.TTF)}.Drumpad{display:flex;width:15rem;flex-wrap:wrap;justify-content:space-between}.d-btn{width:4.5rem;height:4.5rem;margin-top:.5rem;font-size:2.5rem;font-family:"DiscoFont";color:#39195f;font-weight:600;border-radius:.4rem;transition:background-color .1s}.buttonPressed,.d-btn:active{background-color:#4682b4}@media (max-width:689px){.Drumpad{margin:0 auto}}.Display{display:flex;margin-left:4rem}.power_slider-background{background-color:#000;width:3rem;height:1.6rem;margin:.2rem auto 2.5rem}.power_slider-on{background-color:#e91010;width:1.2rem;height:1.2rem;margin:.2rem .2rem .2rem 0;float:right}.power_slider-off{background-color:#78787c;width:1.2rem;height:1.2rem;margin:.2rem 0 .2rem .2rem;float:left;transition:background-color .2s ease,margin-right 3s ease}.power-label{font-weight:700}.chord-name,.power-label{color:hsla(0,0%,100%,.863)}.chord-name{background-color:hsla(0,0%,50.2%,.233);padding:1rem 4.5rem;margin:0 auto 2rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-weight:500}.volume-slider{height:.7rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;opacity:.7;width:20rem;background-color:#117bdf;border-radius:.5rem;transition:all .2s}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:1.5rem;width:1.5rem;border-radius:1rem;background:#fff;border:2px solid #000;cursor:pointer}.volume-slider:hover{opacity:1}@media (max-width:689px){.Display{margin-left:0;margin-top:2rem}.volume-slider{max-width:75vw}}
/*# sourceMappingURL=main.9a327358.chunk.css.map */