:root
{
    --bg:#ffffff;
    --text:#0f172a;
    --muted:#475569;
    --card:#f8fafc;
    --border:#e2e8f0;
    --brand:#2563eb;
    --brand-contrast:#ffffff
}
body.dark {
  --bg: #0b1220;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --card: #0f172a;
  --border: #1f2937;
  --brand: #60a5fa;
  --brand-contrast: #0b1220;
}

#dark-mode-toggle 
{
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
}

#dark-mode-toggle img
{
    fill: var(--bg);
}

#dark-mode-toggle img:last-child
{
    display: none
}
.dark #dark-mode-toggle img:first-child
{
    display: none
}
.dark #dark-mode-toggle img:last-child
{
    display: block
}

*
{
    box-sizing:border-box
}
html
{
    scroll-behavior:smooth
}
body
{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,Noto Sans,sans-serif
}
a
{
    color:var(--brand);
    text-decoration:none
}
a:hover
{
    text-decoration:underline
}
.container
{
    max-width:1040px;
    margin:0 auto;
    padding:0 20px
}
/* Header */
header
{
    position:sticky;
    top:0;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--border);
    z-index:10
}
.nav
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px
}
.nav a.brand
{
    font-weight:700;
    letter-spacing:.2px
}
.nav ul
{
    display:flex;
    gap:20px;
    list-style:none;
    margin:0;
    padding:0
}
.nav li a
{
    padding:8px 10px;
    border-radius:10px
}
.nav li a:focus-visible
{
    outline:2px solid var(--brand)
}

/* Hero */
.hero
{
    padding:72px 0 40px
}
.hero h1
{
    font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0 0 12px
}
.hero p
{
    color:var(--muted);margin:0 0 24px
}
.buttons
{
    display:flex;gap:12px;flex-wrap:wrap
}
.btn
{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    text-decoration:none;
    font-weight:600
}
.btn-primary
{
    background:var(--brand);
    border-color:var(--brand);
    color:var(--brand-contrast)
}
.btn:hover
{
    text-decoration:none;
    transform:translateY(-1px)
}

/* Sections */
section
{
    padding:56px 0;
    border-top:1px solid var(--border)
}
section h2
{
    font-size:clamp(22px,3.5vw,32px);
    margin:0 0 20px
}
.muted
{
    color:var(--muted)
}

/* Projects */
.grid
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
@media (max-width:900px)
{
    .grid
    {
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:640px)
{
    .grid
    {
        grid-template-columns:1fr
    }
}
.card
{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px
}
.card h3
{
    margin:0 0 4px;
    font-size:18px
}
.stack
{
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
.tag
{
    font-size:12px;
    border:1px solid var(--border);
    padding:4px 8px;
    border-radius:999px;
    color:var(--muted)
}
.links
{
    margin-top:auto;
    display:flex;
    gap:12px
}
.project-logo
{
    width: 100%;
    height: auto;
}
.paragraph {
    margin: 20px 0px;
}

.center {
    text-align: center;
}

/* About */
.about
{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px;
    align-items:start
}
@media (max-width:900px)
{
    .about
    {
        grid-template-columns:1fr
    }
}
.avatar
{
    width:100%;
    max-width:220px;
    aspect-ratio:1/1;
    border-radius:16px;
    border:1px solid var(--border);
    background:var(--card)
}

/* Contact */
.contact-list
{
    display:flex;
    flex-wrap:wrap;
    gap:14px
}

footer
{
    padding:28px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:14px
}