body{box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0}:root{--main-color-gradient:linear-gradient(#3b3b3b,#272727);--main-color:#272727;--secundary-color:#3b3b3b;--text-color:#b1b1b1;--bg-color:hsla(0,0%,50%,.815)}#container{background:linear-gradient(#3b3b3b,#272727);background:var(--main-color-gradient);height:100vh}#container,#drum-machine{align-items:center;display:flex;justify-content:center}#drum-machine{background-color:hsla(0,0%,50%,.815);background-color:var(--bg-color);border-radius:14px;width:660px}#button-container{display:grid;grid-auto-rows:minmax(80px,auto);grid-template-columns:repeat(3,100px);margin:20px}#button-container>button{background:linear-gradient(#3b3b3b,#272727);background:var(--main-color-gradient);border:none;border-radius:5px;box-shadow:3px 3px 5px #3b3b3b;box-shadow:var(--secundary-color) 3px 3px 5px;color:#b1b1b1;color:var(--text-color);cursor:pointer;font-size:14px;margin:5px;text-decoration:none}#button-container>button:focus{outline:1px solid #fff}#display{background:linear-gradient(#3b3b3b,#272727);background:var(--main-color-gradient);height:50px;margin:15px auto;width:200px}#display>p{color:#b1b1b1;color:var(--text-color);font-size:18px;line-height:50px;text-align:center}input[type=range]{-webkit-appearance:none;appearance:none;margin:18px 0;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:#272727;background:var(--main-color);border:.2px solid #272727;border:.2px solid var(--main-color);border-radius:1.3px;box-shadow:1px 1px 1px #3b3b3b,0 0 1px #3b3b3b;box-shadow:1px 1px 1px var(--secundary-color),0 0 1px var(--secundary-color);cursor:pointer;height:6px;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#b1b1b1;background:var(--text-color);border-radius:1px;box-shadow:1px 1px 1px #272727,0 0 1px #272727;box-shadow:1px 1px 1px var(--main-color),0 0 1px var(--main-color);cursor:pointer;height:22px;margin-top:-10px;width:8px}input[type=range]:focus::-webkit-slider-runnable-track{background:#3b3b3b;background:var(--secundary-color)}input[type=range]::-moz-range-track{background:#272727;background:var(--main-color);border:.2px solid #272727;border:.2px solid var(--main-color);border-radius:1.3px;box-shadow:1px 1px 1px #3b3b3b,0 0 1px #3b3b3b;box-shadow:1px 1px 1px var(--secundary-color),0 0 1px var(--secundary-color);cursor:pointer;height:6px;width:100%}input[type=range]::-moz-range-thumb{background:#b1b1b1;background:var(--text-color);border-radius:1px;box-shadow:1px 1px 1px #272727,0 0 1px #272727;box-shadow:1px 1px 1px var(--main-color),0 0 1px var(--main-color);cursor:pointer;height:22px;width:8px}@media (max-width:660px){#drum-machine{flex-direction:column;max-width:400px}}
/*# sourceMappingURL=main.c4647d72.css.map*/