:root{ --green:#1f4d3a; --green-dark:#16382a; --green-light:#dfe9e2; --sage:#a7b8a8; --cream:#f4f1ea; --text:#111111; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Inter',sans-serif; background:var(--cream); color:var(--text); line-height:1.7; } nav{ background:var(--green-dark); color:white; display:flex; justify-content:space-between; align-items:center; padding:1.25rem 8%; } .logo{ font-weight:700; letter-spacing:1px; } nav ul{ display:flex; gap:2rem; list-style:none; } nav a{ color:white; text-decoration:none; } .hero{ background: linear-gradient( 135deg, var(--green-dark), var(--green)); color:white; padding:5rem 8%; } .hero-content{ max-width:900px; } .tag{ letter-spacing:2px; margin-bottom:1rem; font-size:.85rem; } .hero h1{ font-size:clamp(2.8rem,7vw,5rem); line-height:1.05; margin-bottom:1.25rem; } .intro{ max-width:650px; font-size:1.15rem; opacity:.95; } .button{ display:inline-block; margin-top:2rem; padding:14px 26px; background:white; color:var(--green-dark); border-radius:999px; text-decoration:none; font-weight:600; } #work{ padding:3rem 8%; } #work h2{ margin-bottom:2rem; font-size:2.5rem; color:var(--green-dark); } .project-card{ background:white; padding:2rem; margin-bottom:1.5rem; border-radius:18px; border-left:8px solid var(--green); box-shadow: 0 10px 25px rgba(0,0,0,.05); } .project-card.alt{ background:var(--green-light); } .project-label{ color:var(--green); font-weight:700; font-size:.8rem; letter-spacing:2px; margin-bottom:.75rem; } .project-card h3{ font-size:2rem; margin-bottom:.75rem; } .project-short{ font-weight:500; margin-bottom:1rem; } .project-card p{ margin-bottom:1rem; } .skills{ color:var(--green-dark); font-weight:600; margin-top:1rem; } .buttons{ display:flex; gap:1rem; margin-top:1.5rem; } .buttons a{ text-decoration:none; padding:.8rem 1.2rem; border-radius:999px; font-weight:600; } .buttons a:first-child{ background:var(--green); color:white; } .buttons a:last-child{ border:2px solid var(--green); color:var(--green); } #about{ background:var(--green-dark); color:white; padding:3rem 8%; } .about-card{ max-width:900px; } .about-card h2{ margin-bottom:1rem; } .about-card p{ margin-bottom:1rem; } #contact{ padding:3rem 8%; } #contact h2{ margin-bottom:.5rem; color:var(--green-dark); } footer{ background:var(--green-dark); color:white; text-align:center; padding:1.25rem; } @media(max-width:800px){ nav{ flex-direction:column; gap:1rem; } nav ul{ gap:1rem; } .buttons{ flex-direction:column; } .project-card h3{ font-size:1.6rem; } }