@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}:root{--primary-gradient:linear-gradient(135deg,#667eea,#764ba2);--secondary-gradient:linear-gradient(135deg,#f093fb,#f5576c);--success-gradient:linear-gradient(135deg,#4facfe,#00f2fe);--accent-gradient:linear-gradient(135deg,#fa709a,#fee140);--dark-bg:#0a0a0f;--card-bg:#ffffff0d;--glass-bg:#ffffff14;--glass-border:#ffffff2e;--text-primary:#fff;--text-secondary:#b4b4b4;--text-muted:#6b7280;--shadow-sm:0 2px 8px #0000001a;--shadow-md:0 8px 24px #00000040;--shadow-lg:0 12px 40px #00000059;--shadow-glow:0 0 30px #667eea4d;--border-radius:20px;--transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0f;background:var(--dark-bg);color:#fff;color:var(--text-primary);font-family:Inter,Poppins,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}.App,body{overflow-x:hidden}.App{background:linear-gradient(135deg,#0a0a0f,#1a1a2e 50%,#16213e);min-height:100vh;position:relative}.App:before{animation:rotate 40s linear infinite;background:radial-gradient(circle at 30% 50%,#667eea26 0,#0000 50%),radial-gradient(circle at 70% 50%,#f5576c1a 0,#0000 50%);content:"";height:200%;left:-50%;pointer-events:none;position:fixed;top:-50%;width:200%;z-index:0}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#ffffff08}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border:2px solid #ffffff0d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#764ba2,#667eea)}header{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff14;background:var(--glass-bg);border-bottom:1px solid #ffffff2e;border-bottom:1px solid var(--glass-border);box-shadow:0 4px 30px #0003;position:-webkit-sticky;position:sticky;top:0;z-index:1000}.Navbar{justify-content:space-between;margin:0 auto;max-width:1400px;padding:1.2rem 2rem;position:relative;z-index:10}.Navbar,.logo{align-items:center;display:flex}.logo{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;cursor:pointer;font-size:1.8rem;font-weight:800;gap:.5rem;letter-spacing:-.5px;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.logo:hover{filter:brightness(1.2);transform:scale(1.05)}.navlinks{align-items:center;display:flex;gap:2rem}.navlinks a{color:#b4b4b4;color:var(--text-secondary);font-size:.95rem;font-weight:500;padding:.5rem 0;position:relative;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.navlinks a:after{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .3s ease;width:0}.navlinks a:hover{color:#fff;color:var(--text-primary)}.navlinks a.active:after,.navlinks a:hover:after{width:100%}.navlinks a.active{color:#fff;color:var(--text-primary);font-weight:600}.profile{align-items:center;background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:50px;cursor:pointer;display:flex;gap:1rem;padding:.5rem 1rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.profile:hover{background:#ffffff14;background:var(--glass-bg);box-shadow:0 8px 24px #00000040;box-shadow:var(--shadow-md);transform:translateY(-2px)}.profile-img{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);border:2px solid #0000;border-radius:50%;height:40px;object-fit:cover;padding:2px;width:40px}.profile p{color:#fff;color:var(--text-primary);font-size:.95rem;font-weight:500}.logout{background:linear-gradient(135deg,#ff4757,#ff6348);border:none;border-radius:12px;box-shadow:0 4px 15px #ff47574d;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.7rem 1.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.logout:hover{box-shadow:0 6px 25px #ff475766;transform:translateY(-2px)}.post-con{animation:fadeInUp .6s ease backwards;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:20px;border-radius:var(--border-radius);margin:2rem auto;max-width:800px;padding:2rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);z-index:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.post-con:hover{border-color:#667eea4d;box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);transform:translateY(-4px)}.post-title{margin-bottom:1.5rem}.post-title h2{align-items:flex-start;color:#fff;color:var(--text-primary);display:flex;font-size:1.8rem;font-weight:700;justify-content:space-between;line-height:1.3;margin-bottom:.5rem}.post-title p{color:#6b7280;color:var(--text-muted);font-size:.85rem;font-weight:400}.body{margin:1.5rem 0}.body p{color:#b4b4b4;color:var(--text-secondary);font-size:1.05rem;line-height:1.7}.footer{align-items:center;border-top:1px solid #ffffff14;display:flex;justify-content:space-between;margin-top:2rem;padding-top:1.5rem}.post-username{color:#fff;color:var(--text-primary);cursor:pointer;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.post-username a{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;color:inherit;text-decoration:none}.post-username:hover{transform:translateX(3px)}.footer button{align-items:center;background:#ffffff0d;background:var(--card-bg);border:2px solid #ffffff2e;border:2px solid var(--glass-border);border-radius:12px;cursor:pointer;display:flex;font-size:1.8rem;gap:.5rem;padding:.5rem 1.2rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.footer button:hover{box-shadow:0 8px 24px #00000040;box-shadow:var(--shadow-md);transform:scale(1.1)}.like-button{overflow:visible;position:relative}.like-button:hover{transform:scale(1.15)}.like-button:active{transform:scale(.9)}.like-animate{animation:likeAnimation .6s cubic-bezier(.34,1.56,.64,1)}@keyframes likeAnimation{0%{transform:scale(1)}25%{transform:scale(1.3) rotate(-10deg)}50%{transform:scale(1.4) rotate(10deg)}75%{transform:scale(1.2) rotate(-5deg)}to{transform:scale(1) rotate(0deg)}}.like-button.like-animate:before{animation:likeParticle .6s ease-out;background:radial-gradient(circle,#ff475799 0,#0000 70%);border-radius:50%;content:"";height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}@keyframes likeParticle{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}.create-post{margin:4rem auto;max-width:700px;padding:0 2rem;position:relative;z-index:1}.form{min-height:auto}form{animation:fadeInUp .6s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:20px;border-radius:var(--border-radius);box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:1.5rem;padding:3rem}form input[type=text],form textarea{background:#ffffff0d;border:2px solid #ffffff2e;border:2px solid var(--glass-border);border-radius:12px;color:#fff;color:var(--text-primary);font-family:inherit;font-size:1rem;outline:none;padding:1rem 1.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}form input[type=text]:focus,form textarea:focus{background:#667eea1a;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}form input[type=text]::placeholder,form textarea::placeholder{color:#6b7280;color:var(--text-muted)}.title{font-size:1.1rem;font-weight:600;padding:0}.post-des{font-size:1rem;line-height:1.6;min-height:150px;resize:vertical}form p{color:#ff6b6b;font-size:.85rem;margin-top:-.5rem}.submit{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);border:none;border-radius:12px;box-shadow:0 4px 20px #667eea66;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem 2rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.submit:hover{box-shadow:0 6px 30px #667eea80;transform:translateY(-2px)}.submit:active{transform:translateY(0)}.sucess{animation:fadeIn .3s ease;color:#4ade80;font-size:1.1rem;font-weight:600;margin-top:1rem;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sign-in-con{animation:fadeInUp .6s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:20px;border-radius:var(--border-radius);box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);margin:8rem auto;max-width:500px;padding:3rem 2rem;position:relative;text-align:center;z-index:1}.sign-in-con:before{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);border-radius:20px;border-radius:var(--border-radius);bottom:-2px;content:"";left:-2px;opacity:0;position:absolute;right:-2px;top:-2px;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);z-index:-1}.sign-in-con:hover:before{opacity:.3}.sign-in-con p{color:#fff;color:var(--text-primary);font-size:1.3rem;font-weight:600;margin-bottom:2rem}.signin{align-items:center;background:#fff;border:none;border-radius:12px;box-shadow:0 8px 24px #00000040;box-shadow:var(--shadow-md);color:#333;cursor:pointer;display:flex;font-size:1.1rem;font-weight:600;gap:1rem;justify-content:center;margin:0 auto;max-width:350px;padding:1rem 2.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.signin:hover{background:#f8f9fa;box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);transform:translateY(-3px)}.signin svg{font-size:1.5rem}.profile-con{margin:3rem auto;max-width:1200px;padding:2rem;position:relative;z-index:1}.profile-pic-con{background:#ffffff0d;background:var(--card-bg);border:3px solid #ffffff2e;border:3px solid var(--glass-border);border-radius:20px;box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);cursor:pointer;height:250px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:250px}.profile-pic-con:hover{border-color:#667eea80;box-shadow:0 0 30px #667eea4d;box-shadow:var(--shadow-glow);transform:scale(1.02)}.profile-pic-con .profile-pic{height:100%;object-fit:cover;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.profile-pic-con:hover .profile-pic{filter:brightness(.7)}.edit{align-items:center;background:#667eeacc;border-radius:50%;color:#fff;display:flex;font-size:2rem;justify-content:center;left:50%;opacity:0;padding:1rem;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.profile-pic-con:hover .edit{opacity:1}.info{margin-top:3rem;max-width:600px;width:100%}.card{align-items:center;background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:12px;display:flex;justify-content:space-between;margin-bottom:2rem;padding:1.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.card:hover{background:#ffffff14;background:var(--glass-bg);transform:translateX(5px)}.edit-con{width:100%}.edit-con input,.email-in{background:#ffffff0d;border:2px solid #ffffff2e;border:2px solid var(--glass-border);border-radius:12px;color:#fff;color:var(--text-primary);font-size:1rem;outline:none;padding:1rem 1.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.edit-con input:focus,.email-in:focus{background:#667eea1a;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.pen{color:#b4b4b4;color:var(--text-secondary);cursor:pointer;font-size:1.2rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.pen:hover{color:#667eea;transform:scale(1.1)}.savechanges{background:linear-gradient(135deg,#4facfe,#00f2fe);background:var(--success-gradient);border:none;border-radius:12px;box-shadow:0 4px 20px #4facfe66;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:2rem;padding:1rem 2.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition)}.savechanges:hover{box-shadow:0 6px 30px #4facfe80;transform:translateY(-2px)}.more-con{display:inline-block;position:relative}.more-details{animation:slideDown .3s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff0d;background:var(--card-bg);border:1px solid #ffffff2e;border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 12px 40px #00000059;box-shadow:var(--shadow-lg);min-width:180px;padding:.5rem;position:absolute;right:0;top:40px;z-index:100}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.more-details .delete{background:none;border:none;border-radius:8px;color:#ff4757;cursor:pointer;font-weight:600;padding:.8rem 1rem;text-align:left;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.more-details .delete:hover{background:#ff47571a}.more-details .about,.more-details .profile{border-radius:8px;color:#fff;color:var(--text-primary);display:block;font-weight:500;padding:.8rem 1rem;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);transition:var(--transition);width:100%}.more-details .about:hover,.more-details .profile:hover{background:#ffffff14;background:var(--glass-bg);transform:translateX(3px)}#small{display:none}@media screen and (max-width:768px){.Navbar{padding:1rem}.logo{font-size:1.4rem}.navlinks{gap:1rem}.navlinks a{font-size:.85rem}.post-con{margin:1.5rem 1rem;padding:1.5rem}.post-title h2{font-size:1.4rem}.create-post{margin:2rem auto;padding:0 1rem}.sign-in-con,form{padding:2rem 1.5rem}.sign-in-con{margin:4rem 1rem}.profile-pic-con{height:200px;width:200px}.info{width:100%}#small{display:block}#big,.profile p{display:none}.logout{font-size:.85rem;padding:.6rem 1rem}}@media screen and (max-width:480px){.post-title h2{font-size:1.2rem}.footer,.post-title h2{align-items:flex-start;flex-direction:column}.footer{gap:1rem}.more-details{right:10px}}