.navbar{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:space-between;left:0;padding:15px 30px;position:fixed;top:0;width:100%;z-index:1000}.nav-buttons{display:flex;gap:var(--spacing-md)}.logo{color:var(--color-accent-green);cursor:pointer;font-size:1.2rem;font-weight:700}.pfp{border-radius:50%;height:35px;transition:transform .2s ease;width:35px}.pfp:hover{cursor:pointer;transform:scale(1.1)}.search-bar{background:var(--color-bg-card);border:none;border-radius:500px;color:var(--color-text-dark);flex:1 1;height:35px;max-width:400px;padding:0 20px;transition:background-color .3s ease}.search-bar:focus{background-color:var(--color-bg-card-hover);outline:none}.search-bar::placeholder{color:var(--color-text-primary);font-weight:100;letter-spacing:.5px}.nav-btn{background:var(--color-accent-green-dark);border-radius:var(--border-radius-sm);color:var(--color-text-primary);line-height:24px;padding:8px 20px;text-decoration:none;transition:background .3s ease,transform .2s ease}.nav-btn:hover{transform:scale(1.05)}.drop{background:var(--color-bg-card);border-radius:4px;left:-116px;padding:16px 24px;position:absolute;top:48px;width:148px}.drop a,.drop h4{padding:8px 4px}.drop h4{cursor:default;margin-bottom:4px}.drop a:hover{cursor:pointer;scale:1.01}.dropItem{display:flex}.drop a:not(:last-child){border-bottom:solid;border-color:#fff;border-width:1px}.page-heading{color:var(--color-text-primary);margin-top:var(--spacing-lg);text-align:center}.page-heading h1{color:var(--color-accent-green);font-size:3rem;margin-bottom:var(--spacing-sm)}.page-heading p{color:var(--color-text-secondary);font-size:2rem}.main-page-subtext{color:#9d9d9d;margin-top:128px;text-align:center}.profile-grid{grid-gap:var(--spacing-base);display:grid;gap:var(--spacing-base);grid-template-columns:repeat(5,1fr)}.profile-card{background:var(--color-bg-card);border-radius:var(--border-radius);color:var(--color-text-primary);cursor:pointer;font-size:1rem;height:150px;padding:var(--spacing-md);transition:background .2s ease,transform .2s ease;width:250px}.profile-card:hover{background:var(--color-bg-card-hover)}body{font-family:var(--font-sans);overflow:hidden}.container,body{height:100vh;width:100%}.container{display:block;left:0;position:absolute;transform:translateY(-70px)}.left-section{width:50%}.left-section,.right-section{height:100%;position:absolute}.right-section{align-items:center;display:block;display:flex;justify-content:center;left:0;width:100%}.login-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--color-bg-dark);border-radius:var(--border-radius);padding:64px;text-align:center;width:380px}.login-card h1{color:var(--color-white);font-size:28px;font-weight:600;letter-spacing:-.5px;margin-bottom:36px}.create-account-btn{background:var(--color-btn-main);border:none;border-radius:var(--border-radius);color:#000;cursor:pointer;font-size:16px;font-weight:600;margin-bottom:var(--spacing-small);padding:16px 32px;transition:all .3s ease;width:100%}.create-account-btn:hover{background:var(--color-btn-primary-hover);transform:translateY(-2px)}.divider{align-items:center;display:flex;margin:16px 0}.divider:after,.divider:before{background:var(--color-border-light);content:"";flex:1 1;height:1px}.divider span{color:var(--color-white);font-size:14px;font-weight:500;padding:0 16px}.social-login{display:flex;gap:var(--spacing-md);justify-content:center}.social-btn{border:none;border-radius:50%;cursor:pointer;height:48px;line-height:8px;margin:var(--spacing-mid);overflow:hidden;position:relative;transition:all .3s ease;width:48px}.social-btn:hover{transform:translateY(-2px)}.spotify-btn{background-color:#0000;padding:-4px}.social-icon{object-fit:contain}.spotify-icon{height:48px;width:48px}.google-icon{height:32px;width:32px}@media (max-width:768px){.container{flex-direction:column}.left-section{display:none;flex:0 1}.right-section{flex:1 1}.login-card{padding:32px 28px;width:320px}}@media (max-width:480px){.login-card{margin:0 5%;width:90%}.login-card h1{font-size:24px}.left-section{display:none}}.friend-requests-container{position:fixed;right:20px;top:70px;z-index:999}.friend-requests-btn{background:var(--color-accent-green-dark);border:none;border-radius:var(--border-radius);color:var(--color-text-light);cursor:pointer;font-weight:700;padding:8px 14px}.friend-requests-btn:hover{background:var(--color-accent-green);color:var(--color-bg-dark)}.friend-requests-content{background:var(--color-bg-dark);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);color:var(--color-text-primary);margin-top:var(--spacing-sm);max-height:300px;overflow-y:auto;padding:var(--spacing-sm);width:280px}.friend-requests-content.hidden{display:none}.requests-section{margin-bottom:var(--spacing-sm)}.requests-section h3{color:var(--color-text-secondary);font-size:14px;margin-bottom:6px}.request-card{background:var(--color-bg-card);border-radius:var(--border-radius-sm);justify-content:space-between;margin-bottom:var(--spacing-xs);padding:var(--spacing-sm)}.request-card,.request-info{align-items:center;display:flex}.request-pic{border-radius:50%;margin-right:var(--spacing-xs)}.request-buttons button{border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:12px;padding:4px 8px}.accept-btn{background:var(--color-accent-green)}.accept-btn,.deny-btn{color:var(--color-bg-dark)}.deny-btn{background:var(--color-border)}.unsend-btn{background:var(--color-text-light);color:var(--color-bg-dark)}.friend-search{display:flex;gap:var(--spacing-sm);justify-content:center;margin:var(--spacing-lg) auto}.friend-search .search-bar{flex:1 1;max-width:400px}.following-page{background:var(--color-bg-dark);color:var(--color-text-primary);min-height:100vh;padding:var(--spacing-lg)}.following-card{background:var(--color-bg-card);border-radius:var(--border-radius);margin-bottom:var(--spacing-base);padding:var(--spacing-md);transition:background .3s ease}.following-card:hover{background:var(--color-bg-card-hover)}.following-card h2{color:var(--color-accent-green)}.settings-page{background:var(--color-bg-dark);color:var(--color-text-primary);min-height:100vh;padding:var(--spacing-lg)}.settings-section{background:var(--color-bg-card);border-radius:var(--border-radius);margin-bottom:var(--spacing-md);padding:var(--spacing-md)}.settings-section h2{color:var(--color-accent-green);margin-bottom:var(--spacing-sm)}.settings-section p{color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.settings-section button{background:var(--color-btn-secondary);border:none;border-radius:var(--border-radius-sm);color:var(--color-text-dark);cursor:pointer;padding:8px 16px;transition:background .3s ease}.settings-section button:hover{background:var(--color-btn-secondary-hover)}.profileContainer{background:var( --color-bg-secondary );border-radius:var( --border-radius );margin-top:80px;padding:32px;width:100%}.profileInfo{display:flex;flex-direction:row}.profileTitle{font-size:24px;font-weight:700;margin-bottom:20px}.profileAvatar{align-items:center;background:var( --color-bg-dark );border-radius:var( --border-radius );display:flex;flex-direction:column;font-size:18px;height:300px;justify-content:center;margin-right:32px;padding:16px;width:300px}.profileAvatar img{border-radius:50%;height:150px;margin-bottom:var( --spacing-base );width:150px}.profileStats{background:var( --color-bg-dark);border-radius:var( --border-radius );display:inline-block;height:300px;padding:var( --spacing-base );width:500px}.profileCurrentlyListeningTitle{font-size:18px;font-weight:700}.profileGetCurrentListening{margin-top:16px}:root{--color-bg-main:#333b33;--color-bg-secondary:#47534b;--color-bg-dark:#272d27;--color-bg-darker:#000;--color-bg-card:#3a4a3e;--color-bg-card-hover:#405a47;--color-bg-profile-hover:#3f3f3f;--color-text-primary:#e1ece3;--color-text-secondary:#a8b2a8;--color-text-accent:#62d089;--color-text-dark:#232723;--color-btn-main:#1db954;--color-btn-primary-hover:#20c55a;--color-btn-secondary:#a8b2a8;--color-btn-secondary-hover:#e1ece3;--color-btn-login:#6a796f;--color-btn-login-hover:#1ed760;--color-btn-login-secondary:#333;--color-btn-login-secondary-hover:#444;--color-border:#a8b2a8;--color-white:#fff;--spacing-base:16px;--spacing-mid:12px;--spacing-small:8px;--border-radius-small:2px;--border-radius:6px;--border-radius-large:8px;--border-radius-round:500px;--font-family:Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{align-items:center;background:var(--color-bg-main);color:var(--color-text-primary);display:flex;flex-direction:column;font-family:var(--font-family);margin-top:70px}h1{font-size:3rem;margin:.25rem 0}a{color:inherit;text-decoration:none}.trackContainer{background:var(--color-bg-secondary);border-radius:var(--border-radius);display:flex;flex-direction:column;padding:16px}.trackCover{align-items:center;display:flex;flex-direction:row}.trackImage{border-radius:var(--border-radius);height:64px;margin-right:16px;width:64px}.trackName{color:var(--color-text-primary);font-size:1.25rem;font-weight:700}.trackArtists{color:var(--color-text-secondary);font-size:1.1rem}.trackProgress{background:#fff;border-radius:var(--border-radius);height:4px;position:relative;transition:width,5s linear;width:100%}.trackProgress:after{background:#fff;border-radius:100%;content:"";display:block;height:12px;position:absolute;right:-4px;top:-4px;width:12px}.trackProgressBackground{background:#a8a8a8;border-radius:var(--border-radius);height:4px;margin-top:16px;position:relative;width:100%}@media (max-width:480px){#root{height:auto;min-height:100vh;overflow-y:visible}.nav-btn:not(:last-of-type),.search-bar{display:none}.profileContainer{display:flex;margin-top:var( --spacing-base );padding:var( --spacing-base );width:90vw}.profileContainer,.profileInfo{align-items:center;flex-direction:column}.profileInfo{width:100%}.profileAvatar{background:none;height:auto;margin-bottom:var( --spacing-base );margin-right:0;padding:16px;width:100%}.profileAvatar img{height:75px;width:75px}.profileStats{background:none;height:auto;margin:0;padding:0;width:100%}.trackContainer{background:var( --color-bg-dark );width:100%}.profileGetCurrentListening{width:100%}.profileCurrentlyListeningTitle{display:none}.trackName{font-size:.9rem}.trackArtists{font-size:.85rem}}
/*# sourceMappingURL=main.ed422e6e.css.map*/