*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;overflow-x:hidden}.dark{color:#fff;background:#0f172a}.light{color:#000;background:#f1f5f9}.app{flex-direction:column;min-height:100vh;display:flex;position:relative}.bg-effects{z-index:0;position:fixed;inset:0;overflow:hidden}.circle{filter:blur(100px);opacity:.4;border-radius:50%;animation:10s ease-in-out infinite float;position:absolute}.c1{background:#7c3aed;width:300px;height:300px;top:-50px;left:-50px}.c2{background:#06b6d4;width:250px;height:250px;bottom:0;right:0}.c3{background:#ec4899;width:200px;height:200px;top:50%;left:50%}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-30px)}to{transform:translateY(0)}}.navbar{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff14;justify-content:space-between;align-items:center;padding:15px 25px;display:flex;position:sticky;top:0}.logo{font-size:22px;font-weight:700}.nav-links{flex-wrap:wrap;gap:10px;display:flex}.nav-links button{cursor:pointer;color:#fff;background:#ffffff1a;border:none;border-radius:12px;padding:10px 16px;transition:all .3s}.nav-links button:hover{background:#7c3aed;transform:translateY(-2px)}.main-content{z-index:1;flex:1;padding:40px 20px;position:relative}.hero{flex-wrap:wrap;justify-content:center;align-items:center;gap:60px;min-height:80vh;display:flex}.avatar{border-radius:30px;width:320px;box-shadow:0 0 40px #7c3aed80}.hero-right{max-width:500px}.intro{margin-bottom:10px;font-size:20px}.hero-right h1{margin-bottom:20px;font-size:60px}.hero-right span{color:#a855f7}.description{margin-bottom:25px;font-size:18px;line-height:1.6}.socials{flex-wrap:wrap;gap:15px;display:flex}.socials a,.socials button{cursor:pointer;color:#fff;background:#ffffff1a;border:none;border-radius:14px;padding:12px 18px;text-decoration:none;transition:all .3s}.socials a:hover,.socials button:hover{background:#7c3aed;transform:scale(1.05)}.card-section{max-width:1100px;margin:auto}.card-section h2{margin-bottom:30px;font-size:40px}.card,.project-card,.skill-card,.wall-card,.settings-box{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff14;border-radius:20px;margin-bottom:20px;padding:25px}.project-grid,.skills-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid}.project-card:hover,.skill-card:hover,.wall-card:hover{transition:all .3s;transform:translateY(-5px)}.tech{color:#c084fc;margin:10px 0}.skill-card{text-align:center;font-weight:700}.setting-item{justify-content:space-between;margin-bottom:20px;display:flex}.setting-item button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:10px;padding:10px 16px}.footer{text-align:center;z-index:1;margin-top:auto;padding:20px;position:relative}@media (width<=768px){.hero-right h1{font-size:42px}.avatar{width:240px}}