:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary: #1a1a2e;--secondary: #16213e;--accent: #0f3460;--highlight: #e94560;--highlight-hot: #ff2c2c;--text: #f8f8f8;--chip-border: #4fa3d1 }*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:var(--primary);color:var(--text);overflow-x:hidden}a{text-decoration:none}.navbar{position:fixed;top:0;left:0;width:100%;background-color:transparent;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:all .3s ease}.navbar.navbar-scrolled{background-color:var(--primary);padding:1rem 2rem;box-shadow:0 5px 20px #0000001a}.logo{font-size:1.5rem;font-weight:700;color:var(--text)}.logo span{color:var(--highlight)}.nav-links{display:none}@media (min-width: 768px){.nav-links{display:flex;gap:2rem}}.nav-links a{color:var(--text);font-weight:500;transition:color .3s ease}.nav-links a:hover{color:var(--highlight)}.mobile-menu-btn{display:block;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}@media (min-width: 768px){.mobile-menu-btn{display:none}}.mobile-menu{position:fixed;top:0;right:-100%;width:70%;max-width:400px;height:100vh;background-color:var(--secondary);padding:2rem;z-index:1001;transition:right .3s ease}.mobile-menu.active{right:0}.close-menu-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}.mobile-links{margin-top:3rem;display:flex;flex-direction:column;gap:1.5rem}.mobile-links a{color:var(--text);text-decoration:none;font-size:1.2rem;font-weight:500;transition:color .3s ease}.mobile-links a:hover{color:var(--highlight)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .3s ease}.overlay.active{opacity:1;visibility:visible}.hero{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;position:relative;overflow:hidden}.background-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.particle{position:absolute;border-radius:50%;opacity:.5;animation:float 15s infinite linear}@keyframes float{0%{transform:translateY(0) translate(0) rotate(0);opacity:0}10%{opacity:.5}90%{opacity:.5}to{transform:translateY(-70vh) translate(20vw) rotate(360deg);opacity:0}}.content{z-index:1;text-align:center;display:flex;align-items:center;flex-direction:column}.profile-pic{width:180px;height:180px;border-radius:50%;background-color:var(--highlight);margin-bottom:2rem;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;border:4px solid var(--text);box-shadow:0 10px 30px #0000004d}.profile-pic img{width:100%;height:100%;object-fit:cover}.profile-pic-placeholder{font-size:6rem;color:var(--text)}.hero h1{font-size:3rem;margin-bottom:1rem;animation:fadeIn 1s ease}.hero h2{font-size:1.5rem;margin-bottom:2rem;color:var(--highlight);font-weight:400;animation:fadeIn 1.5s ease}.social-links{display:flex;gap:1.5rem;margin-bottom:.5rem;animation:fadeIn 2s ease;justify-content:center}.social-links a{color:var(--text);font-size:1.5rem;transition:transform .3s ease,color .3s ease}.social-links a:hover{color:var(--highlight);transform:translateY(-5px)}.cta-btn{padding:.8rem 2rem;background-color:var(--highlight);color:var(--text);border:none;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;animation:fadeIn 2.5s ease;display:inline-block}.cta-btn:hover{transform:scale(1.05);box-shadow:0 5px 15px #e9456066}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);animation:bounce 2s infinite;color:var(--text);font-size:1.5rem}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0) translate(-50%)}40%{transform:translateY(-20px) translate(-50%)}60%{transform:translateY(-10px) translate(-50%)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}section{padding:5rem 2rem;max-width:1200px;margin:0 auto}section h2{font-size:2rem;text-align:center;margin-bottom:3rem;position:relative}section h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:4px;background-color:var(--highlight)}.about-content{display:flex;flex-direction:column;gap:2rem}@media (min-width: 768px){.about-content{flex-direction:row}}.about-text{flex:1;opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}.about-text.visible{opacity:1;transform:translateY(0)}.about-text p{line-height:1.8;margin-bottom:1.5rem}.skills{flex:1;opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease;transition-delay:.3s}.skills.visible{opacity:1;transform:translateY(0)}.skill-bars{display:flex;flex-direction:column;gap:1.5rem}.skill-bar{display:flex;flex-direction:column;gap:.5rem}.skill-info{display:flex;justify-content:space-between}.skill-progress{height:8px;background-color:var(--secondary);border-radius:4px;overflow:hidden}.skill-progress-bar{height:100%;background-color:var(--highlight);border-radius:4px;width:0;transition:width 1.5s ease}.projects-section{background-color:var(--secondary)}.project-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width: 768px){.project-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.project-grid{grid-template-columns:repeat(3,1fr)}}.project-card{background-color:var(--accent);border-radius:10px;overflow:hidden;box-shadow:0 10px 20px #0000001a;transition:transform .3s ease,box-shadow .3s ease;opacity:0;transform:translateY(30px)}.project-card.visible{opacity:1;transform:translateY(0)}.project-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px #0003}.project-image{height:200px;background-color:var(--primary);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.project-image img{width:100%;height:100%;object-fit:cover}.project-icon{font-size:4rem;color:var(--highlight)}.project-content{padding:1.5rem}.project-content h3{margin-bottom:1rem;font-size:1.5rem}.project-content p{margin-bottom:1.5rem;line-height:1.6;color:#f8f8f8cc}.project-links{display:flex;gap:1rem}.project-links a{padding:.5rem 1rem;border-radius:4px;text-decoration:none;font-size:.9rem;transition:all .3s ease}.repo-link{background-color:transparent;border:1px solid var(--text);color:var(--text)}.repo-link:hover{background-color:var(--text);color:var(--accent)}.demo-link{background-color:var(--highlight);color:var(--text)}.demo-link:hover{background-color:#c8394c}.contact-section{background-color:var(--primary);text-align:center}.contact-form{max-width:600px;margin:0 auto;opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}.contact-form.visible{opacity:1;transform:translateY(0)}.footer{display:flex;width:100vw;justify-content:center;align-items:center;flex-direction:column;margin-top:1rem}.social-links{padding-top:10px}.chip-container{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;max-width:400px;gap:1rem;margin:1rem 0}.chip{display:flex;justify-content:center;align-items:center;min-width:80px;border-radius:18px;color:var(--text);border-color:var(--chip-border)!important;border-style:solid;border-width:1px;height:25px;cursor:pointer;transition:.2s}.chip:hover{background-color:var(--primary)}.chip-text{font-size:.75rem;padding:0 .5rem}
