@import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;1,500;1,600&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}body,html{-ms-overflow-style:none;background-color:#0e1010;color:#f8e5db;font-family:Nunito;height:100vh;scrollbar-width:none;width:100vw}body::-webkit-scrollbar,html::-webkit-scrollbar{display:none}.dot-typing{-webkit-animation:dotTyping 1.5s linear infinite;animation:dotTyping 1.5s linear infinite;background-color:#de5000;border-radius:5px;box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000;color:#de5000;height:10px;left:-9999px;position:relative;width:10px}@-webkit-keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}16.667%{box-shadow:9984px -10px 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}33.333%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}50%{box-shadow:9984px 0 0 0 #de5000,9999px -10px 0 0 #de5000,10014px 0 0 0 #de5000}66.667%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}83.333%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px -10px 0 0 #de5000}to{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}16.667%{box-shadow:9984px -10px 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}33.333%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}50%{box-shadow:9984px 0 0 0 #de5000,9999px -10px 0 0 #de5000,10014px 0 0 0 #de5000}66.667%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}83.333%{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px -10px 0 0 #de5000}to{box-shadow:9984px 0 0 0 #de5000,9999px 0 0 0 #de5000,10014px 0 0 0 #de5000}}.hide__loading__page{display:none!important}.loading__page{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100%}.loading__image--container{height:100px;width:200px}.loading__image--container img{height:100%;width:100%}.application__logo--container{display:flex;height:80px;margin:0 auto;margin-left:10%!important;width:70%}.application__logo--container img{height:100%;width:100%}.main__container{left:25%;padding-bottom:100px;position:absolute;width:75%}.page__title{color:#de5000}.page__content{margin:auto;padding-top:10%;width:95%}.loading__data{align-items:center;display:flex;height:100vh;justify-content:center;width:100%}@media screen and (max-width:768px){.main__container{left:0;padding-bottom:200px;width:100%}.page__content{padding-top:15%}.application__logo--container{display:flex;height:80px;margin:0;margin-left:5%!important;width:70%}.application__logo--container img{height:100%;width:100%}}@media screen and (max-width:576px){.main__container{left:0;padding-bottom:150px;width:100%}.application__logo--container{display:flex;height:60px;margin:0;width:60%}.application__logo--container img{height:100%;width:100%}.page__content{padding-top:30%;width:90%}}.homepage--container{display:grid;grid-template-columns:25% 100%}.homepage__cover--container{align-items:flex-start;background:url(/static/media/cover-home.60ddfa5ba82ee2011ba1.png) no-repeat;background-color:#de5000;background-position:100%;background-size:contain;display:flex;flex-direction:column;height:600px!important;justify-content:center;margin:auto;padding:5%;width:95%}.homepage__cover--container h3{font-size:2em}.homepage__cover--container p{margin-top:0}.homepage__cover--container span{font-size:1.6em}.homepage__cover--container .play__recent__playlist{background-color:#f8e5db;border:.1em solid #f8e5db;border-radius:25px;color:#000;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em;transition:background .3s ease,color .3s ease;width:25%}.homepage__cover--container .play__recent__playlist:hover{background-color:#de5000;color:#f8e5db}@media (max-width:1440px){.homepage--container{display:grid;grid-template-columns:25% 100%}.homepage__cover--container{height:400px!important}}@media (max-width:768px){.homepage--container{display:flex;width:100%}.homepage__content{left:0!important;padding-bottom:200px!important;width:100%!important}.homepage__cover--container{height:300px!important}.homepage__cover--container h3{font-size:1.4em!important}.homepage__cover--container span{font-size:1em}.homepage__cover--container .play__recent__playlist{background-color:#f8e5db;border:.1em solid #f8e5db;border-radius:25px;color:#000;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em;transition:all .3s ease,color .3s ease;width:30%}.homepage__cover--container .play__recent__playlist:hover{background-color:#de5000;color:#f8e5db}}@media (max-width:576px){.homepage--container{display:flex;width:100%}.homepage__content{left:0!important;width:100%!important}.homepage__cover--container{height:200px!important}.homepage__cover--container h3{font-size:1em!important}.homepage__cover--container span{font-size:.8em}.homepage__cover--container .play__recent__playlist{background-color:#f8e5db;border:.1em solid #f8e5db;border-radius:25px;color:#000;font-size:.8em;margin:2% 2% 2% 0;padding:.5em;width:35%}.homepage__cover--container .play__recent__playlist:hover{background-color:#de5000;color:#f8e5db}}.album__main--container{background-color:rgba(50,50,50,.5);display:flex;justify-content:space-evenly;margin:0 auto;padding:5%;width:100%}.album__cover--container{height:300px;width:300px}.album__cover--container img{height:100%;width:100%}.album__details--container{display:flex;flex-direction:column;justify-content:space-between;margin:0 5%}.single__album--name{color:#de5000;font-size:2em}.album__other__detail--container{align-items:flex-end;display:flex}.album__other__detail--container h3{font-size:1em;padding:0 .5em}.album__other__detail--container h4{border-left:.1em solid #fff;font-size:.8em;padding:0 .5em}.album__actions--container{align-items:flex-end;display:flex;justify-content:flex-end}.album__actions--like,.album__actions--play{color:#de5000;font-size:2em;margin:.5em}.album__actions--like:hover,.album__actions--play:hover{cursor:pointer}.album__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;flex-direction:row;justify-self:space-evenly;margin:2% auto;padding:0 5%;width:100%}.album__track--container:hover{background-color:#000}.album__track--details{display:flex;flex-direction:column;margin:0 5%;width:50%}.album__track--title{color:#de5000;margin:0}.album__track--artists{color:#f8e5db;margin:0}.album__track__actions--container{align-items:flex-end;display:flex;justify-content:space-between;width:10%}.album__track__actions--like,.album__track__actions--play{color:#de5000;font-size:1em;margin:.5em}.album__track__duration--container{align-items:flex-end;align-self:flex-end;display:flex;justify-content:flex-end;width:20%}@media screen and (max-width:1440px){.album__main--container{background-color:rgba(50,50,50,.5);display:flex;justify-content:space-evenly;margin:0 auto;padding:5%;width:100%}.album__cover--container{height:300px;width:300px}.album__cover--container img{height:100%;width:100%}.album__details--container{display:flex;flex-direction:column;justify-content:space-between;margin:0 5%}.single__album--name{color:#de5000;font-size:2em}.album__other__detail--container{align-items:flex-end;display:flex}.album__other__detail--container h3{font-size:1em;padding:0 .5em}.album__other__detail--container h4{border-left:.1em solid #fff;font-size:.8em;padding:0 .5em}.album__actions--container{align-items:flex-end;display:flex;justify-content:flex-end}.album__actions--like,.album__actions--play{color:#de5000;font-size:2em;margin:.5em}.album__actions--like:hover,.album__actions--play:hover{cursor:pointer}.album__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;flex-direction:row;justify-self:space-evenly;margin:2% auto;padding:0 5%;width:90%}.album__track--container:hover{background-color:#000}.album__track--details{display:flex;flex-direction:column;margin:0 5%;width:50%}.album__track--title{color:#de5000;margin:0}.album__track--artists{color:#f8e5db;margin:0}.album__track__actions--container{align-items:flex-end;display:flex;justify-content:space-between;width:10%}.album__track__actions--like,.album__track__actions--play{color:#de5000;font-size:1em;margin:.5em}.album__track__duration--container{align-items:flex-end;align-self:flex-end;display:flex;justify-content:flex-end;width:20%}}@media screen and (max-width:768px){.album__main--container{margin:5% auto 0}.single__album--name{font-size:1.4em}.album__other__detail--container h3{font-size:.8em}.album__other__detail--container h4{font-size:.7em}.album__actions--like,.album__actions--play{font-size:1.4em}.album__track--container{width:100%}}@media screen and (max-width:576px){.album__main--container{align-items:center;flex-direction:column;width:100%!important}.album__cover--container{height:200px;width:200px}.album__details--container{align-items:center;flex-direction:column;width:100%}.album__details--container h3{font-size:1em}.single__album--name{font-size:1.2em;margin:0}.album__other__detail--container{align-items:flex-end;display:flex}.album__other__detail--container h3{font-size:1em;padding:0 .5em}.album__other__detail--container h4{border-left:.1em solid #fff;padding:0 .5em}.album__actions--like,.album__actions--play{color:#de5000;font-size:1em;margin:.5em}.album__actions--like:hover,.album__actions--play:hover{cursor:pointer}.album__track--container{font-size:.8em}.album__track--container:hover{background-color:#000;cursor:pointer}.album__track--container:hover .album__track--details{display:flex;flex-direction:column;margin:0 5%;width:50%}.album__track--container:hover .album__track--title{color:#de5000;margin:0}.album__track--container:hover .album__track--artists{color:#f8e5db;margin:0}.album__track__actions--container{align-items:flex-end;display:flex;display:none;justify-content:space-between;margin:0}.album__track__actions--like,.album__track__actions--play{color:#de5000;display:none;font-size:1.4rem;margin:0 .5em}}.top__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;height:100px;margin:2% 0}.top__track--container:hover{background-color:#000;cursor:pointer}.top__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:100px;width:50%}.top__track--title{color:#de5000;display:flex;justify-self:flex-start}.top__track--details{align-items:center;display:flex;justify-content:space-around;width:100%}.top__track--actions{color:#de5000;display:flex;justify-content:space-between;width:10%}@media screen and (max-width:1440px){.top__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;height:100px;margin:2% 0}.top__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:100px;width:100%}.top__track--title{color:#de5000;display:flex;justify-self:flex-start}.track__cover--container{height:100px;width:100px}.track__cover--container img{height:100%;width:100%}.top__track--details{align-items:center;display:flex;justify-content:space-around;width:100%}.top__track--actions{color:#de5000;display:flex;justify-content:space-between;width:10%}}@media screen and (max-width:768px){.top__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:100px;width:100%}.top__track--title{color:#de5000;display:flex;font-size:1em;justify-self:flex-start}.track__cover--container{height:100px;width:100px}.track__cover--container img{height:100%;width:100%}.top__track--details{align-items:center;display:flex;justify-content:space-around;width:100%}.top__track--actions{align-items:center;color:#de5000;display:flex;justify-content:center;width:5%}}@media screen and (max-width:576px){.top__track--container{margin:5% 0;padding:0 5%;width:100%}.top__track--container:hover{background-color:#000;cursor:pointer}.top__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:100px;width:100%}.track__cover--container{display:none}.track__cover--container img{height:100%;width:100%}.top__track--duration,.top__track--title{font-size:.9em}.top__tarck--popularity,.top__track--actions{display:none}}@media screen and (max-width:1440px){.artist__cover--container{background-color:rgba(50,50,50,.5);padding:5%;width:100%}.artist__image--container{height:150px;width:150px}.artist__image--container img{border-radius:50%;height:100%;width:100%}}@media screen and (max-width:768px){.page__content{margin:5% auto 0}.artist__cover--container{background-color:rgba(50,50,50,.5);padding:5%;width:100%}.artist__image--container{height:150px;width:150px}.artist__image--container img{border-radius:50%;height:100%;width:100%}}@media screen and (max-width:576px){.artist__cover--container{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}}.album__tabs--container{display:flex;flex-direction:column;margin:auto;width:95%}.tab__navigation--container .tab__navigation--button{background-color:#f8e5db;border:none;border-radius:25px;color:#000;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em}.tab__navigation--container .tab__navigation--button:focus,.tab__navigation--container .tab__navigation--button:hover{background-color:#de5000;color:#f8e5db}.tab__navigation--container .tab__navigation--button:first-of-type:focus-visible{background-color:#de5000;color:#f8e5db}.tab__navigation--container .tab1,.tab__navigation--container .tab2{display:flex}.tab__navigation--container .active__tab--button{background-color:#de5000;border:none;border-radius:25px;color:#f8e5db;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em}.active__tab{display:flex;flex-direction:column}.no__active--tab{display:none;flex-direction:column}.card__tabs--panel{grid-gap:20px;display:grid;grid-template-columns:repeat(4,1fr);width:100%}.homepage__card--container{grid-gap:20px;display:grid;grid-template-columns:repeat(20,200px);overflow-x:auto;scrollbar-width:none;width:100%}.top__artist--container{grid-template-columns:repeat(10,200px)!important}.card__item--container{border-radius:25px;height:350px;margin:1% 0;position:relative}.card__item--container .card__image--container{height:300px;position:relative;width:100%}.card__item--container .card__image--container img{border-radius:25px;height:100%;width:100%}.card__item--container .play__icon--container{align-items:center;background-color:#de5000;border-radius:50%;bottom:20%;display:flex;height:40px;justify-content:center;position:absolute;right:5%;transition:background .3s ease-in;width:40px}.card__item--container .play__icon--container:hover{background-color:#fff;color:#de5000}.card__item--container .play__icon--container .spinner{align-items:center;display:flex;height:30px;justify-content:center;margin:auto;width:50px}.card__item--container .play__icon--container .spinner div{-webkit-animation:stretch 2s infinite;animation:stretch 2s infinite;-webkit-animation-timing-function:cubic-bezier(.62,.28,.23,.99);animation-timing-function:cubic-bezier(.62,.28,.23,.99);background:#fff;float:left;height:100%;margin:0 1px;width:2px}.card__item--container .play__icon--container .spinner div:hover{background:#de5000;color:#de5000}.card__item--container .play__icon--container .spinner .r1{-webkit-animation-delay:-1s;animation-delay:-1s}.card__item--container .play__icon--container .spinner .r1:hover{background:#de5000}.card__item--container .play__icon--container .spinner .r2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.card__item--container .play__icon--container .spinner .r3{-webkit-animation-delay:-.8s;animation-delay:-.8s}.card__item--container .play__icon--container .spinner .r4{-webkit-animation-delay:-.7s;animation-delay:-.7s}.card__item--container .play__icon--container .spinner .r5{-webkit-animation-delay:-.6s;animation-delay:-.6s}.card__item--container .card__name{color:#f8e5db;margin:0}.card__item--container .album__name{color:#de5000;margin:0}.card__item--container .track__link{color:#f8e5db}@-webkit-keyframes stretch{0%,20%,49%{background-color:#fff;-webkit-transform:scaleY(.4);transform:scaleY(.4)}10%{-webkit-transform:scaleY(1);transform:scaleY(1)}50%,70%,to{background-color:#fff;-webkit-transform:scaleY(.4);transform:scaleY(.4)}60%{background-color:#fff;-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes stretch{0%,20%,49%{background-color:#fff;-webkit-transform:scaleY(.4);transform:scaleY(.4)}10%{-webkit-transform:scaleY(1);transform:scaleY(1)}50%,70%,to{background-color:#fff;-webkit-transform:scaleY(.4);transform:scaleY(.4)}60%{background-color:#fff;-webkit-transform:scaleY(1);transform:scaleY(1)}}@media screen and (max-width:1440px){.album__tabs--container{display:flex;flex-direction:column;margin:auto;width:95%}.card__tabs--panel{grid-gap:20px;display:grid;grid-template-columns:repeat(4,200px);width:100%}.card__item--container{border-radius:25px;height:300px;margin:0;position:relative}.card__item--container .card__image--container{height:200px;position:relative;width:100%}.card__item--container .card__image--container img{border-radius:25px;height:100%;width:100%}.card__item--container .play__icon--container{align-items:center;background-color:#de5000;border-radius:50%;bottom:40%;display:flex;height:40px;justify-content:center;position:absolute;right:5%;width:40px}.card__item--container .play__icon--container:hover{cursor:pointer}.card__item--container .card__name{color:#f8e5db;margin:0}.card__item--container .album__name{color:#de5000;margin:0}.card__item--container .track__link{color:#f8e5db}}@media screen and (max-width:768px){.album__tabs--container{display:flex;flex-direction:column;margin:auto;width:90%}.card__tabs--panel{grid-gap:30px;display:grid;grid-template-columns:repeat(3,200px);margin:0;width:100%}.homepage__card--container{grid-gap:20px;grid-template-columns:repeat(20,200px);overflow-x:auto;scrollbar-width:none}.card__item--container{border-radius:25px;height:250px;margin:0 0 10%!important;margin:0;position:relative;width:100%}.card__item--container .card__image--container{height:200px;position:relative;width:100%}.card__item--container .card__image--container img{border-radius:25px;height:100%;width:100%}.card__item--container .play__icon--container{align-items:center;background-color:#de5000;border-radius:50%;bottom:30%;display:flex;height:40px;justify-content:center;position:absolute;right:5%;width:40px}.card__item--container .card__name{color:#f8e5db;margin:0}.card__item--container .album__name{margin:0}.card__item--container .track__link{color:#f8e5db}}@media screen and (max-width:576px){.album__tabs--container{display:flex;flex-direction:column;margin:auto;width:90%}.card__tabs--panel{grid-gap:20px;display:grid;grid-template-columns:repeat(2,1fr);width:100%}.homepage__card--container{grid-gap:20px;grid-template-columns:repeat(20,200px);overflow-x:auto;scrollbar-width:none}.card__item--container{border-radius:25px;height:250px;margin:2% 0!important;position:relative;width:100%}.card__item--container .card__image--container{height:200px;position:relative;width:100%}.card__item--container .card__image--container img{border-radius:25px;height:100%;width:100%}.card__item--container .play__icon--container{align-items:center;background-color:#de5000;border-radius:50%;bottom:30%;display:flex;height:40px;justify-content:center;position:absolute;right:5%;width:40px}.card__item--container .card__name{margin:0}.card__item--container .album__name{color:#de5000;margin:0}.card__item--container .track__link{color:#f8e5db}}.not__found--container{align-items:center;display:flex;flex-direction:column;height:80vh;justify-content:center}.not__found--title{color:#f8e5db;font-size:3rem}.not__found--zero{color:#de5000;font-size:2em}.not__found--message{font-size:2em}.not__found--button{background-color:#f8e5db;border:.1em solid #f8e5db;border-radius:25px;color:#000;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em;transition:background .3s ease,color .3s ease;width:25%}.not__found--button:hover{background-color:#de5000;color:#f8e5db}@media screen and (max-width:1440px){.not__found--title{font-size:2.4rem}.not__found--zero{font-size:2em}.not__found--message{font-size:1.6em}.not__found--button{background-color:#f8e5db;border:.1em solid #f8e5db;border-radius:25px;color:#000;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em;transition:background .3s ease,color .3s ease;width:25%}.not__found--button:hover{background-color:#de5000;color:#f8e5db}}@media screen and (max-width:576px){.not__found--container{height:60vh}.not__found--title{font-size:2rem}.not__found--zero{font-size:1.4em}.not__found--message{font-size:1em}.not__found--button{width:50%}}.searched__track--container{grid-gap:20px;-ms-overflow-style:none;display:grid;grid-template-columns:repeat(20,300px);height:auto;overflow-x:auto;scrollbar-width:none}.searched__track--container::-webkit-scrollbar{display:none}.search__result--title{background-color:#de5000;border:none;border-radius:25px;color:#f8e5db!important;font-size:1em;margin:3% 3% 3% 0;padding:.5em 1em;text-align:center;width:15%}@media screen and (max-width:1440px){.searched__track--container{grid-gap:20px;display:grid;grid-template-columns:repeat(20,200px);overflow-x:auto;scrollbar-width:none}}@media screen and (max-width:576px){.searched__track--container{grid-gap:20px;display:grid;grid-template-columns:repeat(20,200px);overflow-x:auto;scrollbar-width:none}.search__result--title{width:50%}}.music__player--container{background-color:rgba(50,50,50,.5);bottom:0;color:#fff;display:flex;justify-content:space-evenly;position:fixed;width:75%}.active__music__image--container{height:50px;width:50px}.active__music__image--container img{height:100%;width:100%}@media screen and (max-width:1440px){.music__player--container{background-color:rgba(50,50,50,.5);bottom:0;color:#fff;display:flex;justify-content:space-evenly;position:fixed;width:75%}.active__music__image--container{height:50px;width:50px}.active__music__image--container img{height:100%;width:100%}}@media screen and (max-width:768px){.music__player--container{bottom:15%;width:100%}}@media screen and (max-width:576px){.music__player--container{bottom:15%;width:100%}}.sidebar--container{background-color:rgba(50,50,50,.5);display:flex;flex-direction:column;height:100vh;left:0;overflow-x:hidden;position:fixed;top:0;width:25%}@media screen and (max-width:1440px){.sidebar--container{background-color:rgba(50,50,50,.5);display:flex;flex-direction:column;height:100vh;left:0;overflow-x:hidden;position:fixed;top:0;width:25%}}@media screen and (max-width:768px){.sidebar--container{display:none}}@media screen and (max-width:576px){.sidebar--container{display:none}}.link__hover--effect,.logout__button:hover,ul li:hover{background-color:#de5000;color:#de5000;cursor:pointer;padding:2% 1%}.mobile__naigation--container{display:none}.navigation__menu--container,ul{width:100%}ul{list-style-type:none}ul li{align-items:center;align-self:flex-start;color:#f8e5db;display:flex;font-size:1.6em;transition:.3s ease;width:100%}ul li span{display:block;font-size:1em;margin:0 5%;width:100%}.active{color:#de5000}.active:hover{color:#fff}.no__active{color:#f8e5db}a{align-items:center;align-self:flex-start;display:flex;text-decoration:none}.sidebar__menu--icon{font-size:2em}hr{background-color:#de5000;color:#de5000;height:2px;margin-left:10%;width:20%}.logout__button{align-items:center;background:none;border:none;bottom:5%;color:#f8e5db;display:flex;font-size:1.2em;justify-self:flex-end;left:10%;position:absolute;transition:.3s ease;width:100%}.logout__button .logout__button--icon{font-size:1.4em;margin-right:5%}.logout__button:hover{color:#fff}@media (max-width:1440px){.link__hover--effect,.logout__button:hover,ul li:hover{background-color:#de5000;color:#de5000;cursor:pointer}.mobile__naigation--container{display:none}.navigation__menu--container,ul{width:100%}ul{list-style-type:none}ul li{align-items:center;align-self:flex-start;color:#f8e5db;display:flex;font-size:1em;transition:.3s ease;width:300px}ul li span{word-wrap:normal;display:block;font-size:1em;margin:0 5%;width:100px}.active{color:#de5000}.no__active{color:#f8e5db}a{align-items:center;align-self:flex-start;display:flex;text-decoration:none}.sidebar__menu--icon{font-size:2em}hr{background-color:#de5000;color:#de5000;height:2px;margin-left:10%;width:20%}.logout__button{align-items:center;background:none;border:none;bottom:5%;color:#f8e5db;display:flex;font-size:1.2em;justify-self:flex-end;left:10%;position:absolute;transition:.3s ease;width:100%}.logout__button .logout__button--icon{font-size:1.4em;margin-right:5%}.logout__button:hover{color:#fff}}@media (max-width:768px){.mobile__naigation--container{align-items:center;background-color:#000;bottom:0;display:flex;height:15%;padding:0;position:fixed;width:100%}.mobile__naigation--container ul{display:flex;justify-content:center;width:100%}.mobile__naigation--container ul li{display:flex;flex-direction:column;justify-content:center}.mobile__naigation--container ul li a{width:100%}.mobile__naigation--container ul li a span{margin:0}.mobile__naigation--container ul li a .sidebar__menu--icon{margin:auto}.mobile__naigation--container ul li a:hover,.mobile__naigation--container ul li:hover{background-color:initial;color:#de5000;cursor:pointer;padding:0!important}.mobile__naigation--container ul .logout__item{align-items:center;display:flex;flex-direction:column;justify-content:center}}@media (max-width:576px){.mobile__naigation--container{background-color:#000;bottom:0;display:flex;height:15%;padding:0;position:fixed;width:100%}.mobile__naigation--container ul{display:flex}.mobile__naigation--container ul li a{display:flex;flex-direction:column}.mobile__naigation--container ul li a span{margin:0}.mobile__naigation--container ul li a:hover,.mobile__naigation--container ul li:hover{background-color:initial;color:#de5000;cursor:pointer;padding:0!important}.mobile__naigation--container ul .logout__item{align-items:center;display:flex;flex-direction:column;justify-content:center}}.header--container{background-color:rgba(50,50,50,.5);display:flex;justify-content:space-between;opacity:1;padding:2%;position:fixed;width:75%}.themetoggler{border:.1em solid red;width:30%}.mobile__header--container{display:none}@media screen and (max-width:1440px){.header--container{display:flex;justify-content:space-between;padding:2%}.themetoggler{border:.1em solid red;width:30%}.mobile__header--container{display:none}}@media screen and (max-width:768px){.header--container{display:none}.mobile__header--container{align-items:center;display:flex;justify-content:space-between;top:0;width:90%}.mobile__header--container .logo__mobile{left:0!important;margin:0;padding:0}.mobile__header--container div:last-child{border:.1 dashed #ff0}}@media screen and (max-width:576px){.header--container{display:none}.themetoggler{width:30%}.mobile__header--container{align-items:center;display:flex;justify-content:space-between;padding:0 5%;padding-left:0!important;top:0;width:100%}}form{font-size:1.6em;height:40px;margin-right:15%;width:20%}.desktop__search--form{display:flex}.search__input--container{display:flex;position:relative}.search__input--container .search__bar--icon{font-size:.8em;left:10%;position:absolute;top:25%}.search__input--container input[type=search]{background-color:rgba(50,50,50,.5);border:.1em solid #fff;border-radius:25px 0 0 25px;color:#f8e5db;outline:none;outline-color:none;padding:1% 25%}input[type=submit]{background-color:#de5000;border:none;border-radius:0 25px 25px 0;color:#fff;padding:5% 15%;transition:all .3s ease}input[type=submit]:hover{background-color:#fff;color:#de5000;cursor:pointer}.mobile__search--form{display:none}@media (max-width:1440px){form{font-size:1.6em;height:40px;margin-right:15%;width:20%}.desktop__search--form{display:flex}.search__input--container{display:flex;position:relative}.search__input--container .search__bar--icon{font-size:.8em;left:10%;position:absolute;top:25%}.search__input--container input[type=search]{background-color:rgba(50,50,50,.5);border:.1em solid #fff;border-radius:25px 0 0 25px;color:#f8e5db;outline:none;padding:1% 25%}input[type=submit]{background-color:#de5000;border:none;border-radius:0 25px 25px 0;color:#fff;padding:5% 15%}.mobile__search--form{display:none}}@media screen and (max-width:768px){.mobile__search--form{display:flex;margin:auto;width:95%}form{display:flex;font-size:1em;height:30px;margin:auto;width:20%}.search__input--container,form{width:100%}.search__input--container .search__bar--icon{font-size:1em;left:5%;position:absolute;top:25%}.search__input--container input[type=search]{border:none;border-radius:25px;outline:none;padding-left:15%;width:100%}.search__input--container input[type=search]:focus{border:none}input[type=submit]{display:none}}@media screen and (max-width:576px){.mobile__search--form{display:flex;margin:auto;width:90%}form{display:flex;font-size:1em;height:30px;margin:auto;width:20%}.search__input--container,form{width:100%}.search__input--container .search__bar--icon{font-size:1em;left:5%;position:absolute;top:25%}.search__input--container input[type=search]{border:none;border-radius:25px;outline:none;padding-left:15%;width:100%}.search__input--container input[type=search]:focus{border:none}input[type=submit]{display:none}}.userlooged--container{align-items:center;background-color:rgba(50,50,50,.5);border-radius:50px;display:flex;height:40px;padding:.1em 0;width:25%}.usertest__image--container{border-radius:50%;margin:0 5%;width:30px}.usertest__image--container img{border-radius:50%;height:100%;width:100%}h2{font-size:1.6em;width:100%}@media screen and (max-width:1440px){.userlooged--container{align-items:center;background-color:rgba(50,50,50,.5);border-radius:50px;display:flex;height:40px;padding:.1em 0;width:25%}.usertest__image--container{border-radius:50%;margin:0 5%;width:30px}.usertest__image--container img{border-radius:50%;height:100%;width:100%}h2{font-size:1em;width:100%}}.playlist__cover--container{background-color:rgba(50,50,50,.5);display:flex;padding:5%}.cover__image--container{height:auto;width:300px}.cover__image--container img{height:100%;width:100%}.cover__details--container{display:flex;flex-direction:column;justify-content:space-around;padding:5%}.cover__details--container .cover__details__name{color:#de5000;font-size:2em}.playlist__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;height:100px;margin:2% 0}.playlist__track--container h4{margin:0}.playlist__track--container:hover{background-color:#000;cursor:pointer}.playlist__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:200px;width:50%}.playlist__track--title{color:#de5000;display:flex}.track__cover--container{height:100px;width:100px}.track__cover--container img{height:100%;width:100%}.playlist__track--details{align-items:flex-start;display:flex;flex-direction:column;width:100%}.playlist__track--other--details{width:50%}.playlist__track--actions{color:#de5000;display:flex;justify-content:space-between;width:10%}.playlist__track--duration{align-self:center;position:absolute;right:10%}@media screen and (max-width:1440px){.playlist__cover--container{background-color:rgba(50,50,50,.5);display:flex;padding:5%}.cover__image--container{height:auto;width:300px}.cover__image--container img{height:100%;width:100%}.cover__details--container{display:flex;flex-direction:column;justify-content:space-around;padding:5%}.cover__details--container .cover__details__name{color:#de5000;font-size:2em}.playlist__track--container{align-items:center;background-color:rgba(50,50,50,.5);display:flex;height:100px;margin:2% 0}.playlist__track--container h4{margin:0}.playlist__track--container:hover{background-color:#000;cursor:pointer}.playlist__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:200px;width:50%}.playlist__track--title{color:#de5000;display:flex}.track__cover--container{height:100px;width:100px}.track__cover--container img{height:100%;width:100%}.playlist__track--details{align-items:flex-start;display:flex;flex-direction:column;width:100%}.playlist__track--other--details{width:50%}.playlist__track--actions{color:#de5000;display:flex;justify-content:space-between;width:10%}.playlist__track--duration{align-self:center;position:absolute;right:10%}}@media screen and (max-width:576px){.playlist__track--container{margin:5% 0;width:100%}.playlist__track--container:hover{background-color:#000;cursor:pointer}.playlist__track_title_image--container{grid-gap:20px;align-items:center;display:grid;grid-template-columns:100px 1fr;height:100px;width:100%}.playlist__track--title{font-size:.8em}.playlist__track--actions,.top__tarck--popularity{display:none}}*{box-sizing:border-box}.bounce{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite;transition:bounce 3s ease}@-webkit-keyframes bounce{70%{-webkit-transform:translateY(0);transform:translateY(0)}80%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}90%{-webkit-transform:translateY(0);transform:translateY(0)}95%{-webkit-transform:translateY(-7%);transform:translateY(-7%)}97%{-webkit-transform:translateY(0);transform:translateY(0)}99%{-webkit-transform:translateY(-3%);transform:translateY(-3%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounce{70%{-webkit-transform:translateY(0);transform:translateY(0)}80%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}90%{-webkit-transform:translateY(0);transform:translateY(0)}95%{-webkit-transform:translateY(-7%);transform:translateY(-7%)}97%{-webkit-transform:translateY(0);transform:translateY(0)}99%{-webkit-transform:translateY(-3%);transform:translateY(-3%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.login__page--container{display:grid;grid-template-columns:repeat(2,50%)}.centerItems,.left__section--container,.right__section--container,.right__section--container .handle__login--button,.right__section--container .section__content{align-items:center;display:flex;justify-content:center}.left__section--container{background-color:#de5000;height:100vh}.left__section--container .left__section--image{height:100px;width:300px}.left__section--container .left__section--image img{height:100%;width:100%}.right__section--container{flex-direction:column}.right__section--container h1{display:none}.right__section--container .earphone__image--container{height:200px;margin:10% 0;width:200px}.right__section--container .earphone__image--container img{height:100%;width:100%}.right__section--container .section__content{flex-direction:column}.right__section--container h3{align-self:center}.right__section--container .handle__login--button{background-color:#de5000;border:.1em solid #de5000;color:#fff;font-size:1.4em;padding:5%;transition:all .3s ease-out}.right__section--container .handle__login--button:hover{background-color:#fff;border:.1em solid #de5000;color:#de5000;cursor:pointer;-webkit-transform:scale(1.1);transform:scale(1.1)}.right__section--container .handle__login--button .spotify__icon{font-size:2.6em}@media (max-width:1440px){.login__page--container{display:grid;grid-template-columns:repeat(2,50%)}.centerItems,.left__section--container,.right__section--container,.right__section--container .handle__login--button,.right__section--container .section__content{align-items:center;display:flex;justify-content:center}.left__section--container{background-color:#de5000;height:100vh}.left__section--container .left__section--image{height:100px;width:300px}.left__section--container .left__section--image img{height:100%;width:100%}.right__section--container{flex-direction:column}.right__section--container h1{display:none}.right__section--container .earphone__image--container{height:200px;width:200px}.right__section--container .earphone__image--container img{height:100%;width:100%}.right__section--container .section__content{flex-direction:column}.right__section--container h3{align-self:center}.right__section--container .handle__login--button{background-color:#de5000;border:.1em solid #de5000;color:#fff;font-size:1.4em;padding:5%;transition:all .3s ease-out}.right__section--container .handle__login--button:hover{background-color:#fff;border:.1em solid #de5000;color:#de5000;cursor:pointer;-webkit-transform:scale(1.1);transform:scale(1.1)}.right__section--container .handle__login--button .spotify__icon{font-size:2.6em}}@media screen and (max-width:576px){.login__page--container{display:flex;height:100vh;width:100%}.left__section--container{display:none}.right__section--container{margin:auto}.right__section--container h1{color:#de5000;display:flex}.right__section--container .handle__login--button{font-size:1em}.right__section--container .handle__login--button .spotify__icon{font-size:2em}}
/*# sourceMappingURL=main.94b53920.css.map*/