:root{--grey: rgb(226, 226, 226);--backing: rgb(240,240,240);--txtMain: rgb(56,56,56);--txtTitle: rgb(90,90,90);--mainFont: "roboto", sans-serif;--seekbarColor: #55cfff}body{margin:0;overflow:hidden;background-color:#000}canvas{filter:saturate(2)}.webgl_container{overflow:hidden;width:100%;height:100%}#logo{position:absolute;z-index:10;top:-10px;left:0;right:0;width:75px;margin:auto;color:#fff}.upload_btn{position:relative;text-align:center;background-color:var(--grey);border-radius:10px;align-self:center;width:145px;height:80px;margin-left:auto;margin-right:10px;color:var(--txtMain);z-index:2;transition:all 1s}.upload_btn:hover{cursor:pointer}.button-text{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:fit-content;height:fit-content;font-family:var(--mainFont);font-weight:400;font-size:12pt}#controller{opacity:0;position:absolute;display:flex;flex-direction:column;bottom:-100%;left:0;right:0;margin:auto;border-radius:20px;height:110px;min-width:350px;max-width:400px;align-content:center;background-color:var(--backing);z-index:2;overflow:hidden;transition:cubic-bezier(.075,.82,.165,1) .5s}.scrubber{position:absolute;bottom:0;margin-bottom:5px;z-index:inherit;width:100%;border-radius:20px}.seek_bar{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:90%;margin-left:5%;border-radius:10px;cursor:pointer;background:var(--grey);overflow:hidden}.seek_bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:-400px 0 0 400px var(--seekbarColor);width:10px;height:3px}#info{position:absolute;display:flex;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;margin-bottom:10px;border-radius:20px;height:100px;max-width:400px;align-content:center;background-color:var(--backing);z-index:1}#panel{align-self:center;background-color:var(--grey);margin:10px;border-radius:10px;font-family:var(--mainFont);height:80px;flex-grow:1;overflow:hidden}.curr-playing{margin-left:10px;margin-top:10px;margin-bottom:0;font-family:var(--mainFont);font-weight:400;font-size:12pt}.player_text{font-family:var(--mainFont);font-weight:400;margin-left:10px;margin-top:2px;font-size:12pt;color:var(--txtTitle)}audio{visibility:hidden;position:absolute}input[type=file]{display:none}h1{font-family:var(--mainFont);color:var(--txtMain);font-size:15pt}#hover_button{position:absolute;text-align:center;color:#f0f8ff;background-color:transparent;z-index:1;opacity:.85;width:30px;height:30px;border-radius:50px;bottom:10px;left:0;right:0;margin:auto;transition:cubic-bezier(.075,.82,.165,1) 5s;font-size:23pt}.hidden{visibility:hidden}.shown{visibility:visible}#hover_button:hover{opacity:0;cursor:pointer;bottom:-10px}#hover_button:hover+#controller{bottom:10px;opacity:.85}#controller:hover{bottom:10px;opacity:.85}#instruct{z-index:10;position:absolute;text-align:center;color:#fff;top:60px;left:0;right:0;width:300px;padding:5px;border-radius:10px;background-color:#00000080;margin:auto;font-family:var(--mainFont);transition:cubic-bezier(.075,.82,.165,1) 1s;opacity:0}