@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#92c2ff;font-family:Roboto,sans-serif;overflow-x:hidden;overflow-y:hidden}.player-container,.player-container .player-details{align-items:center;display:flex;justify-content:center}.player-container .player-details{flex-direction:column;font-size:1.4em}.player-container .player-details .player-name{margin-bottom:2rem}.player-container .player-details .cover-image{box-shadow:0 5px 15px rgba(0,0,0,.59);height:250px;margin:1rem 0;width:250px}.player-container .player-details h3{color:#0c2559;font-weight:900}.player-container .player-details h4{color:#fff;text-shadow:1px 1px 4px #000}.player-container .player-controls{background-color:#071739;bottom:0;color:#fff;padding:2rem 9rem;position:absolute;width:100%;z-index:10}.player-container .player-controls .time-control{align-items:center;display:flex;justify-content:center;position:relative}.player-container .player-controls .time-control .slider{margin:0 1rem;width:clamp(10rem,100vw,35rem)}.player-container .player-controls .player-control{align-items:center;display:flex;justify-content:center;margin-top:1rem}.player-container .player-controls .player-control .playback-speed-control{display:block;font-size:.9rem;margin-bottom:4px;margin-right:7rem}.player-container .player-controls .player-control .playback-speed-control:hover .playback-speed-dropdown{display:block}.player-container .player-controls .player-control .playback-speed-control .playback-speed-dropdown{color:#000;display:none;flex-direction:column;height:30px;justify-content:space-around;left:90%;min-width:60px;opacity:1;position:absolute;top:-133px;z-index:1}.player-container .player-controls .player-control .playback-speed-control .playback-speed-dropdown li{background-color:#709fdc;display:flex;font-size:.7rem;font-weight:700;padding:.5rem}.player-container .player-controls .player-control .playback-speed-control .playback-speed-dropdown li:hover{outline:1px solid #0c2559}.player-container .player-controls .player-control .playback-speed-control .playback-speed-dropdown li.active{background-color:#1d408a;border:none;color:#fff;cursor:default;outline:none}.player-container .player-controls .player-control .volume-chooser{display:block;padding:1rem;position:relative}.player-container .player-controls .player-control .volume-chooser:hover .volume-control{display:block}.player-container .player-controls .player-control .volume-chooser .volume-button{font-size:1rem;position:absolute;top:0}.player-container .player-controls .player-control .volume-chooser .volume-control{background:transparent;border:.5rem solid transparent;display:none;left:170%;position:absolute;top:-10%}.player-container .player-controls .player-control .playback-options{display:flex;justify-content:space-around;margin:0 3rem 0 4rem;width:20%}.player-container .player-controls .player-control .toggle-options{display:flex;justify-content:space-around;width:10%}.icon{color:#fff;cursor:pointer;padding:0 8px;position:relative}.icon.toggleable,.icon:hover{color:#92c2ff}.icon.toggleable:after{bottom:-50%;content:"●";left:18px;position:absolute}main#player{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:4rem;padding:0 5px;text-align:center;transition:.3s ease-in-out;width:100%;width:600px}main.open{margin-left:18rem}#lyrics{align-items:center;background-color:#071739;color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center;position:absolute;top:70rem;transition:.1s ease-in-out;width:100vw;z-index:10}#lyrics.lyrics-open{top:0}#lyrics .lyrics-detail{color:#93bef7;font-size:1.5rem;position:absolute;text-align:center;top:6%;transition:.5s ease-in-out}#lyrics .lyrics-detail.library-open{padding-left:18rem}#lyrics .lyrics-detail p{color:#fff;font-size:1rem}#lyrics .lyrics-toggle{position:absolute;top:3rem}#lyrics .lyrics-toggle:hover{color:#709fdc;cursor:pointer}#lyrics .lyrics-content{align-items:center;background-color:hsla(0,0%,100%,.094);color:hsla(0,0%,100%,.384);display:flex;flex-direction:column;height:30em;line-height:3em;overflow-y:scroll;padding:30vh 0;scroll-behavior:smooth;transition:.5s ease-in-out;width:100vw}#lyrics .lyrics-content.library-open,#lyrics .lyrics-content.open{padding-left:18rem}#lyrics .lyrics-content .lyric{cursor:pointer}#lyrics .lyrics-content .current-lyric{color:#fff;font-size:2.4em;margin:1rem 0}.library-container{background:#181819;bottom:0;color:#fff;height:100%;left:-18rem;padding-top:20px;position:absolute;top:0;transition:.3s ease-in-out;width:18rem;z-index:20}.library-container.open{left:0}.library-container #library-search{border:7px solid #181819;border-left:none;border-top:none;padding:.5rem;width:100%}.library-container #library-search:focus{outline:none}.library-container .library-nav{border-bottom:2px solid #000;display:flex;padding:.8rem 1rem}.library-container .library-nav span.icon{position:absolute;right:0;top:10px}.library-container .library-track-container{height:87%;overflow-y:scroll;padding-bottom:.2rem}.library-container .library-track-container .track:hover{background-color:#0c2559;transition:.5s ease-in-out}.library-container .library-track-container .track.selected-track{background-color:#071739}.library-container .library-track-container .track .library-track{cursor:pointer;display:flex;position:relative}.library-container .library-track-container .track .library-track img{height:80px;width:80px}.library-container .library-track-container .track .library-track .playing-disc{color:rgba(7,23,57,.941);display:none;left:3%;position:absolute;top:14%}.library-container .library-track-container .track .library-track .playing-disc.selected-track{display:block}.library-container .library-track-container .track .library-track .library-title{padding:1rem 1rem 0}.library-container .library-track-container .track .library-track .library-title h3{font-size:.9rem;margin-bottom:.4rem}.library-container .library-track-container .track .library-track .library-title h4{color:#86b4ef;font-size:.8rem}@media (max-width:1056px){#lyrics{font-size:.8rem}#lyrics .lyrics-content .current-lyric{font-size:1rem}.player-controls{padding:2rem 5rem!important}.player-controls .icon{font-size:.8rem!important}.player-controls .volume-button{top:6%!important}.player-controls .playback-options{margin:0 2rem!important}}@media (max-width:768px){#lyrics{font-size:.6rem}#lyrics .lyrics-content .current-lyric{font-size:1rem}.player-controls{padding:1rem 4rem!important}.player-controls .icon{font-size:.7rem!important;margin-bottom:.9rem;padding:0 1rem}.player-controls .icon.toggleable:after{bottom:-50%;content:"●";left:25px;position:absolute}.player-controls .player-control{flex-direction:column;font-size:.8em}.player-controls .player-control .volume-chooser{padding-right:16.6rem!important}.player-controls .player-control .volume-chooser .volume-control{display:block!important;left:17%!important;top:-7%!important}.player-controls .player-control .volume-chooser .volume-control input{width:142%!important}.library-container.open{width:100%!important}}input[type=range]{-webkit-appearance:none;background:#86b4ef;border-radius:5px;height:7px;outline:none}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#666}::-webkit-scrollbar-thumb:hover{background:#555}
/*# sourceMappingURL=main.44f39761.css.map*/