.login{display:flex;flex-direction:column;height:100%;align-items:center;justify-content:center}.login h1{color:#fff;font-family:Nunito Sans,sans-serif;font-size:5rem;font-weight:300;text-align:center;letter-spacing:.5rem;margin-block:2rem}a.login-button{color:#fff;border-radius:24px;border:2px solid;border-color:#fff;letter-spacing:.3rem;font-weight:400;font-size:2rem;text-decoration:none;padding:16px 44px}a.login-button:hover{background-color:#292929}.login footer{display:flex;position:fixed;justify-content:center;align-items:center;width:100%;bottom:0;margin:.5rem}.login .github-button svg{color:#fff;font-size:2rem}.login .github-button svg:hover{color:#cecece}.login footer span{position:fixed;color:#fff;right:0;margin-right:1rem}:root{--current-line-color: #f0f0f0;--synced-lyric-color: #828282;--synced-lyric-hover-background-color: #2e2e2e;--plain-lyrics-color: #d2d2d2}.lyrics-container{display:flex;justify-content:center;margin-bottom:82px;height:100%;width:100%;overflow-y:scroll}.lyrics{min-width:20%;max-width:80%;padding-left:5%;height:fit-content;margin-block:5vh}.lyric-line{width:fit-content;margin-block:.5rem;padding:.3rem .6rem}.lyric-line>span{white-space:pre-line}.synced-lyric>span{color:var(--synced-lyric-color);font-size:large}div.lyric-line.current-line>span{color:var(--current-line-color);font-weight:500;font-size:larger}.plain-lyric>span{color:var(--plain-lyrics-color)}div.lyric-line.synced-lyric:hover{background-color:var(--synced-lyric-hover-background-color);border-radius:8px;cursor:pointer}div.lyric-line.synced-lyric:not(.current-line):hover span{color:#dadada}.lyrics-unavailable{margin-top:40vh;color:var(--current-line-color);font-style:italic}.lyric-translation,.lyric-romanization{font-style:italic}:root{--playback-control-background-color: #000000;--playback-control-text-color: #ffffff;--playback-control-current-artist-color: #c0c0c0;--playback-control-button-hover-color: #cecece;--toggle-translate-hover-color: #2c2c2c}footer.app-footer{display:flex;flex-direction:column;background-color:var(--playback-control-background-color);position:fixed;width:100vw;height:5.2rem;bottom:0}.playback-seeker{position:fixed;top:-.8rem}.playback-control{display:flex;position:fixed;bottom:.5rem;width:100%;align-items:center;justify-content:flex-end;color:var(--playback-control-text-color)}.current-track{display:flex;flex-direction:row;flex:0 1 auto;width:fit-content;margin-right:auto;justify-self:start}.current-track>img{width:4rem;height:4rem;object-fit:cover;margin-left:.5rem;margin-right:1rem;border-radius:8px}.current-track-info{display:flex;justify-content:center;flex-direction:column;margin-bottom:.2rem;max-width:25vw;text-wrap:nowrap;overflow:hidden}.current-track-name{font-weight:500;margin-bottom:.1rem}.translate-track-name:hover{cursor:pointer}.current-track-artist{font-size:.9rem;color:var(--playback-control-current-artist-color)}.playback-control-buttons{background-color:var(--playback-control-background-color);display:flex;flex:0 1 auto;width:fit-content;position:absolute;align-items:center;right:50%;transform:translate(50%)}.playback-control-buttons>button{color:var(--playback-control-text-color);background-color:var(--playback-control-background-color);border:none;cursor:pointer;height:fit-content}.playback-control-buttons>button:hover{color:var(--playback-control-button-hover-color);border-radius:.5rem}button.playback-control-toggle-play{margin:0 2rem}button.playback-control-toggle-play>svg{font-size:3.5rem}.playback-control-buttons>button:active{opacity:.7}button.playback-control-change-track>svg{font-size:2.5rem}div.playback-features{display:flex;margin-right:1.5rem}div.playback-features button:hover{background-color:var(--toggle-translate-hover-color);border-radius:1rem}div.playback-features svg{color:var(--playback-control-text-color);opacity:.9}div.playback-volume-control{display:flex;align-items:center}div.playback-volume-control .MuiSlider-root{width:5rem;height:4px}.playback-container{display:flex;flex-direction:column;height:100%;width:100%}progress{color:#707070}:root{--app-background-color: #121212}body{color:#fff;margin:0;font-family:Inter,sans-serif;background-color:var(--app-background-color)}main.app{display:flex;flex-direction:column;align-items:center;width:100vw;height:100vh}