#drum-machine{width:100vw;min-height:95vh;display:flex;justify-content:center;align-items:center}footer{text-align:center}footer a,footer i{color:#000}footer a{font-weight:600}*{padding:0;margin:0;box-sizing:border-box;font-family:"Poppins",sans-serif}body{background-color:#dcdde1}.play{border-top:10px solid #fff}.container{display:flex;align-items:center;justify-content:center;flex-direction:column}.key-map{background-color:#34495e;border-radius:0 0 20px 20px;display:flex;padding:10px;flex-wrap:wrap;height:380px;width:380px;box-shadow:5px 5px 8px rgba(0,0,0,.6)}.square{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;margin:10px;height:100px;width:100px;outline:none;background-color:#7f8c8d;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:20px;box-shadow:4px 4px 8px #000;font-size:2rem;cursor:pointer}.square:hover{background-color:#222f3e;transform:translateY(5px);transform:scale(.98)}.square:focus{outline:none}.square:active{border-top:10px solid #fff}.screen{width:100%;height:50px;background:#2c3e50;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;text-transform:uppercase;box-shadow:5px 0 8px rgba(0,0,0,.6)}.screen:hover{border-bottom:1px solid #fff}button{padding:1rem 2rem;border:none;outline:none;box-shadow:4px 4px 6px rgba(0,0,0,.5);border-radius:10px;background-color:#1c1c1c;color:#fff;font-size:1rem;text-transform:uppercase}button:hover{transform:scale(.95)}input[type=range]{background:#dcdde1;height:38px;-webkit-appearance:none;margin:10px 0;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;animate:.2s;box-shadow:1px 1px 1px #000;background:#3071a9;border-radius:5px;border:1px solid #000}input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #000;border:1px solid #000;height:30px;width:15px;border-radius:5px;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-11px}input[type=range]:focus::-webkit-slider-runnable-track{background:#3071a9}input[type=range]::-moz-range-track{width:100%;height:10px;animate:.2s;background:#3071a9}input[type=range]::-moz-range-thumb,input[type=range]::-moz-range-track{cursor:pointer;box-shadow:1px 1px 1px #000;border-radius:5px;border:1px solid #000}input[type=range]::-moz-range-thumb{height:30px;width:15px;background:#fff}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;animate:.2s;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#3071a9;border:1px solid #000;border-radius:10px;box-shadow:1px 1px 1px #000}input[type=range]::-ms-thumb{margin-top:1px;box-shadow:1px 1px 1px #000;border:1px solid #000;height:30px;width:15px;border-radius:5px;background:#fff;cursor:pointer}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#3071a9}.nav{width:100%;display:flex;align-items:center;justify-content:space-around}.green{background-color:#2f2;color:#000}.red{background-color:red}@media(max-width:450px){.square{height:80px;width:80px}.square:hover{background-color:#7f8c8d;color:#fff}.key-map{height:320px;width:320px}button{padding:.5rem 1rem;margin:1rem}.screen{font-size:1rem}}
/*# sourceMappingURL=main.c2813670.chunk.css.map */