:root{--key-border: #0d1b2a;--key-background: #1b263b;--key-color: #e0e1dd;--controller-background: #778da9;--darker-gray: #415a77}*{box-sizing:border-box}body{margin:0 auto;width:50%;height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#a4b4c2;min-width:800px;display:flex;justify-content:center;align-items:center}.drum-pad,#bank-btn,#power-btn,#group-sound-name{border:solid var(--key-border) 1px;border-radius:5px;color:var(--key-color);background-color:var(--key-background)}.drum-pad,#bank-btn,#power-btn{box-shadow:5px 4px 3px 3px #041e26}.drum-pad{height:100px;width:100px;font-size:2rem}.drum-kit{display:grid;grid-template-columns:repeat(3,33%)}.volumeController{display:block;margin:25px 10px;width:300px}#bank-btn,#power-btn{height:50px;width:80px;text-wrap:nowrap}#connection{font-style:italic;color:var(--key-color);opacity:.6}#group-sound-name{padding:1.35rem 0}#volume-header{font-weight:600;color:var(--key-background)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background-color:var(--key-background);border-radius:.5rem;height:.35rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-8px;background-color:var(--key-color);height:2rem;width:1rem;border-radius:.3rem}input[type=range]:focus::-webkit-slider-thumb{border:1px solid var(--key-background);outline:3px solid var(--darker-gray);outline-offset:.1rem}#display{display:inline-flex;background-color:var(--controller-background);margin:10px;gap:50px}#drum-machine{background-color:var(--controller-background);padding:2rem;border:var(--key-border) solid 3.5px;border-radius:10px}#footer{position:fixed;left:0;bottom:0;width:100%;text-align:center;padding:10px;font-size:14px}a{color:var(--key-background);text-decoration:none}a:hover{text-decoration:underline;color:var(--key-background)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}