@import"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap";@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css";:root{--color-black: #0f0f0f;--color-grey: #1e1e23;--color-lightgrey: #c4c4c4;--color-white: white;--color-background: var(--color-black);--color-green: #98c379;--color-yellow: #e5c07b;--font-title: "Archivo Black", sans-serif;--font-content: "Poppins", sans-serif;--radius: 10px;--transition: all .3s ease}*{margin:0;padding:0;color:var(--color-white)}* ul{list-style:none}* a{text-decoration:none;color:#fff}* button:hover{cursor:pointer}body{background-color:var(--color-background);font-family:var(--font-content);color:var(--color-white);min-height:100vh}body #app{width:100%;max-width:900px;margin:auto;padding:0 15px}@media (max-width: 768px){body #app{max-width:100%;padding:0 10px}}@media (max-width: 480px){body #app{padding:0 8px}}@media (max-width: 768px){.dnone{display:none!important}}header{margin:30px 7px 25px;display:flex;justify-content:space-between;align-items:center;padding:0 15px 15px;border-bottom:2px solid #333}@media (max-width: 768px){header{margin:20px 5px 10px;padding:0 10px 12px}}@media (max-width: 480px){header{margin:15px 0 10px;padding:0 8px 10px;flex-wrap:wrap;gap:10px}}header h1{display:flex;align-items:center;font-size:28px}@media (max-width: 768px){header h1{font-size:24px}}@media (max-width: 480px){header h1{font-size:20px}}header h1 i{margin-right:15px;font-size:30px}@media (max-width: 768px){header h1 i{margin-right:10px;font-size:26px}}@media (max-width: 480px){header h1 i{margin-right:8px;font-size:22px}}header a.btn{font-size:14px;color:var(--color-black);background-color:var(--color-white);border-radius:50px;padding:8px 18px;font-weight:700;margin-right:8px;display:flex;align-items:center;transition:var(--transition);white-space:nowrap}@media (max-width: 480px){header a.btn{font-size:12px;padding:6px 14px}}header a.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fff3}header a.btn i{margin-left:10px;color:#000;font-size:18px}@media (max-width: 480px){header a.btn i{font-size:16px;margin-left:6px}}section.profile{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(30,30,35,.8) 0%,rgba(15,15,15,.6) 100%);padding:20px;border-radius:15px;margin-bottom:20px;border:1px solid #333}@media (max-width: 768px){section.profile{flex-direction:column;gap:15px;padding:18px}}@media (max-width: 480px){section.profile{padding:15px;border-radius:12px}}section.profile .user{display:flex;align-items:center}@media (max-width: 480px){section.profile .user{width:100%}}section.profile .user img#profilePicture{width:70px;height:70px;object-fit:cover;border-radius:50%;margin:0 20px 0 0;border:3px solid var(--color-white);transition:var(--transition)}@media (max-width: 768px){section.profile .user img#profilePicture{width:60px;height:60px;margin:0 15px 0 0}}@media (max-width: 480px){section.profile .user img#profilePicture{width:55px;height:55px;margin:0 12px 0 0;border-width:2px}}section.profile .user img#profilePicture:hover{transform:scale(1.05);box-shadow:0 0 20px #ffffff4d}section.profile .user .infos{display:flex;flex-direction:column;justify-content:center;flex:1}section.profile .user .infos h3#displayName{border-bottom:3px solid white;margin-bottom:8px;padding-bottom:5px;font-size:20px}@media (max-width: 768px){section.profile .user .infos h3#displayName{font-size:18px;border-bottom-width:2px}}@media (max-width: 480px){section.profile .user .infos h3#displayName{font-size:16px;margin-bottom:6px}}section.profile .user .infos p#email{font-size:14px;color:#999;display:block;word-break:break-all}@media (max-width: 768px){section.profile .user .infos p#email{font-size:13px}}@media (max-width: 480px){section.profile .user .infos p#email{font-size:12px}}section.profile .links{display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){section.profile .links{width:100%;justify-content:center}}section.profile .links a.btn{font-size:14px;color:var(--color-black);background-color:var(--color-white);border-radius:50px;padding:8px 18px;font-weight:700;display:flex;align-items:center;transition:var(--transition);white-space:nowrap}@media (max-width: 480px){section.profile .links a.btn{font-size:12px;padding:7px 15px}}section.profile .links a.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fff3}section.profile .links a.btn i{margin-left:8px;color:#000;font-size:18px}@media (max-width: 480px){section.profile .links a.btn i{font-size:16px;margin-left:6px}}section.nav{margin-top:40px;margin-bottom:25px}@media (max-width: 768px){section.nav{margin-top:30px;margin-bottom:20px}}@media (max-width: 480px){section.nav{margin-top:25px;margin-bottom:18px}}section.nav p{color:var(--color-lightgrey);font-size:16px;margin-bottom:15px;font-weight:500}@media (max-width: 768px){section.nav p{font-size:15px;margin-bottom:12px}}@media (max-width: 480px){section.nav p{font-size:14px;margin-bottom:10px}}section.nav div{display:flex;align-items:center;flex-wrap:wrap;gap:10px}@media (max-width: 480px){section.nav div{gap:8px;justify-content:center}}section.nav div .btn{font-size:14px;color:var(--color-white);background-color:var(--color-grey);border:2px solid transparent;border-radius:50px;padding:10px 20px;font-weight:600;display:flex;align-items:center;transition:var(--transition);cursor:pointer}@media (max-width: 768px){section.nav div .btn{padding:9px 18px;font-size:13px}}@media (max-width: 480px){section.nav div .btn{padding:8px 16px;font-size:12px;flex:1;justify-content:center;min-width:120px}}section.nav div .btn:hover{border-color:var(--color-white);transform:translateY(-2px)}section.nav div .active{color:var(--color-black);background-color:var(--color-white);border-color:var(--color-white);box-shadow:0 4px 15px #ffffff4d}section.listing{border-top:3px solid #333;padding-top:20px;margin-top:20px}section.listing #longArtists,section.listing #mediumArtists,section.listing #shortArtists{margin:25px 0;display:flex;gap:10px;flex-wrap:wrap}@media (max-width: 768px){section.listing #longArtists,section.listing #mediumArtists,section.listing #shortArtists{margin:20px 0;gap:8px}}@media (max-width: 480px){section.listing #longArtists,section.listing #mediumArtists,section.listing #shortArtists{flex-direction:column}}section.listing #longArtists a,section.listing #mediumArtists a,section.listing #shortArtists a{flex:1;min-width:280px;display:flex;align-items:center;border:2px solid #333;border-radius:12px;padding:10px;background:linear-gradient(135deg,rgba(30,30,35,.6) 0%,rgba(15,15,15,.4) 100%);transition:var(--transition)}@media (max-width: 768px){section.listing #longArtists a,section.listing #mediumArtists a,section.listing #shortArtists a{min-width:240px;padding:12px}}@media (max-width: 480px){section.listing #longArtists a,section.listing #mediumArtists a,section.listing #shortArtists a{min-width:100%;padding:12px}}section.listing #longArtists a:hover,section.listing #mediumArtists a:hover,section.listing #shortArtists a:hover{background:linear-gradient(135deg,rgba(30,30,35,.9) 0%,rgba(15,15,15,.7) 100%);border-color:var(--color-white);transform:translateY(-3px);box-shadow:0 6px 20px #0006}section.listing #longArtists a img,section.listing #mediumArtists a img,section.listing #shortArtists a img{height:60px;width:60px;object-fit:cover;border-radius:8px;margin-right:15px}@media (max-width: 768px){section.listing #longArtists a img,section.listing #mediumArtists a img,section.listing #shortArtists a img{height:55px;width:55px;margin-right:12px}}@media (max-width: 480px){section.listing #longArtists a img,section.listing #mediumArtists a img,section.listing #shortArtists a img{height:50px;width:50px}}section.listing #longArtists a div,section.listing #mediumArtists a div,section.listing #shortArtists a div{display:flex;align-items:center;flex:1;overflow:hidden}section.listing #longArtists a div img,section.listing #mediumArtists a div img,section.listing #shortArtists a div img{height:20px;width:20px}@media (max-width: 480px){section.listing #longArtists a div img,section.listing #mediumArtists a div img,section.listing #shortArtists a div img{height:18px;width:18px}}section.listing #longArtists a div span.artist-number,section.listing #mediumArtists a div span.artist-number,section.listing #shortArtists a div span.artist-number{margin-right:10px;font-size:18px;font-weight:700;color:var(--color-white)}@media (max-width: 768px){section.listing #longArtists a div span.artist-number,section.listing #mediumArtists a div span.artist-number,section.listing #shortArtists a div span.artist-number{font-size:16px;margin-right:8px}}@media (max-width: 480px){section.listing #longArtists a div span.artist-number,section.listing #mediumArtists a div span.artist-number,section.listing #shortArtists a div span.artist-number{font-size:15px}}section.listing #longSongs div.element,section.listing #mediumSongs div.element,section.listing #shortSongs div.element{align-items:center;display:grid;border-bottom:1px solid #333;padding:8px;grid-template-columns:40px 60px 250px 200px auto 40px;transition:var(--transition);gap:8px}@media (max-width: 768px){section.listing #longSongs div.element,section.listing #mediumSongs div.element,section.listing #shortSongs div.element{grid-template-columns:35px 55px 1fr 35px;padding:10px 6px;gap:6px}}@media (max-width: 480px){section.listing #longSongs div.element,section.listing #mediumSongs div.element,section.listing #shortSongs div.element{grid-template-columns:30px 45px 1fr 32px;padding:10px 4px;gap:4px}}section.listing #longSongs div.element .track-number,section.listing #mediumSongs div.element .track-number,section.listing #shortSongs div.element .track-number{margin-left:8px;font-weight:600;color:var(--color-lightgrey)}@media (max-width: 768px){section.listing #longSongs div.element .track-number,section.listing #mediumSongs div.element .track-number,section.listing #shortSongs div.element .track-number{margin-left:4px;font-size:14px}}@media (max-width: 480px){section.listing #longSongs div.element .track-number,section.listing #mediumSongs div.element .track-number,section.listing #shortSongs div.element .track-number{margin-left:2px;font-size:13px}}section.listing #longSongs div.element img,section.listing #mediumSongs div.element img,section.listing #shortSongs div.element img{height:50px;width:50px;object-fit:cover;border-radius:6px}@media (max-width: 768px){section.listing #longSongs div.element img,section.listing #mediumSongs div.element img,section.listing #shortSongs div.element img{height:48px;width:48px}}@media (max-width: 480px){section.listing #longSongs div.element img,section.listing #mediumSongs div.element img,section.listing #shortSongs div.element img{height:42px;width:42px}}section.listing #longSongs div.element a.son-name,section.listing #mediumSongs div.element a.son-name,section.listing #shortSongs div.element a.son-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){section.listing #longSongs div.element a.son-name,section.listing #mediumSongs div.element a.son-name,section.listing #shortSongs div.element a.son-name{font-size:14px}}@media (max-width: 480px){section.listing #longSongs div.element a.son-name,section.listing #mediumSongs div.element a.son-name,section.listing #shortSongs div.element a.son-name{font-size:13px}}section.listing #longSongs div.element a.artist-name,section.listing #mediumSongs div.element a.artist-name,section.listing #shortSongs div.element a.artist-name{margin-left:10px;transition:var(--transition);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){section.listing #longSongs div.element a.artist-name,section.listing #mediumSongs div.element a.artist-name,section.listing #shortSongs div.element a.artist-name{display:none}}section.listing #longSongs div.element a.artist-name:hover,section.listing #mediumSongs div.element a.artist-name:hover,section.listing #shortSongs div.element a.artist-name:hover{color:var(--color-white);text-decoration:underline}section.listing #longSongs div.element img.spotify-logo,section.listing #mediumSongs div.element img.spotify-logo,section.listing #shortSongs div.element img.spotify-logo{height:28px;width:28px;transition:var(--transition);justify-self:center}@media (max-width: 768px){section.listing #longSongs div.element img.spotify-logo,section.listing #mediumSongs div.element img.spotify-logo,section.listing #shortSongs div.element img.spotify-logo{height:26px;width:26px}}@media (max-width: 480px){section.listing #longSongs div.element img.spotify-logo,section.listing #mediumSongs div.element img.spotify-logo,section.listing #shortSongs div.element img.spotify-logo{height:24px;width:24px}}section.listing #longSongs div.element img.spotify-logo:hover,section.listing #mediumSongs div.element img.spotify-logo:hover,section.listing #shortSongs div.element img.spotify-logo:hover{transform:scale(1.15)}section.listing #longSongs div.element:hover,section.listing #mediumSongs div.element:hover,section.listing #shortSongs div.element:hover{background-color:#1e1e2380;border-bottom-color:var(--color-white);transform:translate(5px)}@media (max-width: 480px){section.listing #longSongs div.element:hover,section.listing #mediumSongs div.element:hover,section.listing #shortSongs div.element:hover{transform:translate(2px)}}section.home{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 10px}@media (max-width: 768px){section.home{min-height:60vh;padding:15px 8px}}@media (max-width: 480px){section.home{min-height:50vh;padding:10px 5px}}section.home h1{margin-top:30px;text-align:center;font-size:42px;line-height:1.3}@media (max-width: 768px){section.home h1{font-size:36px;margin-top:20px}}@media (max-width: 480px){section.home h1{font-size:28px;margin-top:15px}}section.home h1 span{border-bottom:4px solid white;padding-bottom:5px;background:linear-gradient(90deg,#fff 0%,#ddd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 480px){section.home h1 span{border-bottom-width:3px}}section.home h3{font-weight:300;text-align:center;width:80%;max-width:600px;font-size:18px;line-height:1.6;margin:30px auto;color:var(--color-lightgrey)}@media (max-width: 768px){section.home h3{width:90%;font-size:17px;margin:25px auto}}@media (max-width: 480px){section.home h3{width:95%;font-size:15px;margin:20px auto;line-height:1.5}}section.home .login-button{margin:40px 0;text-align:center}@media (max-width: 768px){section.home .login-button{margin:30px 0}}@media (max-width: 480px){section.home .login-button{margin:25px 0;width:100%}}section.home .login-button a.btn-home{display:inline-flex;align-items:center;font-size:22px;color:var(--color-black);background-color:var(--color-white);border:none;border-radius:50px;padding:14px 32px;font-weight:700;transition:var(--transition);box-shadow:0 4px 15px #fff3}@media (max-width: 768px){section.home .login-button a.btn-home{font-size:20px;padding:12px 28px}}@media (max-width: 480px){section.home .login-button a.btn-home{font-size:18px;padding:12px 24px;width:90%;max-width:280px;justify-content:center}}section.home .login-button a.btn-home:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #ffffff4d}section.home .login-button a.btn-home i{font-size:28px;color:var(--color-black);margin-right:12px}@media (max-width: 768px){section.home .login-button a.btn-home i{font-size:24px;margin-right:10px}}@media (max-width: 480px){section.home .login-button a.btn-home i{font-size:22px;margin-right:8px}}small{display:block;text-align:center;color:#888;margin-top:40px;padding:20px 10px;font-size:13px;line-height:1.6}small a{color:var(--color-lightgrey);transition:var(--transition)}small a:hover{color:var(--color-white);text-decoration:underline}@media (max-width: 768px){small{width:95%;margin:35px auto 15px;font-size:12px;padding:15px 8px}}@media (max-width: 480px){small{width:100%;margin:30px auto 10px;font-size:11px;padding:12px 5px;line-height:1.5}}header[data-v-a64cdae0]{line-height:1.5;max-height:100vh}.logo[data-v-a64cdae0]{display:block;margin:0 auto 2rem}nav[data-v-a64cdae0]{width:100%;font-size:12px;text-align:center;margin-top:2rem}nav a.router-link-exact-active[data-v-a64cdae0]{color:var(--color-text)}nav a.router-link-exact-active[data-v-a64cdae0]:hover{background-color:transparent}nav a[data-v-a64cdae0]{display:inline-block;padding:0 1rem;border-left:1px solid var(--color-border)}nav a[data-v-a64cdae0]:first-of-type{border:0}@media (min-width: 1024px){header[data-v-a64cdae0]{display:flex;place-items:center;padding-right:calc(var(--section-gap) / 2)}.logo[data-v-a64cdae0]{margin:0 2rem 0 0}header .wrapper[data-v-a64cdae0]{display:flex;place-items:flex-start;flex-wrap:wrap}nav[data-v-a64cdae0]{text-align:left;margin-left:-1rem;font-size:1rem;padding:1rem 0;margin-top:1rem}}@keyframes fadeIn-375bee21{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInTop-375bee21{0%{opacity:0;transform:translateY(-50px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes float-375bee21{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse-375bee21{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.5}}.fade-in[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out}.fade-in-delay-1[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out .2s both}.fade-in-delay-2[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out .4s both}.fade-in-delay-3[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out .6s both}.fade-in-delay-4[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out .8s both}.fade-in-delay-5[data-v-375bee21]{animation:fadeIn-375bee21 .8s ease-out 1s both}.slide-in-top[data-v-375bee21]{animation:slideInTop-375bee21 1s ease-out}.hero-icon[data-v-375bee21]{text-align:center;margin-bottom:30px}.hero-icon i[data-v-375bee21]{font-size:80px;color:#1db954;filter:drop-shadow(0 4px 20px rgba(29,185,84,.4));animation:float-375bee21 3s ease-in-out infinite}@media (max-width: 768px){.hero-icon[data-v-375bee21]{margin-bottom:25px}.hero-icon i[data-v-375bee21]{font-size:70px}}@media (max-width: 480px){.hero-icon[data-v-375bee21]{margin-bottom:20px}.hero-icon i[data-v-375bee21]{font-size:55px}}.highlight-text[data-v-375bee21]{position:relative;display:inline-block;color:#1db954;border-bottom:4px solid #1DB954;padding-bottom:5px;text-shadow:0 0 30px rgba(29,185,84,.5)}@media (max-width: 480px){.highlight-text[data-v-375bee21]{border-bottom-width:3px;padding-bottom:3px}}.features[data-v-375bee21]{display:flex;justify-content:center;gap:20px;margin:40px 0;flex-wrap:wrap}@media (max-width: 768px){.features[data-v-375bee21]{gap:18px;margin:35px 0}}@media (max-width: 480px){.features[data-v-375bee21]{gap:12px;margin:30px 0;width:100%;padding:0 5px}}.feature-card[data-v-375bee21]{background:linear-gradient(135deg,rgba(30,30,35,.8) 0%,rgba(15,15,15,.6) 100%);border:2px solid #333;border-radius:15px;padding:25px 20px;min-width:160px;text-align:center;transition:all .3s ease}@media (max-width: 768px){.feature-card[data-v-375bee21]{min-width:150px;padding:22px 18px;border-radius:12px}}@media (max-width: 480px){.feature-card[data-v-375bee21]{min-width:130px;padding:18px 15px;flex:1;max-width:160px}}.feature-card[data-v-375bee21]:hover{transform:translateY(-5px);border-color:#1db954;box-shadow:0 8px 30px #1db9544d}.feature-card i[data-v-375bee21]{font-size:36px;color:#1db954;margin-bottom:10px;display:block}@media (max-width: 768px){.feature-card i[data-v-375bee21]{font-size:32px}}@media (max-width: 480px){.feature-card i[data-v-375bee21]{font-size:28px;margin-bottom:8px}}.feature-card p[data-v-375bee21]{font-size:14px;font-weight:500;margin:0;color:var(--color-lightgrey)}@media (max-width: 768px){.feature-card p[data-v-375bee21]{font-size:13px}}@media (max-width: 480px){.feature-card p[data-v-375bee21]{font-size:12px}}.btn-home[data-v-375bee21]{position:relative;overflow:hidden}.btn-home[data-v-375bee21]:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(29,185,84,.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-home[data-v-375bee21]:hover:before{width:300px;height:300px}.btn-home span[data-v-375bee21],.btn-home i[data-v-375bee21]{position:relative;z-index:1;color:var(--color-black)}section.home[data-v-375bee21]{position:relative;overflow:visible}section.home[data-v-375bee21]:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle at 80% 20%,rgba(29,185,84,.08) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(29,185,84,.06) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(29,185,84,.04) 0%,transparent 50%);pointer-events:none;z-index:0}