@import"https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap";.principal{width:inherit;min-width:100vw;height:inherit}.login{position:relative;width:inherit;min-width:100vw;height:100vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));justify-content:center;align-items:center}.login__image{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.login__article--title{display:flex;justify-content:center;align-items:center;gap:1em;width:100%;height:3em}.login__img{width:480px}.login__article{width:100%;display:flex;flex-direction:column;justify-content:center;gap:1em;padding-top:2em}.p1{font-size:1.5em}.p2{font-size:2em;margin-top:-.8em}.login__article--login{color:#ff6b00;font-size:2em}.login__form{display:flex;flex-direction:column;gap:1em;font-size:1.5em}.login__forms{display:flex;flex-direction:column}.login__forms input{width:24em;height:3.5em;border-radius:1em;padding:1em}.login__form--btn{display:flex;align-items:center;justify-content:center;width:29.5em;height:4em;border-radius:1em;font-size:.45em;background-color:#ff6b00;font-weight:700;border:none;box-shadow:0 4px 4px gray;cursor:pointer}.login__form--btn:hover{background-color:#ff6a00d9}.login__form--btn i{font-size:1.6em;font-weight:700}.login__goregister{font-size:1.3em}.login__decoration{position:absolute;right:15em;top:8em}.login__footer{position:fixed;bottom:0;left:0;width:100%;height:3.5em;background-color:#0f0817}@media (max-width: 768px){.login__article{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.8em;padding-top:2em;padding-left:3em;padding-bottom:4em}}@media (max-width: 426px){.login__img{width:300px;padding-left:2em}}.home{width:100vw;height:100vh;display:flex;flex-direction:column}.home__body{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:8em;gap:2em}.home__traks{width:94%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2em;padding:4em 0;background-color:#0000008e;border-radius:2em;margin-bottom:2em;box-shadow:0 8px 10px gray}@media (max-width: 769px){.home__traks{gap:.4em;padding:.35em;border-radius:1em}}.home__traks--title{font-size:5.5em;color:#fff}.home__form{width:60%;height:6em;border-radius:3em;display:flex;align-items:center;justify-content:center;background-color:#0000008b;box-shadow:0 8px 10px gray}.home__form input{width:80%;height:3em;border:none;border-right:1px solid gray;border-radius:.5em 0 0 .5em;box-shadow:0 2px 6px gray;padding-left:2em;outline:none}.home__form select{width:3em;height:3em;border:none;border-radius:0 .5em .5em 0;cursor:pointer;outline:none}@media (max-width: 426px){.home__form{width:90%}.home__form input{width:70%}}.card{position:relative;width:230px;height:330px;display:flex;flex-direction:column;box-shadow:0 4px 8px gray;padding:.9em;border-radius:.5em;background-color:#fff;transition:transform .1s ease}.card:hover{transform:scale(1.03)}.card__header--img{width:98%;border-radius:.5em}.card__body--name{width:85%;font-size:1.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__body--link{text-decoration:none;color:inherit}.card__body--link:hover{color:#8a8aea}.card__body--list{list-style:none;font-size:1.2em}.card__body--list li{margin-top:-.5em;cursor:pointer}.card__body--list li:hover{color:#8aeae8}.card__footer{position:absolute;right:1.5em;bottom:.5em}.card__footer--icon{font-size:1.5em}.card__footer--icon i{border-radius:50%;box-shadow:0 1px 2px gray}.card__footer--icon i:hover{color:#00000090}.add{border:none;background:transparent;cursor:pointer}.spo{color:green}@media (max-width: 769px){.card{width:140px;height:240px}.card__footer{position:absolute;right:.5em;bottom:.5em}.card__footer--icon{font-size:1em}}.MusicHeader{width:100vw}.home__header{position:fixed;width:100vw;top:0;left:0;height:3.5em;background-color:#0f0817;padding-left:1.5em;z-index:1}@media (max-width: 376px){.home__header{width:103%}}.home__article--title{position:absolute;display:flex;align-items:center;justify-content:center;width:7em;height:3.5em;color:#fff}.home__header--text{font-size:1.3em}.text__p2{font-size:1.5em;margin-top:-.6em}.home__notes{width:3em;height:2.3em}.home__header--btns{position:absolute;top:1em;right:1.5em;display:flex;gap:.8em}.home__header--btns button{width:7em;color:#fff;height:2.5em;font-size:.7em;padding:.2em;background:transparent;border:2px solid white;border-radius:2em;cursor:pointer}.home__header--btn1{cursor:pointer}.show__headerM{position:fixed;top:0;right:0;width:100vw;height:100vh;background-color:#000000b4;z-index:2;transition:right .5s ease-in-out}.headerM{position:fixed;top:0;right:-120%;width:100vw;height:100vh;background-color:#000000b4;z-index:2;transition:right .5s ease-in-out}.headerMusic{position:absolute;top:5em;right:3em;width:20em;height:85%;background-color:#fff;border-radius:.6em;z-index:1;box-shadow:0 4px 8px gray}.headerMusic__btn--close{border:none;font-size:1.5em;background-color:#fff;margin-left:.5em;margin-top:.5em;cursor:pointer}.headerMusic__form,.form__cassete{position:relative;display:flex;flex-direction:column;align-items:center}.form__ladoB,.form__ladoA,.showform,.showformA{position:absolute;width:250px;transition:transform .5s;backface-visibility:hidden}.form__ladoA{transform:perspective(500px) rotateY(0)}.form__ladoB,.showformA{transform:perspective(500px) rotateY(180deg)}.showform{transform:perspective(500px) rotateY(360deg)}.form__img{position:relative;width:inherit}.form__ladoA--img,.form__ladoB--img{position:absolute;width:inherit}.form__ladoA--input,.form__ladoB--input,.form__message{position:relative;z-index:1}.form__ladoA--input,.form__ladoB--input{top:1.3em;left:1.5em;width:83%;height:2.4em;border-radius:.5em;padding:.5em}.form__message{top:1.8em;left:1.5em;width:83%;height:6em;border-radius:.5em;padding:.5em}.cassete__btn{position:absolute;top:15em;left:4.5em;width:7em;height:2em;background-color:#0f0817;border:2px solid #fff;border-radius:1em;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5em}.arrows{width:1.2em}.headerMusic__btn{position:absolute;top:15em;left:13em;width:7em;height:2em;background-color:#0f0817;border:2px solid #fff;border-radius:1em;color:#fff;cursor:pointer}.cassete__btn:hover,.headerMusic__btn:hover{background-image:linear-gradient(144deg,#AF40FF,#5B42F3 50%,#00DDEB);border:0;border-radius:1em;box-shadow:#9741fc33 0 15px 30px -5px;box-sizing:border-box}display .headerMusic__tracks{position:absolute;top:16em;height:300px;overflow:auto}.modalAccount{width:8em;height:4em;position:fixed;display:flex;align-items:center;justify-content:center;top:-100%;right:4em;background-color:#0f0817e7;box-shadow:0 2px 4px gray;border-radius:.5em}.show__modalAccount{width:8em;height:4em;position:fixed;display:flex;align-items:center;justify-content:center;top:3.6em;right:4em;background-color:#0f0817e7;box-shadow:0 2px 4px gray;border-radius:.5em}.modalAccount__list{list-style:none;color:#fff;font-size:1.2em}.modalAccount__list li{cursor:pointer}.tracklist{position:relative;display:flex;width:97%;align-items:center;gap:.9em}.tracklist__header--img{width:100px;border-radius:.5em}.tracklist__article--list{list-style:none}.tracklist__footer{position:absolute;right:.5em}.trackRelated{display:flex;flex-direction:column;justify-content:center;gap:2em;margin-top:2em}.trackRelated__artists{display:flex;width:100%;justify-content:center;flex-wrap:wrap;gap:.5em}.trackRelated__title{font-size:4.5em;color:#fff;margin-left:1em}@media (max-width: 426px){.trackRelated{display:flex;flex-direction:column;justify-content:center;gap:.5em;margin-top:1.5em;margin-left:-2em;margin-right:-1.5em}.trackRelated__title{font-size:3.5em;color:#fff;margin-left:0}.trackRelated__artists{display:flex;width:107%;justify-content:center;flex-wrap:wrap;gap:.1em;margin-left:-.3em}}.artistpage{width:95%;display:flex;flex-direction:column;margin:4em 1.8em 1.8em;background-color:#0000009d;border-radius:2em;padding:3em;box-shadow:0 8px 10px gray;gap:2em}.artistpage__link{text-decoration:none;font-size:1.5em;height:1em;width:3em;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;margin:.5em}@media (max-width: 769px){.artistpage{margin:4em .7em .7em}}@media (max-width: 330px){.artistpage{width:100%}}.trackpage{width:95%;display:flex;flex-direction:column;margin:4em 1.8em 1.8em;background-color:#0000009d;border-radius:2em;padding:3em;box-shadow:0 8px 10px gray}.trackpage__btnBack{font-size:1.5em;height:1em;width:3em;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;margin:.5em}.trackpage__btnBack i{margin-top:-.12em}@media (max-width: 769px){.trackpage{margin:4em .7em .7em}}.trackinfo{width:99%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;color:#fff}.trackinfo__body{width:inherit;display:flex;align-items:center;justify-content:center;gap:2em}.trackinfo__body--header img{width:250px;border-radius:1.5em;box-shadow:0 2px 4px gray;transition:transform .1s ease;cursor:pointer}.trackinfo__body--header img:hover{transform:scale(1.03)}.trackinfo__info{width:15em;display:flex;flex-direction:column;justify-content:center}.trackinfo__info--name{font-size:2.5em}.trackinfo__info--list{list-style:none;font-size:1.6em}.trackinfo__info p{font-size:1.2em}.trackinfo_iframe{width:60em;height:18em}@media (max-width: 1025px){.trackinfo_iframe{width:40em;height:15em}}@media (max-width: 680px){.trackinfo__body--header img{width:150px}.trackinfo__info{width:9em;display:flex;flex-direction:column;justify-content:center}.trackinfo__info--name{font-size:1.8em}.trackinfo_iframe{width:20em}}@media (max-width: 350px){.trackinfo_iframe{width:18em}.trackinfo__body{width:inherit;display:flex;align-items:center;justify-content:center;gap:.2em}.trackinfo__info--name{font-size:1.5em}.trackinfo__info--list,.trackinfo__info p{font-size:1em}.trackinfo__info{width:8em}}.PlaylistPage{width:95%;height:100vh;display:flex;flex-direction:column;margin-top:4em;margin-left:1.5em;background-color:#0000008b;box-shadow:0 8px 10px gray;border-radius:3em}.playlis__info{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.artistInfo{width:100%;display:flex;justify-content:center;align-items:center;gap:2em}.artistInfo__header--img{width:250px;border-radius:1.5em;box-shadow:0 2px 4px gray}.artistInfo__info{width:15em;display:flex;flex-direction:column;justify-content:center;color:#fff}.artistInfo__info--name{font-size:2.5em}.artistInfo__info--list{list-style:none;font-size:1.3em}.artistInfo__info--genres{font-weight:700}.artistInfo__info--genres-item{display:flex;flex-direction:row;list-style:none;padding:0}.artistInfo__info--genres-item li{white-space:nowrap;font-size:.8em;margin-right:5px}.artistInfo__info--genres-item li:not(:last-child):after{content:", "}@media (max-width: 426px){.artistInfo__header--img{width:150px}.artistInfo__info{width:10em;display:flex;flex-direction:column;justify-content:center;color:#fff}.artistInfo__info--genres-item{display:flex;flex-direction:column;padding:0}.artistInfo__info--genres-item li{white-space:wrap}.artistInfo__info--genres-item li:not(:last-child):after{content:""}}@media (max-width: 380px){.artistInfo__info{width:8em}.artistInfo__header--img{width:130px}.artistInfo__info--name{font-size:2em}}.albumartist{display:flex;flex-direction:column;align-items:center;justify-content:center}.albumartist__title{font-size:4.5em;color:#fff;margin-left:1em}.albumartist__body{width:100%;height:20em;display:flex;align-items:center;justify-content:center;overflow-x:auto;gap:.5em;scrollbar-width:none;border-radius:3em}.albumartist__body::-webkit-scrollbar-button{display:none}.albumartist__body::-webkit-scrollbar{border-radius:.5em}@media (max-width: 380px){.albumartist{width:300px;margin-left:-1em}.albumartist__title{font-size:4em;color:#fff;margin-left:0}}@media (max-width: 330px){.albumartist{width:280px}.albumartist__body{margin-left:-1em}}.albumcard{height:15em;color:#fff;display:flex;flex-direction:column;justify-content:start}.albumcard__header img{width:180px;border-radius:1.5em}.albumcard__name{max-width:180px;font-size:1.2em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 380px){.albumcard__header img{width:150px;border-radius:1.5em}}.artisttopsongs{display:flex;flex-direction:column}.artisttopsongs__title{font-size:4.5em;color:#fff;margin-left:1em}.artisttopsongs__body{display:flex;width:100%;align-items:center;justify-content:center;flex-wrap:wrap;gap:1em}@media (max-width: 380px){.artisttopsongs{width:300px;margin-left:-.9em}.artisttopsongs__title{font-size:4em;color:#fff;margin-left:0}}@media (max-width: 330px){.artisttopsongs__body{display:flex;flex-wrap:wrap;gap:.2em;margin-left:-1.3em}.artisttopsongs__title{font-size:4em;color:#fff;margin-left:0}}.playlistinfo{width:342px;display:flex;margin:1em;transition:transform .3s}.playlistinfo:hover{cursor:pointer;transform:translateY(-50px)}.playlistinfo__img{position:relative}.playlistinfo__title{position:absolute;width:12em;height:1.8em;background-color:#fff;color:#7d7d7d;font-size:1.5em;margin-top:1em;margin-left:1.1em;border-radius:.5em;padding:.2em .2em .2em .5em;font-weight:100}.playlistinfo__message{position:absolute;width:12em;height:5em;background-color:#fff;color:#7d7d7d;font-weight:100;font-size:1.5em;margin-top:3em;margin-left:1.1em;border-radius:.5em;padding:.5em}.showplaylist{position:relative;display:flex;width:95%;height:100vh;margin-top:7em;margin-left:2em;padding:3em;justify-content:center;background-color:#0000008e;border-radius:2em;margin-bottom:2em;box-shadow:0 8px 10px gray}.showplaylist__btnBack{position:absolute;top:3em;left:2.5em;font-size:1.5em;height:1em;width:3em;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;margin:.5em}.showplaylist__ladoB,.showplaylist__ladoA,.showplaylistform,.showplaylistformA{position:absolute;width:340px;transition:transform .5s;backface-visibility:hidden}.showplaylist__ladoA{transform:perspective(500px) rotateY(0)}.showplaylist__ladoB,.showplaylistformA{transform:perspective(500px) rotateY(180deg)}.showplaylistform{transform:perspective(500px) rotateY(360deg)}.showplaylist__tracks{position:absolute;top:20em;overflow-y:auto;height:400px}.showplaylist__btn{position:absolute;top:10em;right:30em;width:7em;height:2em;border-radius:1em;cursor:pointer;background-color:#0f0817;border:2px solid #fff;color:#fff}.showplaylist__btn:hover{background-image:linear-gradient(144deg,#AF40FF,#5B42F3 50%,#00DDEB);border:0;border-radius:1em;box-shadow:#9741fc33 0 15px 30px -5px;box-sizing:border-box}.arrow_white{width:1.1em}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}body{font-family:Dongle,sans-serif;width:100vw;height:100vh;min-width:100vw;background:linear-gradient(270deg,#eeeecc,#ffffff,#eeeecc);overflow-x:hidden}#root{width:inherit;min-width:100vw;height:inherit}::-webkit-scrollbar{width:.6rem;background-color:#bdbdbd}::-webkit-scrollbar-thumb{background-color:#2b2b2b;border-radius:.5rem}::-webkit-scrollbar-button{background-color:transparent;border:1px solid #555;color:#fff;border-radius:.5rem}