*,:after,:before{box-sizing:inherit}html{box-sizing:border-box}#root,body{width:100%}body{font-family:"Orbitron","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;font-size:1.4rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0 1rem;display:flex;height:100vh;align-items:center;justify-content:center;overflow:hidden;background:#232323}button:focus,input:focus{outline:2px solid rgba(42,212,0,.8)}.drum-machine{background:#ba2020;box-shadow:2px 2px 1px rgba(0,0,0,.52),9px 8px 4px rgba(0,0,0,.63),14px 16px 5px 0 rgba(0,0,0,.22);border-radius:20px;border:8px outset #a6110f;border-left-style:inset;outline:none}.drum-machine-container{display:flex;width:100%;max-width:1100px;min-width:590px;margin:0 auto;padding:1.6rem}.pads-display-grid{display:grid;grid-template-columns:repeat(3,minmax(6rem,1fr));grid-template-rows:repeat(4,140px);grid-gap:10px;gap:10px;width:70%}.display{display:flex;justify-content:center;align-items:center;position:relative;grid-area:1/1/2/-1;background:#ffc107;overflow:hidden;border:5px inset #6f3030;color:#ba2020;font-size:clamp(2.2rem,4vw,4rem);white-space:nowrap}.display:after{content:"";top:0;transform:translateX(-120%);width:100%;height:100%;position:absolute;z-index:1;-webkit-animation:slide 3s ease-out 2s infinite;animation:slide 3s ease-out 2s infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.6) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0))}@-webkit-keyframes slide{0%{transform:translateX(-120%)}to{transform:translateX(100%)}}@keyframes slide{0%{transform:translateX(-120%)}to{transform:translateX(100%)}}.pad-button{font-family:"Orbitron",sans-serif;font-size:2.5rem;padding:0;background:radial-gradient(#1a4669,#00bcd4);color:transparent;text-shadow:1px 1px 2px hsla(0,0%,100%,.33);box-shadow:-4px -4px 1px #ba2020,5px 5px 5px 0 #691615;border:none;outline:none;cursor:pointer}.pad-button.active{color:rgba(255,193,7,.6)}.pad-button:active{color:rgba(255,193,7,.6)}.controls{display:flex;flex-direction:column;margin:auto 0;padding:0 0 0 1.5rem}.control-heading{font-size:clamp(1.4rem,3vw,2.5rem);white-space:nowrap;margin:0 0 .3rem;color:rgba(0,0,0,.9)}.sound-banks{grid-gap:1rem;gap:1rem;display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.volume{margin-top:3rem}.volume input[type=range]{width:100%;cursor:pointer}@media (max-width:38.75em){.drum-machine-container{flex-direction:column;align-items:center;min-width:280px;height:100%}.pads-display-grid{grid-template-columns:repeat(3,minmax(2rem,1fr));grid-template-rows:repeat(4,100px);width:100%}.controls{display:flex;flex-direction:row;grid-gap:2rem;gap:2rem;margin:2rem 0 0;padding:0}.sound-banks,.volume{margin:0}}@media (max-width:28.75em){.display{font-size:1.5rem}.controls{flex-direction:column;align-items:center}}
/*# sourceMappingURL=main.2f7d9c44.chunk.css.map */