@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap";.wrapper{position:relative;display:flex;justify-content:center;align-items:center;height:100vh;transition:height .2s ease;background-image:url(/assets/yannis-papanastasopoulos-yWF2LLan-_o-unsplash.jpg);background-size:cover;background-position:center}.form-box{background-color:transparent;backdrop-filter:blur(30px);-webkit-backdrop-filter:bllur(30px);padding:30px;border:2px solid #99999937;border-radius:20px;box-shadow:0 0 10px #0000001a;width:100%;max-width:400px;position:absolute;transition:transform .3s ease-in-out}.form-box.login,.form-box.user-id-avatar,.form-box.bio-genres{transform:translate(0)}.input-box textarea{width:100%;border-radius:20px;padding:10px 15px;font-size:16px}.custom-file-label{display:inline-block;cursor:pointer;background-color:#fff;padding:10px;border-radius:20px;text-align:center;width:100%}.custom-file-label:hover{background-color:#ffffffe4}form h1{margin-bottom:20px;font-size:30px;font-weight:700;color:#fff;text-align:center}.input-box{position:relative;margin-bottom:20px}.input-box input{width:100%;padding:10px 10px 10px 15px;background-color:transparent;border:1px solid #ffffff42;border-radius:20px;outline:none;font-size:16px;color:#fff}.input-box input::placeholder{color:#ffffffa0}.input-box .icon{position:absolute;top:50%;right:20px;translate:0 -50%;color:#fff}.input-box input:focus+.icon{color:#333}button[type=submit],.google-sign-in{width:100%;padding:10px;border:none;border-radius:20px;background-color:#fff;color:#000;font-size:16px;font-weight:600;cursor:pointer;margin:5px 0}button[type=submit]:hover{background-color:#dbdbdb;transition:.2s}.google-sign-in{background-color:#0a7edd;color:#fff}.google-sign-in:hover{background-color:#06c;transition:.2s}.remember-forgot{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.remember-forgot label{display:flex;align-items:center;font-size:14px;color:#fff}.remember-forgot a{font-size:14px;color:#fff;text-decoration:none}.remember-forgot a:hover{text-decoration:underline}.google-sign-in .google-icon{margin-right:10px}.register-link{text-align:center;margin-top:10px;color:#fff}.register-link a{color:#fff;text-decoration:none}.register-link a:hover{text-decoration:underline}.avatar-preview{display:flex;justify-content:center;align-items:center;margin:20px 0}.avatar-preview img{border:5px solid rgba(255,255,255,.633);border-radius:50%;width:200px;height:200px;object-fit:cover}*{font-family:Poppins}.sw-sidebar{z-index:1;position:fixed;top:0;left:0;height:100%;width:40px;background-color:#000;display:flex;flex-direction:column;align-items:center;padding:10px 0;box-shadow:2px 0 5px #0000001a}.sw-sidebar-btn{background:none;border:none;color:#fff;margin:20px 0;font-size:1rem;cursor:pointer;position:relative}.sw-sidebar-btn:hover,.sw-sidebar-btn.active{color:#0f2;background:transparent}.sw-spacer{flex-grow:1}.sw-sidebar-btn:hover:after{opacity:1;visibility:visible}.chatList{flex:1;overflow:scroll;margin-left:40px}.search{display:flex;align-items:center;gap:20px;padding:20px}.searchBar{flex:1;background-color:#fff;display:flex;align-items:center;gap:20px;border-radius:20px;padding:10px}.searchBar input{background-color:transparent;border:none;outline:none;color:#000;flex:1}.searchBar img{width:20px;height:20px}.add{width:40px;height:40px;border:1px solid;background-color:#019c37;padding:10px;border-radius:20px;cursor:pointer;font-size:1.1rem}.add:hover{background-color:#019c37d3;transition:.2s}.customer{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;border-bottom:1px solid #dddddd22;padding-left:5px;position:relative}.customer img{width:50px;height:50px;border:1px solid rgb(255,255,255);border-radius:50%;object-fit:cover;margin:15px}.customer .texts{display:flex;flex-direction:column}.customer .texts .chatName{font-weight:500;color:#fff;font-size:1.1rem;margin:0;display:flex;align-items:center}.customer .texts .chatName .badge{background-color:green;color:#fff;border-radius:100%;padding:2px 6px;font-size:.8rem;margin-left:10px}.customer .texts p{font-size:14px;font-weight:300;color:#fff;margin:0}.customer.selected{background-color:#000}.customer.unseen{background-color:#019c37}*{font-family:Space Grotesk}.addUser{width:370px;height:max-content;padding:10px;background-color:#111928;border:1px solid white;border-radius:40px;position:absolute;top:0;bottom:250px;left:70px;right:0;margin:auto;z-index:5}.addUser form{display:flex;gap:0px}.addUser form input{padding:10px 15px;border-radius:20px 0 0 20px;border:none;outline:none;font-size:16px;width:300%}.addUser form button{padding:10px 20px;border-radius:0 20px 20px 0;background-color:#440eca;color:#fff;border:none!important;margin:0!important;cursor:pointer;font-size:16px}.addUser form button:hover{background-color:#3c11aa;transition:.2s}.addUser .user{margin-top:20px;display:flex;align-items:center;justify-content:space-between;background-color:#ffffff5f;padding:3px 7px;border-radius:20px}.addUser .user .detail{display:flex;align-items:center;gap:20px}.addUser .user .detail img{width:50px;height:50px;border-radius:50%;object-fit:cover}.addUser .user .detail span{color:#fff;font-size:16px}.addUser .user button{padding:10px 15px;border-radius:15px;background-color:#095800;color:#fff;border:none;cursor:pointer;font-size:1rem}.list{flex:1;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;overflow:scroll;background-color:#000000d3!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:max-content}.ch-userinfo{margin-top:20px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;margin-left:40px}.ch-userinfo .ch-user{display:flex;justify-content:flex-start!important;align-items:center!important;gap:20px;width:100%}.ch-userinfo .ch-user img{width:50px;height:50px;border:3px solid rgb(72,248,254);border-radius:50%;object-fit:cover}.ch-userinfo .ch-user h2{color:#fff;font-size:1.5rem;font-weight:600}.ch-userinfo .icons{display:flex;gap:20px}.ch-userinfo .icons img{width:20px;height:20px}.chat-container{display:flex;height:100%;position:relative;width:70vw}.chat{flex:2;border-left:1px solid #dddddd35;border-right:1px solid #dddddd35;height:100%;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;transition:flex .3s ease;position:relative}.detail{flex:0;overflow:scroll;border-left:1px solid #dddddd35;transition:flex .3s ease,display 0s .3s}.detail.hidden{display:none;transition:none}.detail.visible,.chat-container.detail-visible .detail{flex:1;display:block}.top{padding:10px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid #b7205535;cursor:pointer;background-color:#0000008a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#faebd7}.user{display:flex;align-items:center;gap:10px;overflow:scroll}.user img{width:40px;height:40px;border:3px solid white;border-radius:50%;object-fit:cover;margin:5px 0}.user span{font-weight:500!important}.texts{display:flex;flex-direction:column;overflow:scroll}.texts p{margin:5px 0}.texts span{font-size:18px}.center{padding:20px 20px 10px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0px}.center .message{max-width:70%;display:flex;align-self:flex-start}.center .message.own{align-self:flex-end}.center .message.own .texts p{background-color:#ffffff3d}.center .message img{width:30px;height:30px;border-radius:50%;object-fit:cover}.center .message .texts{flex:1;display:flex;flex-direction:column;margin-bottom:10px}.center .message .texts p{padding:10px 20px;background-color:#00000067;border-radius:15px;color:#fff}.center .message .texts span{display:block;font-size:10px;color:#fff;font-weight:300;text-align:left;padding-top:10px}.center .message.own .texts span{text-align:right}.bottom{padding:10px;display:flex;justify-content:space-evenly;align-items:center;gap:25px;border-top:1px solid #dddddd8a;margin-top:auto;background-color:#0000005a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.bottom input{flex:1;background-color:#fff;padding:10px 20px;border:2px solid transparent;outline:none;border-radius:50px;color:#000;font-size:1rem;transition:border .2s ease;font-weight:600}.bottom input:focus{border:2px solid #0095f6}.icons{display:flex;gap:15px}.icons i{font-size:1.8rem;cursor:pointer;color:#fff}.emoji{position:relative;width:30px;height:30px;cursor:pointer;z-index:2}.emoji i{font-size:1.8rem;cursor:pointer;color:#fff}.picker{position:absolute;bottom:50px;right:0;z-index:1}.sendButton{background-color:#017374;border:none;color:#fff;padding:10px 25px;border-radius:50px;cursor:pointer;transition:background-color .2s ease;font-size:1rem;font-weight:600}.sendButton:hover{background-color:#005a5c}.scrollButton{position:absolute;bottom:80px;left:50%;transform:translate(-50%);background-color:#007bff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 5px #0003;transition:opacity .3s;opacity:0;visibility:hidden}.scrollButton.visible{opacity:1;visibility:visible}.fa-ellipsis-v{float:right;font-size:1.5rem;cursor:pointer;color:#fff}.option{color:#fff;padding:5px 10px;margin-left:5px;font-size:16px}.option:hover{background-color:#0000005a;border-radius:15px}.detail{padding:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:#0000002e;height:100%;user-select:none;-webkit-user-select:none}.detail .user{padding:20px 0;display:flex;flex-direction:column;align-items:center}.detail .user img{margin:0 0 20px;width:190px;height:190px;object-fit:cover;border:3px solid white;border-radius:50%}.detail .user h2{font-size:24px;font-weight:600;color:#fff}.detail .user h3{font-size:18px;font-weight:400;color:#ffdb93}.detail .user p{margin:20px 0;font-size:14px;text-align:center;color:#ffffffa6}.detail .genres,.detail .tags{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap;justify-content:center;padding:0 10px}.detail .genre{background-color:#355db2;color:#fff;padding:10px 20px;border-radius:20px;font-size:16px}.detail .block-button{margin-top:20px;padding:10px 20px;background-color:#b83b3b;color:#fff;border:none;border-radius:20px;font-size:20px;cursor:pointer;font-weight:800;transition:background-color .3s}.detail .block-button:hover{background-color:red}.detail .blocked-message{color:red;font-weight:600;text-align:center;margin:20px 0}.detail .block-button{color:#fff;font-weight:600;padding:10px 20px;cursor:pointer}.detail .block-button:hover{background-color:#ff1a1a}.detail .unblock-button{background-color:#4caf50;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer}.detail .unblock-button:hover{background-color:#45a049}.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:8px solid rgba(255,255,255,.3);border-top:8px solid #fff;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}*{margin:0;padding:0;box-sizing:border-box}h1{font-family:Raleway;font-size:40px;margin:5px 0 30px;color:#fff}.music-recommendations{background:linear-gradient(to left,#12637a,#08001b);padding:20px 64px;margin-left:40px;align-items:center;display:flex;flex-direction:column}.inputs{margin-bottom:40px;display:flex;gap:10px}.inputs input{padding:10px 20px;background-color:#fff3;border-radius:20px;border:0px solid #ffffff;width:300px;font-family:Space Grotesk;font-size:20px;color:#fff;font-weight:900}.track-list{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.track-card{background-color:#0000007f;border-radius:30px;overflow:hidden;box-shadow:0 4px 8px #0003;transition:transform .2s;width:200px;text-align:center;height:340px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.track-card:hover{transform:translateY(-10px)}.track-image img{margin-top:20px;width:80%;height:auto;border-radius:15px}.track-info{padding:20px}.track-info h3{margin:10px 0;font-size:1.1rem;color:#fff;padding:0 10px}.track-info p{margin:0 0 10px;font-size:.9rem;color:#bbb;padding:0 10px}.spotify-link{display:block;padding:5px 12px;background-color:#1ed760;color:#000;border-radius:50px;text-decoration:none;font-weight:500;transition:background-color .3s;font-size:1em;width:max-content;margin:0 0 20px}.spotify-link:hover{background-color:#00ff5963;color:#fff;text-decoration:none}.music-charts{display:flex;flex-direction:column;list-style-type:none;padding:0}.music-charts ul{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.music-charts li{margin-bottom:20px;padding:20px;border-radius:20px;background-color:#0000005b;text-align:center;font-size:16px}.track-item{display:flex;flex-direction:column;justify-content:space-between;width:47%}.track-item img{width:100%;height:auto;border-radius:20px}.track-info{padding:0}.track-title{display:block;font-size:1.2em;font-weight:600;margin-top:10px;word-wrap:break-word}.track-artist{display:block;color:#aaa}.listen-link{display:inline-block;margin-top:15px;padding:10px 20px;background-color:#1db954;color:#000;border-radius:20px;text-decoration:none;font-weight:500}.listen-link:hover{background-color:#00ff5963;color:#fff;text-decoration:none}.switch-button{display:flex;justify-content:space-around;margin-bottom:20px}.switch-button button{background-color:#ffffff8b;border:none;border-radius:20px;cursor:pointer;font-size:20px;font-weight:600;color:#fff;padding:10px 20px;width:170px;margin:0 5px;transition:background-color .3s ease}.switch-button button.active{background-color:#24007a;color:#fff}.switch-button button:hover{background-color:#2d0096;color:#fff}.artist-item{display:flex;align-items:center;background-color:#0000005b;padding:10px;border-radius:20px;margin-bottom:10px;width:100%;justify-content:flex-start}.artist-link{width:100%;display:flex;justify-content:space-between;align-items:center}.artist-link:hover{text-decoration:none}.artist-img{width:118px;height:118px;border-radius:15%;margin-right:20px}.artist-info{display:flex;flex-direction:column;text-align:left;width:65%}.artist-name{font-size:1.3rem;font-weight:600;color:#6ceeff;text-decoration:none}.artist-name:hover{text-decoration:underline}.artist-tags,.artist-followers,.artist-playcount{font-size:.9em;color:#aaa;margin-top:5px;font-weight:400}.recent-updates{padding:0;-webkit-user-select:text;user-select:text}.recent-updates h2{padding:8px 0}.recent-updates ul{list-style:none}.recent-updates li{margin-bottom:20px;padding:20px;border-radius:20px;background-color:#0000005b;text-align:justify;-webkit-user-select:text;user-select:text}.recent-updates h3{margin:0;font-size:1.2em;font-weight:600;color:#ffb974;-webkit-user-select:text;user-select:text}.recent-updates p{margin:10px 0 0;color:#ccc;-webkit-user-select:text;user-select:text;font-weight:400}a{color:#fff;text-decoration:none;-webkit-user-select:text;user-select:text;font-weight:700}a:hover{text-decoration:underline}.add-group-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center}.add-group-form{background:#fff;padding:20px;border-radius:20px;width:400px}.add-group-form label{display:block;margin-bottom:10px;font-weight:600}.file-upload-btn{background-color:#0af;text-align:center;padding:5px;border-radius:20px;color:#fff;font-weight:600}.file-upload-btn:hover{background-color:#0091d9;transition:.2s;cursor:pointer}.add-group-form input,.add-group-form textarea{width:100%;padding:8px;margin-top:5px;margin-bottom:15px;color:#000;border-radius:10px;border:1px solid}.add-group-form button{width:100%;padding:8px;background:#009c3c;color:#fff;border:none;border-radius:30px;font-size:18px;cursor:pointer}.add-group-form button:hover{background:#008031}::-webkit-scrollbar{display:none}.grouplist{position:relative;width:27%!important;margin-left:40px;background:#0009;border-right:1px solid rgba(255,255,255,.422)}.gc-search{display:flex;align-items:center;position:relative}.gc-searchBar{flex:1;background-color:#fff;display:flex;align-items:center;gap:10px;border-radius:20px;padding:10px;margin:20px}.gc-searchBar .grp-search-icon{margin-right:8px;color:#000}.grp-add-btn{margin-right:20px}.gc-searchBar input{background:none;border:none;color:#000;outline:none;width:100%}.gc-add{cursor:pointer;margin-left:16px}.gc-searchResults{position:absolute;top:50px;width:calc(100% - 40px);max-height:300px;overflow-y:auto;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:8px;z-index:10}.community{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .3s;border-bottom:1px solid rgba(255,255,255,.12)}.community:hover{background:#000c}.community.selected{background:#000}.community img{width:40px;height:40px;border-radius:50%;margin-right:8px}.texts{display:flex;flex-direction:column;flex-grow:1;margin-left:10px}.texts span{color:#fff;font-weight:700}.texts p{color:#bbb;margin:0}mark{background-color:#ff0;color:#000}.noResults{color:#bbb;text-align:center;padding:16px}.join-btn{background-color:#1a73e8;color:#fff;border:none;padding:5px 10px;border-radius:5px;cursor:pointer}button:hover{background-color:#135ab3}.joinedGroups{margin-top:20px}.joinedGroups h2{color:#fff;margin-bottom:30px}.gc-GroupChat{display:flex;flex-direction:column;background-color:transparent;flex:1;color:#fff}#not-joined{display:flex;flex-direction:column;align-items:center;justify-content:center}.gc-groupHeader{display:flex;align-items:center;padding:10px;background-color:#0009;border-bottom:1px solid #dddddd84}.gc-groupAvatar{width:40px;height:40px;border:2px solid white;border-radius:50%;margin-right:10px}.gc-groupName{flex:1;color:#fff;font-weight:700}.gc-searchInput{padding:5px;border-radius:5px;border:none;outline:none;margin-right:10px}.gc-someButton{padding:5px 10px;background-color:#f0f0f0;border:none;border-radius:5px;cursor:pointer}.gc-chatMessages{flex:1;overflow-y:auto;padding:20px}.gc-chatMessage{display:flex;align-items:flex-start;margin-bottom:10px;flex-direction:column}.gc-chatMessage.user .gc-message{align-self:flex-end;background-color:#ffffff3d;color:#fff}.gc-chatMessage.other .gc-message{align-self:flex-start;background-color:#00000067;color:#fff}.gc-chatAvatar{width:30px;height:30px;border-radius:50%;border:2px solid white}.gc-otherUserInfo{display:flex;align-items:center;margin-bottom:5px}.gc-otherUsername{margin-left:10px;font-weight:600;color:#fff;font-size:12px}.gc-message{max-width:60%;padding:10px 15px;border-radius:20px;margin-top:5px}.gc-messageContent{margin-bottom:5px;font-size:15px}.gc-timestamp{text-align:right;font-size:.8em;color:#ffffffb3}.gc-chatInputSection{display:flex;align-items:center;padding:10px;background-color:#0009;border-top:1px solid #ddd;justify-content:center}.gc-chatInputSection .gc-joinButton{padding:10px 20px;border:none;border-radius:20px;background-color:#1db954;color:#000;font-size:16px;font-weight:600}.gc-emojiIcon{margin-right:10px;cursor:pointer;color:#fff;font-size:24px}.gc-chatInput{flex:1;padding:10px;border-radius:20px;border:none;outline:none;font-size:15px}.gc-sendButton{padding:10px 20px;background-color:#017374;color:#fff;border:none;border-radius:20px;margin-left:10px;cursor:pointer;font-weight:600;font-size:15px}.gc-dateSeparator{padding:10px;text-align:center;font-size:12px}.GroupDetails{background-color:#0009;width:20%;border-left:1px solid rgba(255,255,255,.364);padding:0}.group-banner-container{position:relative;width:100%;padding-top:56.25%;margin-bottom:20px}.group-banner{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.group-avatar{position:absolute;bottom:-25px;left:110px;width:80px;height:80px;border:2px solid white;border-radius:50%;object-fit:cover}.group-info{padding:10px;margin:20px 0}.group-info h2{font-size:24px;margin:0}.group-info p{font-size:16px;margin:10px 0;text-align:center;color:#fff}.group-id{display:block;font-size:16px;text-align:center;color:#fff693}.GroupDetails h3{font-size:22px;padding-top:10px;padding-bottom:10px;text-align:center;color:#fff;font-weight:600;background-color:#000a;margin-bottom:10px}.gc-member{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer}.gc-member img{width:40px;height:40px;border:2px solid white;border-radius:50%;object-fit:cover}.gc-member .texts{display:flex;flex-direction:column;gap:10px;margin-left:2px}.gc-member .texts span{font-weight:500;font-size:16px}.gc-member .texts p{font-size:14px;font-weight:300}.leave-group-container{display:flex;justify-content:center;align-items:center}.leave-group-btn{margin-top:20px;padding:10px 20px;background-color:red;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:16px}.leave-group-btn:hover{background-color:#b70000;transition:.2s}.profile-page{display:flex;flex-direction:column;align-items:center;padding:20px;color:#fff;margin-left:40px}.user-profile{margin-bottom:20px;font-size:36px;text-align:center;width:100%}.profile-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:600px}.profile-field{display:inline-block;align-items:center;margin-bottom:10px;width:100%}.profile-field img.avatar{width:200px;height:200px;border:5px solid rgb(108,238,255);border-radius:50%;margin:20px;object-fit:cover}.profile-field label{margin-right:10px;font-size:18px;font-weight:600}.profile-field input{border:none;border-radius:20px;background-color:#ffffff20;color:#fff;padding:5px 15px;font-size:18px;width:60%}.profile-field button{margin-left:10px;padding:5px 10px;background-color:#0000;color:#fff;border:none;cursor:pointer;font-size:20px;float:right}.profile-field button:hover{background-color:#00000047;border-radius:50%}button.delete-account{margin-top:20px;padding:10px 20px;background-color:#b20101;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:16px;font-weight:600}button.delete-account:hover{background-color:#c00;transition:.2s}.edit-save-btn{margin-top:10px;padding:10px 20px;background-color:#1db853;color:#000;border:none;border-radius:20px;cursor:pointer;font-size:16px;font-weight:600}.edit-save-btn:hover{background-color:#40ff86;transition:.2s}input[type=file]{display:none}.avatar-container{position:relative;display:inline-block}.upload-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;z-index:2}.upload-overlay .spinner{border:6px solid rgba(255,255,255,.3);border-top:6px solid #fff;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin-bottom:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pl-playlist-page{background:linear-gradient(to left,#12637a,#08001b)!important;display:flex;flex-direction:column;align-items:center;padding:20px;margin-left:40px;height:100vh}button{padding:10px 20px;background-color:#1db954;border:none;border-radius:20px;font-size:16px;font-weight:600}button:hover{background-color:#1ed760;transition:.2s}.pl-form-container{display:flex;flex-direction:column;align-items:center;width:100%;justify-content:center}.pl-param-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;width:100%;justify-content:space-between}.pl-param-container label{display:flex;flex-direction:column;align-items:center;flex:1 1 45%;min-width:140px;color:#fff;font-size:16px}.pl-param-container input[type=text]{margin:10px;border-radius:20px;padding:5px 15px;font-size:16px}.pl-param-container input[type=range]{width:35%;margin:10px 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;background-color:#fff;outline:none;opacity:.7;transition:opacity .2s;border-radius:10px}.pl-param-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#1db954;cursor:pointer;border-radius:50%}.pl-param-container input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#1db954;cursor:pointer;border-radius:50%}.pl-generate-button{margin-bottom:20px;padding:10px 20px;background-color:#00b640;color:#000;border:none;cursor:pointer;border-radius:20px}.pl-generate-button:hover{background-color:#00e04f}.pl-playlist-container{display:flex;flex-direction:column;align-items:center;width:100%}.pl-playlist-cover{width:100px;height:100px;margin-bottom:10px}.pl-playlist-name-input{width:80%;padding:10px 15px;margin-bottom:10px;border:1px solid #ccc;border-radius:20px}.pl-track-list{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.pl-track-card{background-color:#0000007f;border-radius:30px;overflow:hidden;box-shadow:0 4px 8px #0003;transition:transform .2s;width:200px;text-align:center;height:340px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.pl-track-card img{width:100%;border-radius:5px;margin-bottom:10px}.pl-track-card a{color:#1db954;text-decoration:none;font-weight:700}.pl-track-card:hover{transform:translateY(-10px)}.pl-add-to-spotify-button{background-color:#1db954;color:#000;border:none;padding:10px 20px;cursor:pointer;border-radius:20px}.pl-add-to-spotify-button:hover{background-color:#1ed760}@media (max-width: 768px){.pl-param-container{flex-direction:column;align-items:stretch}.pl-param-container label{flex:1 1 100%}}@media (max-width: 480px){.pl-playlist-cover{width:80px;height:80px}.pl-playlist-name-input,.pl-generate-button,.pl-add-to-spotify-button{width:90%}}#root{height:0%!important}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins}html{scroll-behavior:smooth;background:linear-gradient(to left,#12637a,#0f0033);background-size:cover}body{height:100vh;overflow-y:scroll;scroll-behavior:smooth}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;z-index:-1}.video-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:-2}#backgroundVideo{min-width:100%;min-height:100%;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:fill;z-index:-900}#backgroundVideo::-webkit-media-controls-start-play-button,#backgroundVideo::-webkit-media-controls-overlay-menu-button,#backgroundVideo::-webkit-media-controls-time-control,#backgroundVideo::-webkit-media-controls-volume-slider,#backgroundVideo::-webkit-media-controls-brightness-slider,#backgroundVideo::-webkit-media-controls-fullscreen-toggle-button,#backgroundVideo::-webkit-media-controls-clock-and-timecode-display,#backgroundVideo::-webkit-media-controls-current-time-display,#backgroundVideo::-webkit-media-controls-time-remaining-display,#backgroundVideo::-webkit-media-controls-volume-mute-button,#backgroundVideo::-webkit-media-controls-closed-caption-button,#backgroundVideo::-webkit-media-controls-frame-by-frame-button,#backgroundVideo::-webkit-media-controls-seek-backward-button,#backgroundVideo::-webkit-media-controls-seek-forward-button,#backgroundVideo::-webkit-media-controls-play-pause-button,#backgroundVideo::-webkit-media-controls-stop-button,#backgroundVideo::-webkit-media-controls-mute-button,#backgroundVideo::-webkit-media-controls-volume-slider-container{display:none!important}.header{margin-top:30px;display:flex;justify-content:space-between;align-items:center;height:120px;padding:32px}.header img{height:120px;border-radius:50%}.logo{display:flex}.logo span{color:#eae0d5;font-weight:800;font-size:60px;line-height:normal;padding:0 16px}#navbar{padding:16px;background-color:#ffffff0a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;border:1px solid rgba(126,110,110,.18);box-shadow:0 8px 32px #0000005e}#navbar ul{list-style:none;display:flex}#navbar ul li{padding:0 24px;position:relative}#navbar ul li a{text-decoration:none;color:#fff;font-weight:400;font-size:20px}#navbar ul li a:hover,#navbar ul li a.active{color:#5fd7ff;transition:.3s ease}#navbar ul li a.active:after,#navbar ul li a:hover:after{content:"";width:30%;height:3px;background-color:#5fd7ff;position:absolute;bottom:-8px;left:24px;transition:.3s ease}.hero{padding:48px;height:80vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s ease-in-out,transform .5s ease-in-out;background-color:transparent!important}.hero.hidden{opacity:0;transition:opacity .5s ease-in-out}#content.hidden-content{opacity:0;transition:opacity .8s ease-in-out}.hero h1.animated{animation:fadeIn 3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(-200px)}to{opacity:1;transform:translateY(0)}}@keyframes animationgradienttitle{0%{background-position:0 1600px}to{background-position:1600px 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero h1{font-size:12rem;font-weight:900;background:linear-gradient(to left,#18c5ff,#be3efe,#ff525d,#be3efe,#18c5ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation-duration:12s!important;animation-name:animationgradienttitle!important;animation-iteration-count:infinite!important;animation-fill-mode:forwards!important;font-family:Raleway;margin:0}#smaller{font-size:5rem;font-weight:900;animation:fadeInUp 1s ease-in-out forwards}#larger{animation:fadeInUp 1.5s ease-in-out forwards}.hero p{padding-top:20px;font-size:2rem;color:#fff;animation:fadeInUp 2s ease-in-out forwards}.circle{position:relative;width:200px;height:200px;background-color:red;border-radius:50%;display:flex;justify-content:center;align-items:center}#features{background-image:url(/assets/features-bg-3-BpnCdVEk.jpg);background-size:cover;background-repeat:no-repeat}#features:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:-1}#about,#features{display:block;opacity:1;color:#fff;background:linear-gradient((135deg,rgba(255,255,255,.1),rgba(255,255,255,0)));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;border:1px solid rgba(126,110,110,.18);box-shadow:0 8px 32px #0000003e;margin:64px 32px;padding:10px 32px}#features{height:650px}#about h1{font-family:Raleway;font-size:3rem;font-weight:800;background:linear-gradient(to left,#18c5ff,#be3efe,#ff525d,#be3efe,#18c5ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:16px 0;margin:0}#features h1{font-family:Raleway;font-size:3rem;font-weight:800;background:linear-gradient(to left,#ffa216,#fb0,#ffd427);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:16px 0;margin:0}#about{display:flex;justify-content:space-between;align-items:center}.about{padding-right:32px}#about p{font-size:20px;text-align:justify;line-height:2.2rem}#about ul{list-style:none;font-size:20px;line-height:2.2rem}#about ul li i{padding-right:1rem}#join-text{font-weight:700;padding:1rem 0}#content{transition:opacity .5s ease-in-out;opacity:1}.logo-img{height:100%}.logo-img img{margin-left:32px;width:25vw}.slider{position:relative;width:100%;height:470px;overflow:hidden;display:flex;justify-content:center;align-items:center}.item{position:absolute;width:400px;height:460px;text-align:justify;background-color:#d27fff53;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:25px;padding:20px;transition:.5s;left:50%;transform:translate(-50%);top:10}#next,#prev{position:absolute;top:40%;color:#fff7;background-color:transparent;border:none;font-size:xxx-large;font-weight:700;left:100px}#next{left:unset;right:100px}.ft{color:#000;text-align:center;padding:20px 0;font-size:32px}.ft-img{display:flex;justify-content:center;align-items:center;margin-top:20px}.ft-img img{width:170px;height:auto}.ft-content{padding:0 20px;font-size:1.2rem}.creds{text-align:center;color:#ffffffb7;bottom:0;width:100%;padding-top:10px;padding-bottom:10px;position:absolute}.footer{background-color:#000000ae;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:70px 0}.row{display:flex;justify-content:space-around}.footer-col{width:25%;padding:0 15px}.footer-col h4{font-size:18px;color:#fff;text-transform:capitalize;margin-bottom:35px;font-weight:500;position:relative}.footer-col h4:before{content:"";position:absolute;left:0;bottom:-10px;background-color:#c41ee9;height:2px;box-sizing:border-box;width:50px}.footer-col ul li:not(:last-child){margin-bottom:10px}.footer ul{list-style:none}.footer-col ul li a{font-size:16px;text-transform:capitalize;color:#fff;text-decoration:none;font-weight:300;color:#bbb;display:block;transition:all .3s ease}.footer-col ul li a:hover{color:#fff;padding-left:8px}.footer-col .social-links a{display:inline-block;height:40px;width:40px;background-color:#fff3;margin:0 10px 10px 0;text-align:center;line-height:40px;border-radius:50%;color:#fff;transition:all .5s ease}.footer-col .social-links a:hover{color:#24262b;background-color:#fff}@media (max-width: 767px){.footer-col{width:50%;margin-bottom:30px}}@media (max-width: 574px){.footer-col{width:100%}}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Space Grotesk,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.body{margin:0;padding:0;color:#fff}.container{width:100vw;height:100vh;display:flex}