@import "https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Sixtyfour&display=swap";:root{--track-height:6px;--thumb-height:18px;--thumb-width:18px}*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background-color:#000;width:100vw;height:100vh;padding:40px;font-family:Arial,sans-serif}#root{background-color:#00002c;border:10px solid #1c1c7e;border-radius:50px;height:100%;overflow:scroll;box-shadow:0 0 50px 10px #53008ea9}header{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;display:flex}header .logo{object-fit:contain;width:500px;max-width:100%}header .volume-container p{font-family:Pixelify Sans,sans-serif;font-size:24px}header .volume-container input{background-color:#00002c;border:1px solid #1c1c7e;border-radius:5px;width:100px;height:10px}header .volume-container input[type=range]{appearance:none;cursor:pointer;background:0 0;border-radius:3px;width:15rem}header .volume-container input[type=range]::-webkit-slider-runnable-track{height:var(--track-height);background:linear-gradient(90deg,#3f5efb 0%,#fe0 51%,#fc466b 100%);border-radius:3px}header .volume-container input[type=range]::-moz-range-track{height:var(--track-height);background:linear-gradient(90deg,#3f5efb 0%,#fe0 51%,#fc466b 100%);border-radius:3px}header .volume-container input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--thumb-width);height:var(--thumb-height);margin-top:calc((var(--track-height)/2) - (var(--thumb-height)/2));background:#fff;border:3px solid #1c1c7e;border-radius:50%}header .volume-container input[type=range]::-moz-range-thumb{appearance:none;background:#fff;border:3px solid #1c1c7e;border-radius:50%}main{padding:30px}main .title{margin-bottom:30px;font-family:Sixtyfour,sans-serif;font-size:24px}main .soundboard{flex-wrap:wrap;gap:30px;margin:0;padding:0;display:flex}@media (min-width:768px){main .soundboard{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){main .soundboard{grid-template-columns:repeat(3,1fr)}}main .soundboard button{color:#fff;cursor:pointer;box-sizing:border-box;background-color:#000040;border:5px solid #00007d;border-radius:50px;width:160px;height:160px;padding:10px;font-family:Pixelify Sans,sans-serif;font-size:24px;display:block}@media (max-width:768px){main .soundboard button{width:100%;height:100px}}main .soundboard button:hover{border-color:#53008e}main .soundboard button.playing{box-shadow:0 0 50px 10px #53008ea9}