@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);.app{height:100%;width:100%;display:flex;color:#fff;position:relative}.home{flex:1 1;height:91vh;background-color:#131111;color:#ccc;padding:1rem 2rem;overflow-y:scroll}@media screen and (max-width:900px){.home{height:85vh;padding:1rem}}.home::-webkit-scrollbar{width:.5em}.home::-webkit-scrollbar-thumb{border-radius:5px;background-color:#555}.home::-webkit-scrollbar-thumb:hover{background-color:#777}.home::-webkit-scrollbar-thumb:active{background-color:#358a52}.banner{width:90%;margin:0 auto 4rem;padding:1.5rem;border-radius:1rem;background-color:hsla(0,0%,100%,.1);position:relative}@media screen and (max-width:1200px){.banner{margin-bottom:2rem}}@media screen and (max-width:900px){.banner{width:95%}}@media screen and (max-width:480px){.banner{padding:1rem}}.banner__title{color:#fff;margin-bottom:1rem;font-size:2.7rem;letter-spacing:2px}@media screen and (max-width:900px){.banner__title{font-size:2rem}}.banner__date,.banner__msg{opacity:.8;margin-bottom:.5rem}.banner__msg{font-size:1.3rem}@media screen and (max-width:900px){.banner__msg{font-size:1rem}}.banner__right{position:absolute;right:2rem;top:-3rem;width:200px}@media screen and (max-width:900px){.banner__right{right:1.7rem}}@media screen and (max-width:800px)and (orientation:landscape){.banner__right{width:170px;right:1.25rem;top:-2.2rem}}@media screen and (max-width:480px){.banner__right{width:120px;right:-.5rem;top:3.5rem}}.banner__right svg{width:100%;height:auto}.header{margin-bottom:4rem;display:flex;align-items:center;justify-content:space-between}@media screen and (max-width:1200px){.header{margin-bottom:3rem}}@media screen and (max-width:800px)and (orientation:landscape){.header{margin-bottom:2rem}}@media screen and (max-width:480px){.header{margin-bottom:1rem}}.header__go-back{cursor:pointer;width:40px;height:40px;border-radius:50%;padding:5px;transition:all .2s;display:flex;align-items:center;justify-content:center}.header__go-back svg{transform:rotate(180deg)}.header__go-back svg path{fill:#ccc}.header__go-back:hover{background-color:hsla(0,0%,100%,.1)}.header__search{flex:1 1;margin:0 3rem}@media screen and (max-width:768px){.header__search{margin:0 1rem}}@media screen and (max-width:480px){.header__search{display:none}}.header__search input{max-width:300px;padding:.5rem 1rem;outline:none;border:none;border-top-left-radius:30px;border-bottom-left-radius:30px;font-size:1rem}@media screen and (max-width:768px){.header__search input{max-width:150px}}.header__search--btn{cursor:pointer;outline:none;color:#191414;border:none;font-size:1rem;padding:.5rem 1rem;background-color:#1ed760;border-bottom-right-radius:30px;border-top-right-radius:30px;transition:all .3s}.header__search--btn:hover{background-color:#1db954}.header__user{cursor:pointer;display:flex;align-items:center;text-decoration:none;color:#ccc;padding:.5rem 1rem;border-radius:20px;transition:all .3s}.header__user:hover{background-color:hsla(0,0%,100%,.1)}.header__user svg{width:18px;height:auto;margin-right:5px}.app__menu{cursor:pointer;width:25px;height:25px;display:flex;flex-direction:column;justify-content:space-around;display:none;z-index:10;transition:all .3s}@media screen and (max-width:480px){.app__menu{display:flex}}.app__menu>*{height:2px;border-radius:2px;background-color:#fff;width:100%;transition:all .3s}.app__menu.close .bar-1{transform:rotate(45deg) translate(3px,9px)}.app__menu.close .bar-2{background-color:transparent}.app__menu.close .bar-3{transform:rotate(-45deg) translate(3px,-9px)}.playlists{width:85%;margin:0 auto}@media screen and (max-width:900px){.playlists{height:85vh;width:90%}}.playlists__container{display:grid;grid-gap:1.5rem;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}@media screen and (max-width:900px){.playlists__container{grid-gap:1rem;gap:1rem}}@media screen and (max-width:768px){.playlists__container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}.playlistItem{cursor:pointer;text-decoration:none;color:#ccc;display:flex;align-items:center;justify-content:space-around;padding:1rem;background-color:hsla(0,0%,100%,.1);border-radius:15px}.playlistItem,.playlistItem svg path{transition:all .3s}.playlistItem:hover{background-color:#3f7a54;transform:scale(1.02);color:#fff}.playlistItem:hover svg path{fill:#fff}.playlistItem:active{transform:scale(1.02)}.playlistItem--right p{font-size:.85rem}@media screen and (max-width:768px){.playlistItem--left{width:50%;height:auto}}.favorites{height:91vh;flex:1 1;background-color:#131111;color:#ccc;padding:1rem 2rem;overflow-y:scroll}@media screen and (max-width:900px){.favorites{height:85vh;padding:1rem}}.favorites::-webkit-scrollbar{width:.7em}.favorites::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background-color:#555;background-color:#777}.favorites::-webkit-scrollbar-thumb:active{background-color:#358a52}.favorites__info{color:#fff;width:85%;margin:0 auto 3rem;padding:1rem;border-radius:20px;background-color:rgba(29,185,84,.2392156863)}@media screen and (max-width:900px){.favorites__info{width:90%}}@media screen and (max-width:740px)and (orientation:landscape){.favorites__info{margin:0 auto 1.5rem}}.favorites__info h2{margin-bottom:1rem;letter-spacing:3px}.favorites__table{width:80%;margin:0 auto}@media screen and (max-width:900px){.favorites__table{width:87%}}.favorites__table--title{display:flex;align-items:center;justify-content:space-around;font-size:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid #777}@media screen and (max-width:480px){.favorites__table--title{font-size:1rem}}.fav-song{display:flex;align-items:center;transition:all .3s;cursor:pointer}.fav-song.selected{color:#1db954}.fav-song:not(:last-child){border-bottom:1px solid #444}.fav-song:hover{background-color:hsla(0,0%,100%,.1)}.fav-song__artist,.fav-song__title{width:50%;padding:1rem 0 1rem 3rem}@media screen and (max-width:480px){.fav-song__artist,.fav-song__title{padding:.7rem 0 .7rem 1.2rem;font-size:.9rem}}.user{height:91vh;flex:1 1;background-color:#131111;color:#ccc;padding:1rem 2rem;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow-y:scroll}.user .header{display:none}@media screen and (max-width:480px){.user .header{display:flex;position:absolute;top:0;left:0;width:95vw;padding:1rem .3rem}}@media screen and (max-width:900px){.user{height:85vh;width:19%}}.user::-webkit-scrollbar{width:.7em}.user::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background-color:#555;background-color:#777}.user::-webkit-scrollbar-thumb:active{background-color:#358a52}.user h1{margin-bottom:3rem;letter-spacing:2px}@media screen and (max-width:768px){.user h1{font-size:1.7rem}}.user h1 span{font-size:1.5rem;font-weight:100}@media screen and (max-width:768px){.user h1 span{font-size:1.2rem}}.user__logo{width:150px;height:150px}@media screen and (max-width:768px){.user__logo{width:90px;height:90px}}.user__logo svg{width:100%;height:100%}.user p{margin-top:3rem}.playlist-container{height:91vh;flex:1 1;background-color:#131111;color:#ccc;padding:1rem 2rem;overflow-y:scroll}@media screen and (max-width:900px){.playlist-container{height:85vh;padding:1rem}}.playlist-container::-webkit-scrollbar{width:.7em}.playlist-container::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background-color:#555;background-color:#777}.playlist-container::-webkit-scrollbar-thumb:active{background-color:#358a52}.playlist-container__table{width:80%;margin:0 auto}@media screen and (max-width:900px){.playlist-container__table{width:90%}}.playlist-container__title{display:flex;align-items:center;justify-content:space-around;font-size:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid #777}@media screen and (max-width:480px){.playlist-container__title{font-size:1.1rem}}.song{display:flex;align-items:center;transition:all .3s;cursor:pointer}.song.selected{color:#1db954}.song:not(:last-child){border-bottom:1px solid #444}.song:hover{background-color:hsla(0,0%,100%,.1)}.song svg{margin:1rem;transition:all .3s}.song svg path{fill:#555;transition:all 1s}.song svg:hover{transform:scale(1.15)}.song svg:hover path{fill:#777}.song svg:active{transform:scale(1)}.song__artist,.song__title{width:50%;padding:1rem 0 1rem 3rem}@media screen and (max-width:480px){.song__artist,.song__title{padding:.5rem 0 .5rem .5rem;font-size:.9rem}}.song__favorite path{fill:#1db954!important}.playlist-info{color:#fff;width:85%;margin:0 auto 3rem;padding:1rem;border-radius:20px;background-color:rgba(29,185,84,.2392156863)}@media screen and (max-width:900px){.playlist-info{width:93%}}@media screen and (max-width:800px)and (orientation:landscape){.playlist-info{margin:0 auto 1.5rem}}.playlist-info h1{margin-bottom:1rem;letter-spacing:3px}@media screen and (max-width:740px)and (orientation:landscape){.playlist-info h1{margin-bottom:.6rem;font-size:1.5rem}}@media screen and (max-width:480px){.playlist-info h1{font-size:1.5rem}}.login{background-color:#000;height:100vh;width:100vw;color:#fff;flex-direction:column}.login,.login__logo{display:flex;align-items:center;justify-content:center}.login__logo{width:50%;margin:0 auto}@media screen and (max-width:768px){.login__logo{width:75%}}.login__logo span{margin-left:1rem;font-size:5rem}@media screen and (max-width:768px){.login__logo span{font-size:3rem}}.login__logo span small{color:#1ed760;font-size:2.5rem}@media screen and (max-width:768px){.login__logo span small{font-size:1.8rem}}.login__logo svg{width:150px;height:auto}@media screen and (max-width:768px){.login__logo svg{width:90px}}.login__form{margin-top:2rem;padding:1rem;display:flex;flex-direction:column;align-items:center}@media screen and (max-width:768px){.login__form{padding:0}}.login__form--field{margin-bottom:1rem;min-width:27rem;display:flex;justify-content:space-between;align-items:center}@media screen and (max-width:768px){.login__form--field{min-width:15rem}}.login__form--field label{font-size:1.5rem}@media screen and (max-width:768px){.login__form--field label{font-size:1rem}}.login__form--field input{background-color:transparent;padding:6px 12px;font-size:1.2rem;border:2px solid #ccc;border-radius:20px;outline:none;color:#fff}.login__form--field input::placeholder{color:hsla(0,5.9%,80%,.2392156863)}@media screen and (max-width:768px){.login__form--field input{padding:3px 6px;font-size:1rem;max-width:10rem}}.login__form--field input:focus{border-color:#1ed760}.login__btn{width:50%;cursor:pointer;outline:none;color:#191414;background-color:#1ed760;border-radius:30px;border:none;padding:.5rem 1rem;margin-top:1rem;font-size:1.3rem;transition:all .3s}@media screen and (max-width:768px){.login__btn{padding:.3rem .6rem;margin-top:.7rem;font-size:1rem}}.login__btn:hover{background-color:#1db954;transform:scale(1.05)}.login__btn:active{transform:scale(1)}.login__error-msg{margin-top:2rem;color:#c0392b;font-size:1rem}.loader{color:#1ed760;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:72px auto;position:relative;transform:translateZ(0);animation:load6 1.7s ease infinite,round 1.7s ease infinite}@media screen and (max-width:1200px){.loader{font-size:60px;margin:30px auto}}@keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@keyframes round{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.notFound{height:91vh;flex:1 1;background-color:#131111;color:#ccc;padding:1rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (max-width:900px){.notFound{height:85vh;padding:1rem}}.notFound h1{margin-bottom:2rem}.notFound p{margin:2rem 0}.notFound__btn{text-decoration:none;padding:.7rem 1.5rem;background-color:#1db954;color:191414;border:none;border-radius:30px;transition:all .3s}.notFound__btn:hover{background-color:#1ed760;transform:scale(1.05)}.notFound__btn:active{transform:scale(1)}.player{background-color:#191414;position:fixed;bottom:0;left:0;width:100%;height:9vh;display:flex;align-items:center;justify-content:space-between;padding:1rem;z-index:10}@media screen and (max-width:900px){.player{height:15vh}}@media screen and (max-width:480px){.player{display:grid;grid-column-gap:3px;column-gap:3px;grid-template-areas:"album controls" "album progres"}}.player__album{display:flex;min-width:12rem;align-items:center;color:#ccc;margin-left:.75rem}@media screen and (max-width:768px){.player__album{margin:0;min-width:9rem}}@media screen and (max-width:480px){.player__album{grid-area:album}}.player__album--img{margin-right:1rem}@media screen and (max-width:768px){.player__album--img{width:40px}.player__album--img svg{width:100%;height:auto}}.player__album--title{font-size:1.2rem;margin-bottom:5px}.player__album--artist{font-size:.8rem}.player__progress{flex:1 1;margin:0 1.5rem;filter:brightness(.9);display:flex;align-items:center;justify-content:space-between;transition:all .2s}@media screen and (max-width:768px){.player__progress{margin:0 .75rem}}@media screen and (max-width:480px){.player__progress{grid-area:progres;margin:0}}.player__progress:hover{filter:brightness(1)}.player__progress--container{cursor:pointer;background-color:#777;height:7px;border-radius:10px;flex:1 1;margin:0 .5rem}.player__controls{position:relative;min-width:15rem;display:flex;align-items:center;justify-content:space-between;margin:0 7rem}@media(max-width:1350px){.player__controls{margin:0 3rem}}@media(max-width:1024px){.player__controls{margin:0 1rem}}@media screen and (max-width:768px){.player__controls{margin:0;min-width:10rem}}@media screen and (max-width:480px){.player__controls{grid-area:controls;min-width:14rem}}.player__controls>*{opacity:.9;cursor:pointer;margin:0 .75rem;transition:all .2s}@media screen and (max-width:768px){.player__controls>*{margin:0 .5rem;width:16px;height:auto}}.player__controls>:hover{opacity:1;transform:scale(1.05)}.player__controls>:hover path{fill:#fff}.player__controls>:active{transform:scale(1)}.player__controls>.loop path,.player__controls>.random path{fill:#1db954}.player__controls .dotl,.player__controls .dotr{width:6px;height:6px;border-radius:50%;background-color:#1db954;position:absolute;bottom:0}.player__controls .dotl{right:.5rem}.player__controls .dotr{left:.42rem}.player__controls .previous{transform:rotate(180deg)}.player__controls .previous:hover{transform:rotate(180deg) scale(1.05)}.player__controls .previous:active{transform:rotate(180deg) scale(1)}@media screen and (max-width:768px){.player__controls .play-pause-btn{width:30px;height:auto}}@media screen and (max-width:768px){.player__controls .loop-icon{width:19px;height:auto}}.sidebar{background-color:#000;width:17%;height:91vh;color:#ccc;padding:1.5rem .5rem;max-width:250px;display:flex;flex-direction:column;transition:all .3s}.sidebar__backdrop{position:absolute;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);z-index:3}@media screen and (max-width:900px){.sidebar{height:85vh;width:19%;padding:1rem .5rem}}@media screen and (max-width:800px)and (orientation:landscape){.sidebar{width:22%;overflow-x:hidden}.sidebar::-webkit-scrollbar{width:.5em}.sidebar::-webkit-scrollbar-thumb{border-radius:5px;background-color:#555}.sidebar::-webkit-scrollbar-thumb:hover{background-color:#777}.sidebar::-webkit-scrollbar-thumb:active{background-color:#358a52}}@media screen and (max-width:480px){.sidebar{position:absolute;top:0;left:0;transform:translateX(-170%)}}.sidebar.open{width:50%;z-index:5}@media screen and (max-width:480px){.sidebar.open{position:absolute;top:0;left:0;transform:translateX(0)}}.sidebar a{text-decoration:none}.sidebar__title{display:flex;align-items:center}.sidebar__title span{color:#fff;margin-left:5px;font-size:1.8rem}@media screen and (max-width:1200px){.sidebar__title span{font-size:1.35rem}}.sidebar__title span .clone{font-size:1.2rem;margin-left:3px;color:#1ed760}@media screen and (max-width:1200px){.sidebar__title span .clone{font-size:1srem}}.sidebar__links{display:flex;flex-direction:column;margin:1rem 0;padding:.75rem 0;border-bottom:1px solid #666;list-style:none}@media screen and (max-width:900px){.sidebar__links{padding:.3rem 0;margin:.3rem 0 0}}.sidebar__links--item{text-decoration:none;display:flex;align-items:center;color:#b3b3b3;margin:.4rem 0;padding:.5rem 1rem;border-radius:5px;transition:all .3s}@media screen and (max-width:1200px){.sidebar__links--item{margin:.3rem 0;padding:.4rem .8rem}}@media screen and (max-width:768px){.sidebar__links--item{margin:0}}.sidebar__links--item span{margin-left:1rem}@media screen and (max-width:768px){.sidebar__links--item span{font-size:.93rem}}@media screen and (max-width:800px)and (orientation:landscape){.sidebar__links--item span{margin-left:.75rem}}.sidebar__links--item svg{transition:all .3s}@media screen and (max-width:768px){.sidebar__links--item svg{width:15px;height:auto}}.sidebar__links--item svg path{fill:#b3b3b3}.sidebar__links--item.active{color:#fff;background-color:#333}.sidebar__links--item.active svg path{fill:#fff}.sidebar__links--item:hover{color:#fff}.sidebar__links--item:hover svg path{fill:#fff}.sidebar__playlists{flex:1 1;margin:1rem;overflow-y:scroll;overflow-x:hidden}@media screen and (max-width:768px){.sidebar__playlists{margin:.75rem}}@media screen and (max-width:800px)and (orientation:landscape){.sidebar__playlists{min-height:125px}}.sidebar__playlists::-webkit-scrollbar{width:.5em}.sidebar__playlists::-webkit-scrollbar-thumb{border-radius:5px;background-color:#555}.sidebar__playlists::-webkit-scrollbar-thumb:hover{background-color:#777}.sidebar__playlists::-webkit-scrollbar-thumb:active{background-color:#358a52}.sidebar__playlists h4{letter-spacing:2px;font-weight:100;margin-bottom:1.3rem}@media screen and (max-width:1200px){.sidebar__playlists h4{margin-bottom:1rem}}@media screen and (max-width:800px)and (orientation:landscape){.sidebar__playlists h4{font-size:.9rem}}@media screen and (max-width:800px)and (orientation:landscape){.sidebar__playlists p{font-size:.85rem}}.sidebar__info{background-color:hsla(0,0%,100%,.1);padding:1rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}@media screen and (max-width:900px){.sidebar__info{padding:.7rem}}.sidebar__info svg{margin-top:-3rem}@media screen and (max-width:1200px){.sidebar__info svg{width:85px;height:85px}}@media screen and (max-width:1024px){.sidebar__info svg{width:70px;height:70px}}@media screen and (max-width:900px){.sidebar__info svg{width:60px;height:60px;margin-top:-2rem}}.sidebar__info--btn{text-decoration:none;cursor:pointer;outline:none;background-color:#1ed760;padding:.5rem;width:70%;margin:1rem auto 0;border:none;border-radius:50px;font-size:1rem;color:#191414;text-align:center;transition:all .3s}@media screen and (max-width:1200px){.sidebar__info--btn{width:90%;padding:.3rem}}@media screen and (max-width:1024px){.sidebar__info--btn{font-size:.9rem}}.sidebar__info--btn:hover{background-color:#1db954;transform:scale(1.05)}.sidebar__info--btn:active{transform:scale(1)}.playlist{opacity:.75;margin-bottom:.5rem;transition:opacity .3s;cursor:pointer}.playlist:hover{opacity:1}.modal-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:10;display:flex;align-items:center;justify-content:center;transform:translateY(-100%);transition:all .3s}.modal-container.show{transform:translateY(0)}.modal-backdrop{cursor:pointer;position:absolute;top:0;left:0;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);transition:all .8s;z-index:20}.modal-backdrop.materialize{opacity:1}.modal{color:#fff;width:50%;height:40%;max-height:300px;background-color:#333;z-index:100;border-radius:20px;display:flex;flex-direction:column}@media screen and (max-width:768px){.modal{width:60%;height:60%}}@media screen and (max-width:800px)and (orientation:landscape){.modal{height:75%}}@media screen and (max-width:480px){.modal{width:80%}}.modal__title{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid #555}@media screen and (max-width:1200px){.modal__title{font-size:.9rem;padding:.5rem 1.2rem}}@media screen and (max-width:800px)and (orientation:landscape){.modal__title{font-size:.8rem;padding:.3rem 1.2rem}}.modal__title h1{letter-spacing:2px}.modal__close{outline:none;cursor:pointer;border:none;background-color:transparent;color:#c0392b;font-size:2.5rem;font-weight:700;transition:all .3s}.modal__close:hover{color:#aa372a;transform:scale(1.2)}.modal__close:active{color:#aa372a;transform:scale(1)}.modal__content{margin-top:1.5rem;padding:1rem 2rem;line-height:1.5;letter-spacing:1px;flex:1 1;overflow-y:scroll;margin-bottom:1rem}@media screen and (max-width:800px)and (orientation:landscape){.modal__content{padding:.5rem 1.25rem}}.modal__content::-webkit-scrollbar{width:.7em}.modal__content::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background-color:#555;background-color:#777}.modal__content::-webkit-scrollbar-thumb:active{background-color:#358a52}html{box-sizing:border-box}@media screen and (max-width:768px){html{font-size:15px}}*,:after,:before{margin:0;padding:0;box-sizing:inherit}body{height:100vh;width:100vw;font-family:"Roboto",sans-serif}body>div{width:100%;height:100%}::selection{background-color:rgba(30,215,95,.5019607843)}
/*# sourceMappingURL=main.48e834f1.chunk.css.map */