@import url(https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap);body{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}*{box-sizing:border-box}body{background-color:#f39c12;margin:0;min-height:100vh}#drum-machine{height:100vh}#drum-machine,.display{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap}.display{background-color:#8e44ad;width:700px;height:500px;background-image:url(https://html5drummachine.com/wp-content/uploads/2019/02/Akai-Professional-MPC-Studio-Black-Music-Production-Controller-Drum-Machine.jpg);background-position:50%;margin:0}.display h1{display:block;width:100%;text-align:center;color:#7fffd4;border:2px solid #333;border-radius:2px;height:50px;width:580px;margin:5px;background-color:#000}.display h1,.drum-pad{font-family:"Zen Dots",cursive}.drum-pad{border-radius:4px;height:120px;width:120px;margin:10px;background-color:#333;border:2px solid #ff1a1a;display:-webkit-flex;display:flex;font-size:50px;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;color:#f2f2f2}.drum-pad.active{background-color:#ff0;color:#000;box-shadow:0 0 5px #ff0,0 0 20px rgb(255 255 0/.8),0 0 35px rgb(255 255 0/.7),0 0 50px rgb(255 255 0/.6);border-color:#fff;color:#ff1a1a}@media screen and (max-width:600px){.container{-webkit-transform:scale(.655);transform:scale(.655)}}@media only screen and (min-width:600px){.col-s-1{width:8.33%}.col-s-2{width:16.66%}.col-s-3{width:25%}.col-s-4{width:33.33%}.col-s-5{width:41.66%}.col-s-6{width:50%}.col-s-7{width:58.33%}.col-s-8{width:66.66%}.col-s-9{width:75%}.col-s-10{width:83.33%}.col-s-11{width:91.66%}.col-s-12{width:100%}}@media only screen and (min-width:768px){.col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}}
/*# sourceMappingURL=main.0d7ae8a6.chunk.css.map */