:root{--color-bg:#131313;--color-bg-light:#1f1f1f;--color-font:#e4e4e4;--color-bg-hover:hsla(0,0%,80%,0.198);--color-bg-active:rgba(200,100,246,0.8274509803921568)}*{margin:0;padding:0;box-sizing:border-box}@media screen and (max-width:93.75em){html{font-size:60%}}@media screen and (max-width:30em){html{font-size:65%}}::-webkit-scrollbar-track{background-color:red}h1,h2,h3{font-weight:400}h2{font-size:2rem}h4{font-size:1rem;font-weight:300}body{background-color:#131313;background-color:var(--color-bg);color:#e4e4e4;color:var(--color-font);font-family:"Lato",sans-serif}.song-container{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}@media screen and (max-width:25em){.song-container{min-height:50vh}}.song-container img{width:25rem}@media screen and (max-width:50em){.song-container img{width:50%;min-width:12.5rem}}.song-container h2{padding:2rem 1rem 0}.song-container h3{font-size:1.2rem}.player{min-height:20vh;flex-direction:column;justify-content:flex-start;padding-top:2em;grid-gap:1em;gap:1em}.player,.player .time-control{display:flex;align-items:center}.player .time-control{width:50%;min-width:40em;justify-content:space-between}@media screen and (max-width:50em){.player .time-control{min-width:20em;width:90%}}.player .time-control .track-input{width:100%;-webkit-appearance:none;background:transparent;cursor:pointer}.player .time-control .track-input:focus{outline:none}.player .time-control .track-input::-webkit-slider-thumb{-webkit-appearance:none;height:1rem;width:1rem;background:transparent}@media screen and (max-width:50em){.player .time-control .track-input::-webkit-slider-thumb{height:.625rem;width:.625rem}}.player .time-control p{padding:1rem 2rem}@media screen and (max-width:50em){.player .time-control p{padding:.5rem 1rem}}@media screen and (max-width:50em){.player .time-control-lib-active{width:90%}}.player .play-control{width:20%;min-width:300px;display:flex;justify-content:space-evenly;align-items:center}.player .play-control svg{box-sizing:content-box;color:#fff;padding:1rem;cursor:pointer}.track{background-color:rgba(200,100,246,.8274509803921568);background-color:var(--color-bg-active);width:100%;position:relative;border-radius:1rem;overflow:hidden}.animate-track{background-color:#313131;width:101%;height:100%;position:absolute;top:0;left:0;-webkit-transform:translateX(50%);transform:translateX(50%);pointer-events:none;will-change:transform;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s}.volume{-webkit-appearance:none;width:200px;height:7px;background:hsla(0,0%,80%,.198);background:var(--color-bg-hover);border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;cursor:pointer}.volume::-webkit-slider-thumb{-webkit-appearance:none;height:2rem;width:2rem;border-radius:50%;background:rgba(200,100,246,.8274509803921568);background:var(--color-bg-active);cursor:ew-resize;box-shadow:0 0 2px 0 #555;-webkit-transition:background .3s ease-in-out;transition:background .3s ease-in-out}.volume::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none}.volume-knob{display:flex;align-items:center;justify-content:center;grid-gap:2rem;gap:2rem;margin-top:2rem}.mute{cursor:pointer}.library{position:fixed;left:0;top:0;z-index:100;width:100%;max-width:25rem;height:100vh;background-color:#1f1f1f;background-color:var(--color-bg-light);overflow-y:scroll;-webkit-overflow-scrolling:auto!important;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:all .3s ease-out}.library .lib-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 1rem 2rem;border-bottom:1px solid hsla(0,0%,100%,.26);height:6rem}.library h2{text-align:center}.library .lib-title{flex:1 1;display:inline-block}.library .back-icon,.library .close-icon{box-sizing:content-box;cursor:pointer;border-radius:50%;padding:.5em}.library .back-icon:hover,.library .close-icon:hover{color:rgba(200,100,246,.8274509803921568);color:var(--color-bg-active)}.library .hide-back-icon{visibility:hidden}.library .library-songs{display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem}.library-song{display:flex;grid-gap:1em;gap:1em;padding:.5rem 1rem;min-height:8rem;will-change:background-color;cursor:pointer;transition:all .15s ease}.library-song img{width:7em}.library-song .song-info{display:flex;flex-direction:column;justify-content:center}.library-song:hover{background-color:hsla(0,0%,80%,.198);background-color:var(--color-bg-hover)}.selected,.selected:hover{background-color:rgba(200,100,246,.8274509803921568);background-color:var(--color-bg-active)}::-webkit-scrollbar{width:5px;background:#000}::-webkit-scrollbar-thumb{background:hsla(0,0%,65.9%,.5411764705882353);border-radius:10px}::-webkit-scrollbar-track{background:#1f1f1f}.library-lib-active{-webkit-transform:translateX(0);transform:translateX(0)}.nav{width:100%;grid-area:nav;display:flex;justify-content:center;align-items:center;padding:0 2rem;background-color:#1f1f1f;background-color:var(--color-bg-light);border-bottom:1px solid hsla(0,0%,100%,.26);height:6rem}.nav h1{font-size:3rem;font-family:"Poiret One",cursive;cursor:pointer;position:relative}@media screen and (max-width:50em){.nav h1{font-size:2rem}}.nav h1 .underline{position:absolute;height:1px;width:60%;bottom:0;right:0;background:#e4e4e4;background:var(--color-font)}.nav .search-flex{width:100%;display:flex;flex:100% 1;position:relative}.nav .search{width:70%;min-width:6.25rem;max-width:50rem;margin:0 auto;padding:1em;border:none;outline:none;font-family:inherit;font-size:1rem;background-color:#e4e4e4;background-color:var(--color-font);border-radius:50px}.nav .user{width:-webkit-min-content;width:min-content;position:relative}.nav .user .user-img{width:4rem;border-radius:50%;cursor:pointer;position:relative}.nav .user .user-img:hover{outline:2px solid rgba(200,100,246,.8274509803921568);outline:2px solid var(--color-bg-active)}@media (hover:none){.nav .user .user-img:hover{outline:none}}.nav .user .checkbox{display:none}.nav .user .lib-checkbox-label,.nav .user .sign-out{border-radius:50%;padding:1rem;color:#e4e4e4;background-color:#414141;cursor:pointer;position:absolute;visibility:hidden;top:125%;-webkit-transform:translateY(-120%);transform:translateY(-120%);will-change:transform;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}@media screen and (max-width:50em){.nav .user .lib-checkbox-label,.nav .user .sign-out{padding:1em}}.nav .user .lib-checkbox-label:hover,.nav .user .sign-out:hover{background-color:rgba(200,100,246,.8274509803921568);background-color:var(--color-bg-active)}.nav .user .lib-checkbox-label:hover:before{content:"Playlists"}.nav .user .sign-out{top:250%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.nav .user .sign-out:hover:before{content:"Sign Out"}.nav .user .checkbox-user:checked~div :not(:first-child){visibility:visible;-webkit-transform:translateY(0);transform:translateY(0)}.nav .user .lib-checkbox-label:hover:before,.nav .user .sign-out:hover:before{position:absolute;top:50%;left:-120%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:2rem}.login-page{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:2rem;gap:2rem;padding:2rem}@media screen and (max-width:50em){.login-page{grid-gap:5rem;gap:5rem}}.login-title{font-size:6rem;font-weight:400;text-align:center;line-height:.9}@media screen and (max-width:50em){.login-title{font-size:4rem}}.login-btn{font-size:1.5rem;font-weight:100;padding:.75rem 2rem;background-color:rgba(200,100,246,.8274509803921568);background-color:var(--color-bg-active);border:none;color:#e4e4e4;color:var(--color-font);cursor:pointer;border-radius:50px;will-change:transform;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}@media screen and (max-width:50em){.login-btn{font-size:1rem}}.login-btn:hover{-webkit-transform:scale(1.02);transform:scale(1.02)}.svg-cont{width:50rem;overflow:hidden}@media screen and (max-width:30em){.svg-cont{width:30rem}}.svg-cont .svg{width:100%;object-fit:cover;margin:0 auto}.login-desc{font-size:1.5rem;font-weight:100;margin-top:1rem;text-align:center}@media screen and (max-width:25em){.login-desc{max-width:80%}}.login-text{display:flex;flex-direction:column;align-items:center}.drop-down{width:60%;min-width:200px;max-width:750px;height:-webkit-min-content;height:min-content;max-height:50vh;position:absolute;top:100%;left:50%;background-color:#1f1f1f;background-color:var(--color-bg-light);-webkit-transform:translateX(-50%);transform:translateX(-50%);overflow-y:scroll;z-index:200}@media screen and (max-width:50em){.drop-down{position:fixed;top:60px;left:0;right:0;max-height:100vh;width:100vw;padding:0 1em;-webkit-transform:translateX(0);transform:translateX(0)}}.results{display:flex;grid-gap:1rem;gap:1rem;cursor:pointer;padding:.5rem;min-height:5rem}.results:hover{background-color:hsla(0,0%,80%,.198);background-color:var(--color-bg-hover)}.results-info{display:flex;flex-direction:column;justify-content:center}.app-container{width:100%;height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:80px 1fr;grid-template-areas:"nav" "player"}@media screen and (max-width:50em){.app-container{grid-template-rows:60px 1fr}}.hidden{display:none}.player-container{grid-area:player;padding:2rem 0}.user-info{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;grid-gap:2rem;gap:2rem;padding:0 2em;grid-area:player}.user-info .user-name{font-size:6rem;margin-top:2rem;margin-bottom:0;text-align:center}@media screen and (max-width:50em){.user-info .user-name{font-size:4rem;margin-top:1em}}@media screen and (max-width:25em){.user-info .user-name{font-size:4rem;margin-top:0}}.user-info .msg{font-size:2rem;font-weight:300;margin-top:-1em;margin-bottom:3em;text-align:center}@media screen and (max-width:50em){.user-info .msg{font-size:1rem}}.user-info .playlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));grid-gap:2rem;gap:2rem}.user-info .playlist-info{cursor:pointer}.user-info .playlist-info:hover .playlist-img{-webkit-transform:scale(1.05);transform:scale(1.05)}.user-info .playlist-img-container{overflow:hidden}.user-info .playlist-img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;margin-bottom:1rem;overflow:hidden;will-change:transform;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.user-info .playlist-type{text-transform:capitalize}
/*# sourceMappingURL=main.f7e3a046.chunk.css.map */