body{background-color:#050505;background-image:url("./graphics/stardust.png");height:100vh;color:#d2cfdb;font-family:sans-serif;--gap:1em;display:flex;flex-direction:column;justify-content:end;animation:bg-scroll 600s infinite;background-position:center}#stage{flex-grow:1;position:relative}#stage .logo{opacity:70%;position:absolute;display:block;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-20deg);max-width:70%;max-height:40%}img.kill{-webkit-filter:url("#kill");filter:url("#kill")}#stage canvas{position:absolute;display:block;width:100%;height:100%;z-index:-100}.stack{display:flex;flex-direction:column;flex-grow:1}.box{border-radius:var(--gap);padding:var(--gap);margin:var(--gap);background-color:#95959524}#player{margin-top:0;display:flex;flex-direction:column}#player .blurb{font-style:italic;font-size:.8em;opacity:.5}#player .album-art{aspect-ratio:1;height:auto;border-radius:var(--gap) var(--gap) 0 0;overflow:hidden;margin:calc(var(--gap) * -1);margin-bottom:var(--gap)}.album-art img{width:100%}#player h2,#player p{margin:.2rem 0}#player .stack{margin:0 0;display:flex;flex-direction:column;justify-content:space-between}.volume{display:flex}.volume input{min-width:0;width:100%}.controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--gap) * -1)}.controls>*{margin:var(--gap)}.controls button:first-child,.controls span:first-child{margin-left:0}.controls button:last-child,.controls span:last-child{margin-right:0}.controls img{height:36px}.controls button,.volume img,input[type=range]{display:block;border:none;background-color:inherit;color:inherit;opacity:.5;padding:0;margin:0}.controls button:focus,.controls button:hover,.controls input[type=range]:focus,.controls input[type=range]:hover{opacity:1}.controls input[type=range]{-webkit-appearance:none;height:0;margin:var(--gap) 0;opacity:inherit;border:2px solid rgba(210,207,219,.2);border-radius:4px}.controls input[type=range]::before{border:2px solid #d2cfdb;display:block;width:100%}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:0 0;cursor:pointer;border:2px solid #fff;border-radius:10px}.controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:0 0;cursor:pointer;border:2px solid #fff;border-radius:10px}canvas.RadialWave{-webkit-animation:filter-animation 60s infinite;animation:filter-animation 60s infinite}.menu{display:flex;position:absolute;align-self:center}.menu img.option{object-fit:contain;width:10em;border-radius:10px;margin-left:var(--gap)}.menu img.option:first-child{margin-left:0}.menu .option.selected{outline:2px solid rgb(210,207,219)}.menu .option:hover{outline:2px solid rgba(210,207,219,.2)}.menu[hidden]{display:none}#track-name{display:inline-block;vertical-align:middle}@-webkit-keyframes filter-animation{0%{-webkit-filter:hue-rotate(0deg)}25%{-webkit-filter:hue-rotate(90deg)}50%{-webkit-filter:hue-rotate(180deg)}75%{-webkit-filter:hue-rotate(270deg)}100%{-webkit-filter:hue-rotate(360deg)}}@keyframes filter-animation{0%{filter:hue-rotate(0deg)}25%{filter:hue-rotate(90deg)}50%{filter:hue-rotate(180deg)}75%{filter:hue-rotate(270deg)}100%{filter:hue-rotate(360deg)}}@keyframes bg-scroll{0%{background-position:0 0}20%{background-position:100% 50%}40%{background-position:0 100%}60%{background-position:50% 0}80%{background-position:100% 100%}}@media (min-width:670px){#player{flex-direction:row;min-width:670px}#player .album-art{width:200px;margin-right:var(--gap);margin-bottom:calc(var(--gap) * -1);border-radius:var(--gap) 0 0 var(--gap)}}@media (min-width:1200px){#player{align-self:baseline;position:absolute}.box{backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}}