body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}.App{background:#8d8e92;height:100vh}.App,.slidecontainer{display:flex;justify-content:center}.slidecontainer{width:100%}.slider{align-self:center;-webkit-appearance:none;appearance:none;background:#212529;border:2px solid #8d8e92;cursor:pointer;height:24px;outline:none;width:80%}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#c8cacf;cursor:pointer;height:20px;width:20px}.slider::-moz-range-thumb{background:#c8cacf;cursor:pointer;height:20px;width:20px}.drum-machine{align-self:center;background:#c8cacf;border:3px solid #000;display:flex;height:300px;width:660px}.drum-machine .keys-div{width:370px}.drum-machine .keys-div div{background:#c8cacf}.drum-machine .keys-div .drum-pad{border-radius:5px;box-shadow:4px 4px 10px 0 hsla(0,2%,9%,.959)!important;cursor:pointer;font-size:20px;height:76px;outline:none;width:31.5%}.drum-machine .keys-div button:first-child,.drum-machine .keys-div button:nth-child(2),.drum-machine .keys-div button:nth-child(4),.drum-machine .keys-div button:nth-child(5){margin:0 .5rem .5rem 0!important}.drum-machine .keys-div button:nth-child(3),.drum-machine .keys-div button:nth-child(6){margin:0 0 .5rem!important}.drum-machine .keys-div button:nth-child(7),.drum-machine .keys-div button:nth-child(8){margin:0 .5rem 0 0!important}.drum-machine .menu-div{width:290px}.drum-machine .menu-div h5{font-weight:700;margin-bottom:0!important}.drum-machine .menu-div .switch{background:#212529;height:25px;margin-left:auto;margin-right:auto;padding:4px;width:48px}.drum-machine .menu-div .switch .switch-btn{background:#c8cacf;cursor:pointer;height:17px;width:20px}.drum-machine .menu-div .display{background:#212529;color:#c8cacf;display:flex;height:50px;justify-content:center;margin-left:auto;margin-right:auto;width:150px}.drum-machine .menu-div .display p{align-self:center;font-weight:700;margin-bottom:0!important}footer{align-self:center;font-weight:600;height:300px;text-align:center;-webkit-text-orientation:sideways;text-orientation:sideways;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}footer a{font-size:16px;text-decoration:none;text-shadow:0 -2px 0 #000,0 -2px 0 #000,0 2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000,-2px 0 0 #000,2px 0 0 #000,-1px -2px 0 #000,1px -2px 0 #000,-1px 2px 0 #000,1px 2px 0 #000,-2px -1px 0 #000,2px -1px 0 #000,-2px 1px 0 #000,2px 1px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000}footer a,footer a:hover{color:#fff}.btn:active,.btn:focus{box-shadow:none!important;outline:0}@media (max-width:690px){body{background:#8d8e92}.App{flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.drum-machine{display:block;height:600px;margin-top:20px;width:376px}.drum-machine .menu-div{margin-left:auto;margin-right:auto}footer{align-self:center;font-weight:600;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-bottom:20px;-webkit-text-orientation:sideways;text-orientation:sideways;-webkit-writing-mode:inherit;writing-mode:inherit}}@media (max-width:380px){.drum-machine{height:520px;width:280px}.drum-machine .keys-div{width:274px}.drum-machine .keys-div div{padding:2px!important}.drum-machine .drum-pad{cursor:pointer;height:76px;width:31.3%!important}.drum-machine .menu-div{padding:10px!important;width:274px!important}}
/*# sourceMappingURL=main.83a274f0.css.map*/