@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{font-family:Noto Sans,Noto Sans JP,sans-serif;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:var(--dark);scrollbar-width:thin;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--extra-dark: #1c1c1c;--dark: #2a2a2a;--darkish: #444444;--primary: #2c57b3;--secondary: #cd4903}#root{width:100%;height:100%;-webkit-user-select:none;user-select:none}body{width:100vw;height:100vh;max-width:100vw;overflow-x:hidden;overflow-y:hidden;margin:0}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s,border-radius .25s,background-color .3s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#spotifyButton{width:3rem;height:100%;margin-left:auto;align-self:center;background:#1ed760;display:flex;border:2px solid transparent;border-radius:1rem;transition:scale .2s,opacity ease-in-out .1s}#spotifyButton:hover{border-color:#fff;scale:105%}#spotifyButton img{justify-self:center;align-self:center;width:3rem;height:3rem}#addToQueueButton{width:3rem;height:100%;align-self:center;background:var(--primary);display:flex;border:2px solid transparent;border-radius:1rem;transition:scale .2s,opacity ease-in-out .1s}#addToQueueButton:hover{border-color:#fff;scale:105%}#addToQueueButton img{justify-self:center;align-self:center;width:3rem;height:3rem}.homePage{width:200vw;height:100vh;-webkit-user-select:none;user-select:none}.userDisplay{display:flex;width:100%;height:15vh;flex-direction:row;gap:1rem;background:var(--extra-dark);padding-bottom:1vh}.userDisplay .userDisplayName{align-self:center;font-weight:700;font-size:6rem}.userDisplay img{width:15vh;height:15vh;border-radius:1rem}.changePanelButtons{width:100vw;height:5vh;padding-top:1vh;padding-bottom:1vh;display:flex;justify-content:center;gap:1rem;background:var(--darkish)}.changePanelButtons button{align-self:center;text-align:center;width:20vw;height:5vh;font-size:2.25vh;padding:0}.panel{position:relative;width:96vw;height:76vh;display:inline;margin-left:2vw;margin-right:2vw;transition:right .4s}#topLists{display:inline-flex;flex-direction:row;gap:1rem;justify-content:space-between;background-color:var(--dark)}.topList{width:100%;height:100%;margin:.2rem auto 0;border:var(--darkish) 1px solid;border-radius:6px;background:var(--extra-dark)}.topListTitle{height:4vh;font-weight:550;font-size:3.5vh;margin-bottom:1vh;margin-left:1%}.topListEntries{height:99%;padding-top:1vh;max-height:70vh;overflow-y:scroll;display:flex;flex-direction:column;justify-content:left;gap:.6rem}.topListEntry{display:flex;flex-direction:row;gap:.8rem;margin-left:auto;margin-right:auto;width:95%;height:6rem;padding:.5rem;border:1px solid var(--darkish);border-radius:6px;transition:border-color .25s}.topListEntry:hover{border-color:#646cff;cursor:pointer}.topListEntry:focus,.topListEntry:focus-visible{outline:4px auto -webkit-focus-ring-color}.topListEntry img{width:6rem;height:6rem;border-radius:4px}.topListEntryName{max-width:50%;align-self:center;font-weight:700;font-size:1.3rem}.topListEntryPosition{display:flex;flex-direction:column;justify-content:space-between;font-size:1.5rem;font-weight:700}.buttons{margin-left:auto;display:flex;gap:1rem}.infoPage{width:100vw;height:100vh;-webkit-user-select:none;user-select:none;padding:0;display:flex;flex-direction:row}.infoPanel{width:95vw;margin-left:5vw}.topProfile{display:flex;width:94vw;height:12rem;padding:.5rem 1vw;flex-direction:row;gap:1rem;background:var(--dark);margin:.2rem 0 .2rem -1vw}.topProfile .spotifyButton{height:12rem;line-height:12rem}.topProfile .displayName{align-self:center;font-weight:700;font-size:5rem}.topProfile img{width:12rem;height:12rem;border-radius:4px}.backButton{position:fixed;height:100%;border-radius:0;text-align:center;padding:0;font-weight:bolder}
