:root{--bg: #fafafa;--text: #333;--muted: #666;--link: #1a73e8;--badge-green: #4caf50;--badge-orange: #ff9800;--card-radius: 12px}body{width:100vw;height:100svh;margin:0;padding:0}.page-container{display:flex;flex-direction:column;background-color:#f5f8ff;width:100vw;min-height:100svh}header{text-align:center;display:flex;flex-direction:column;align-items:center;padding:1rem;margin-top:2rem}.mobile-profile-pic{width:120px;height:120px;object-fit:cover;border-radius:50%;box-shadow:0 2px 8px #0000001a;border:4px solid black;margin-bottom:1rem}header h1{margin:0;font-size:clamp(1.8rem,5vw,2.4rem)}header p{margin:.5rem 0 0;font-size:1.2rem;color:var(--muted);max-width:80vw}main{flex:1;padding:0 1rem;max-width:900px;margin:0 auto}.projects{max-width:900px;margin:0 auto;padding:0 1rem}.projects h3{font-size:1.4rem;margin-bottom:1rem}.card-container{display:flex;flex-direction:column;gap:1rem}.project-card{display:flex;flex-direction:row;background:#fff;border-radius:var(--card-radius);box-shadow:0 4px 12px #00000040;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;transition:transform .1s ease}.project-card:hover{transform:scale(1.02)}.project-image{flex-shrink:0;width:35%;aspect-ratio:1.75 / 1;background-size:cover;background-position:center;background-color:#ddd}.project-details{padding:1rem;flex:1;display:flex;flex-direction:column;justify-content:center}.project-details h4{margin:0 0 .5rem;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}.badge{font-size:.7rem;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.badge.completed{background-color:var(--badge-green);color:#fff}.badge.in-progress{background-color:var(--badge-orange);color:#fff}.project-details p{margin:0;font-size:.95rem;color:#555}.social{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;margin-top:3rem}.social a img{width:64px;height:auto;object-fit:contain;transition:transform .2s ease}.social a:hover img{transform:scale(1.1)}@media (max-width: 600px){.project-card{flex-direction:column}.project-image{width:100%;aspect-ratio:2.5 / 1}.project-details{padding:.75rem 1rem 1rem}.project-details h4{font-size:1.1rem}.project-details p{font-size:.9rem}}
