@import url(https://fonts.googleapis.com/css2?family=Circular+Std:wght@400;700&family=Inter:wght@300;400;500;600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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}.App{background-color:#000;color:#dcd9cd}.logo{height:150px;margin:150px auto 15px;width:150px}.banner{flex-direction:row}.myInfo{background-color:#1ed760;border:0;border-radius:30px;font-size:15px;height:50px;left:0;margin-left:30px;margin-top:30px;position:absolute;width:80px}.myInfo,a{color:#000}.login-logout{background-color:#1ed760;border:0;border-radius:30px;color:#000;font-size:15px;height:50px;margin-right:30px;margin-top:30px;position:absolute;right:0;width:80px}.spotify_guess{color:#1ed760;font-size:35px;font-weight:550;line-height:53px;margin:-25px 0 100px}.about{background-color:#1ed760;border:0;border-radius:30px;color:#000;display:block;font-size:20px;height:50px;margin-bottom:500px;margin-left:auto;margin-right:auto;width:180px}.about_div{padding-bottom:1px}.banner{backdrop-filter:none;-webkit-backdrop-filter:none}.myInfo-home{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:13px;font-weight:500;justify-content:center;margin-top:8px;padding:20px;transition:all .25s ease}.myInfo-home:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.login-logout-home{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:13px;font-weight:500;justify-content:center;margin-top:8px;padding:20px;transition:all .25s ease}.login-logout-home:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.hero{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:100px 20px 60px;position:relative;z-index:10}.logo-wrapper{margin-bottom:36px;position:relative}.logo{height:110px;width:110px}.title-wrapper{align-items:center;display:flex;gap:0;justify-content:center;margin-bottom:12px}.title-letter{color:#fff;display:inline-block;font-family:Inter,sans-serif;font-size:56px;font-weight:700;letter-spacing:-1px;line-height:1}.title-space{display:inline-block;width:16px}.subtitle{color:hsla(0,0%,100%,.4);font-size:15px;font-weight:300;letter-spacing:.5px;margin-bottom:56px;text-align:center}.cta-buttons{align-items:center;display:flex;flex-direction:column;gap:14px;max-width:280px;width:100%}.play{background:#1ed760;border:none;border-radius:100px;color:#000;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;font-weight:600;letter-spacing:.3px;overflow:hidden;padding:16px 0;position:relative;transition:all .25s ease;width:100%}.play .play-btn-inner{align-items:center;display:flex;gap:8px;justify-content:center;position:relative;z-index:2}.play .play-icon{font-size:11px}.play .play-btn-glow{display:none}.play:hover{background:#2de26d;box-shadow:0 8px 32px rgba(30,215,96,.4);-webkit-transform:scale(1.03);transform:scale(1.03)}.play:active{-webkit-transform:scale(.98);transform:scale(.98)}.about{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:hsla(0,0%,100%,.4);cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:14px;font-weight:500;justify-content:center;letter-spacing:.3px;padding:15px 0;text-align:center;transition:all .25s ease;width:100%}.about:hover{background:hsla(0,0%,100%,.07);border-color:hsla(0,0%,100%,.2);color:#fff}.glass-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:16px;padding:24px}@media(max-width:768px){.banner{padding:14px 20px}.title-letter{font-size:40px}.logo{height:90px;width:90px}.subtitle{font-size:14px}}.AboutApp{background:#0a0a0a;color:#fff;font-family:Inter,sans-serif;min-height:100vh;overflow-x:hidden;overflow-y:auto;position:static}.AboutApp:before{background:radial-gradient(circle,rgba(30,215,96,.07) 0,transparent 70%);height:600px;left:-10%;top:-20%;width:600px}.AboutApp:after,.AboutApp:before{content:"";pointer-events:none;position:fixed;z-index:0}.AboutApp:after{background:radial-gradient(circle,rgba(30,215,96,.04) 0,transparent 70%);bottom:-20%;height:500px;right:-10%;width:500px}.about-banner{align-items:center;background:transparent;display:flex;left:0;padding:16px 32px;position:fixed;right:0;top:0;z-index:100}.about-home-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:13px;font-weight:500;margin-top:8px;padding:20px 22px;transition:all .25s ease}.about-home-btn:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.about-logo{border-radius:50%;display:block;-webkit-filter:drop-shadow(0 8px 32px rgba(30,215,96,.3));filter:drop-shadow(0 8px 32px rgba(30,215,96,.3));height:90px;margin:110px auto 20px;width:90px}.about-logo,.about-title{position:relative;z-index:10}.about-title{color:#fff;font-family:Inter,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:48px;text-align:center}.about-list{align-items:center;display:flex;flex-direction:column;gap:32px;margin:0 auto;max-width:640px;padding:0 24px 80px;position:relative;z-index:10}.about-list h1{color:hsla(0,0%,100%,.4);font-size:13px;font-weight:500;letter-spacing:3px;text-transform:uppercase}.about-list h1,.about-list h3{font-family:Inter,sans-serif;text-align:center}.about-list h3{color:hsla(0,0%,100%,.75);font-size:16px;font-weight:400;line-height:1.7;margin:0}.about-list .txt7{background:rgba(30,215,96,.06);border:1px solid rgba(30,215,96,.25);border-radius:12px;color:rgba(30,215,96,.8);font-size:13px;line-height:1.6;padding:20px 24px;width:100%}.about-list .img1,.about-list .img2,.about-list .img3,.about-list .img4,.about-list .img5{border-radius:16px;display:block;height:auto;margin-bottom:70px;width:100%}@media(max-width:768px){.about-banner{padding:14px 20px}.about-title{font-size:34px}.about-logo{height:75px;width:75px}.about-list{gap:24px;padding:0 16px 60px}.about-list h3{font-size:15px}}.App:before{background:radial-gradient(circle,rgba(30,215,96,.07) 0,transparent 70%)}.App:after{background:radial-gradient(circle,rgba(30,215,96,.04) 0,transparent 70%)}.nav-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:13px;font-weight:500;justify-content:center;margin-top:8px;padding:20px 22px;transition:all .25s ease}.nav-btn:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.myinfo-hero{align-items:center;display:flex;flex-direction:column;padding-bottom:24px;padding-top:100px;position:relative;z-index:10}.profile-pic{border:2px solid rgba(30,215,96,.25);border-radius:50%;box-shadow:0 0 32px rgba(30,215,96,.15);height:100px;margin-bottom:31px;object-fit:cover;width:100px}.display-name{color:#fff;font-size:28px;font-weight:700;letter-spacing:-.5px;margin-bottom:32px}.tab-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;display:flex;gap:8px;margin-bottom:16px;padding:4px}.tab-btn{background:transparent;border:none;border-radius:100px;color:hsla(0,0%,100%,.4);cursor:pointer;font-family:Inter,sans-serif;font-size:13px;font-weight:500;padding:8px 20px;transition:all .2s ease}.tab-btn:hover{color:#fff}.tab-active{background:#1ed760;color:#000!important;font-weight:600}.timeframe-bar{display:flex;gap:8px;margin-top:4px}.time-btn{background:transparent;border:1px solid transparent;border-radius:100px;color:hsla(0,0%,100%,.4);cursor:pointer;font-family:Inter,sans-serif;font-size:12px;font-weight:400;padding:6px 16px;transition:all .2s ease}.time-btn:hover{border-color:hsla(0,0%,100%,.08);color:#fff}.time-active{background:rgba(30,215,96,.08);border-color:rgba(30,215,96,.25)!important;color:#1ed760!important}.list-container{height:calc(100vh - 380px);margin:0 auto;overflow-x:hidden;overflow-y:auto;padding:8px 0 0;position:relative;scrollbar-width:none;width:340px;z-index:10}.list-container::-webkit-scrollbar{display:none}.list{display:flex;flex-direction:column;gap:4px;padding-bottom:30px}.list-row{align-items:center;border-radius:12px;cursor:default;display:flex;gap:16px;padding:10px 0;width:100%}.list-row img{border-radius:6px;flex-shrink:0;height:52px;object-fit:cover;width:52px}.list-row .rank{color:hsla(0,0%,100%,.4);flex-shrink:0;font-size:13px;font-weight:500;text-align:right;width:24px}.list-row .name{color:#fff;flex:1 1;font-size:15px;font-weight:500;overflow:hidden;white-space:normal;word-break:break-word}.list-row .track-info{display:flex;flex:1 1;flex-direction:column;gap:3px;overflow:hidden}.list-row .artist-sub{color:hsla(0,0%,100%,.4);font-size:13px;overflow:hidden;white-space:normal;word-break:break-word}.profile-section{flex-direction:column;gap:16px;padding-top:16px}.profile-section,.profile-stat{align-items:center;display:flex}.profile-stat{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:12px;justify-content:space-between;max-width:360px;padding:16px 20px;width:100%}.profile-stat .stat-label{color:hsla(0,0%,100%,.4);font-size:13px;font-weight:400}.profile-stat .stat-value{color:#fff;font-size:14px;font-weight:600}.spotify-btn{background:#1ed760;border:none;border-radius:100px;color:#000;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:600;margin-top:8px;padding:14px 40px;transition:all .25s ease}.spotify-btn:hover{box-shadow:0 8px 32px rgba(30,215,96,.4);-webkit-transform:scale(1.03);transform:scale(1.03)}@media(max-width:768px){.banner{padding:14px 20px}.display-name{font-size:22px}.tab-btn{font-size:12px;padding:8px 14px}.time-btn{font-size:11px;padding:6px 12px}}*{box-sizing:border-box;margin:0;padding:0}.App{background:#0a0a0a;color:#fff;font-family:Inter,sans-serif;height:100vh;min-height:100vh;overflow:hidden;position:relative}.App:before{background:radial-gradient(circle,rgba(30,215,96,.08) 0,transparent 70%);height:600px;left:-10%;top:-20%;width:600px}.App:after,.App:before{content:"";pointer-events:none;position:fixed;z-index:0}.App:after{background:radial-gradient(circle,rgba(30,215,96,.05) 0,transparent 70%);bottom:-20%;height:500px;right:-10%;width:500px}.banner{align-items:center;background:transparent;border-bottom:none;display:flex;justify-content:space-between;left:0;padding:16px 32px;position:fixed;right:0;top:0;z-index:100}.banner div{display:contents}a{color:inherit;text-decoration:none}.login-logout-play{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:13px;font-weight:500;justify-content:center;margin-top:8px;padding:20px;transition:all .25s ease}.login-logout-play:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.home-play{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;display:flex;font-family:Inter,sans-serif;font-size:13px;font-weight:500;justify-content:center;margin-top:8px;padding:20px 22px;transition:all .25s ease}.home-play:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.25);box-shadow:0 0 20px rgba(30,215,96,.15);color:#1ed760}.logo{-webkit-animation:logoFloat 4s ease-in-out infinite;animation:logoFloat 4s ease-in-out infinite;border-radius:50%;display:block;-webkit-filter:drop-shadow(0 8px 32px rgba(30,215,96,.3));filter:drop-shadow(0 8px 32px rgba(30,215,96,.3));height:80px;margin:100px auto 0;position:relative;width:80px;z-index:10}@-webkit-keyframes logoFloat{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}}@keyframes logoFloat{0%,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}}.spotify_guess{color:#fff;font-family:Inter,sans-serif;font-size:32px;font-weight:700;letter-spacing:-.5px;margin-bottom:16px;margin-top:12px;position:relative;text-align:center;z-index:10}.playlist-scroll-container{height:calc(100vh - 280px);overflow-x:hidden;overflow-y:auto;padding-bottom:30px;position:relative;scrollbar-width:none;z-index:10}.playlist-scroll-container::-webkit-scrollbar{display:none}h5{color:hsla(0,0%,100%,.4);font-family:Inter,sans-serif;font-size:14px;font-weight:500;letter-spacing:.5px;margin-bottom:16px;text-align:center;text-decoration:none;text-transform:uppercase}.playlists{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:12px;cursor:pointer;display:flex;flex-direction:row;gap:16px;margin:8px auto;padding:12px 16px;transition:all .25s ease;width:360px}.playlists img{border-radius:8px;flex-shrink:0;height:52px;object-fit:cover;width:52px}.playlists h3{background:transparent;color:#fff;font-family:Inter,sans-serif;font-size:15px;font-weight:500;margin:0;text-align:left}.playlists:hover{background:rgba(30,215,96,.08);border-color:rgba(30,215,96,.25);box-shadow:0 8px 24px rgba(30,215,96,.1);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.question{align-items:center;display:flex;flex-direction:column;margin-top:8px;position:relative;z-index:10}.question p{color:#fff;font-family:Inter,sans-serif;font-size:20px;font-weight:500;line-height:1.5;margin-bottom:28px;text-align:center;width:300px}.buttons_column{align-items:center;display:flex;flex-direction:column;gap:10px}.button1,.button2,.button3{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;font-weight:500;height:52px;transition:all .2s ease;width:280px}.button1:hover,.button2:hover,.button3:hover{background:hsla(0,0%,100%,.09);border-color:hsla(0,0%,100%,.2);box-shadow:0 0 20px hsla(0,0%,100%,.05)}.button1green,.button2green,.button3green{background:rgba(30,215,96,.15);border:1px solid #1ed760;border-radius:100px;box-shadow:0 0 24px rgba(30,215,96,.15);color:#1ed760;font-weight:600}.button1green,.button2green,.button3green,.buttonRed{cursor:pointer;font-family:Inter,sans-serif;font-size:15px;height:52px;transition:all .2s ease;width:280px}.buttonRed{background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.4);border-radius:100px;color:#ff6b6b;font-weight:500}h6{color:hsla(0,0%,100%,.4);font-family:Inter,sans-serif;font-size:14px;font-weight:400;letter-spacing:1px;margin-top:24px;text-align:center}.returnToPlaylists{align-items:center;display:flex;flex-direction:column;margin-top:16px}.returnToPlaylists button{background:transparent;border:1px solid hsla(0,0%,100%,.08);border-radius:100px;color:hsla(0,0%,100%,.4);cursor:pointer;font-family:Inter,sans-serif;font-size:13px;font-weight:500;padding:12px 32px;transition:all .25s ease}.returnToPlaylists button:hover{background:hsla(0,0%,100%,.04);border-color:hsla(0,0%,100%,.2);color:#fff}@media(max-width:768px){.banner{padding:14px 20px}.playlists{width:90%}.button1,.button1green,.button2,.button2green,.button3,.button3green,.buttonRed{width:260px}.question p{font-size:18px;width:280px}}
/*# sourceMappingURL=main.8d13f037.css.map*/