/* resets */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  font: inherit;
  color: inherit;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100svh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}



/* custom */

      :root {
        --bg: #fafafa;
        --text: #222;
        --muted: #777;
        --border: #e5e5e5;
        --accent: #111;
        --max-width: 900px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 25px;
      }

      .container {
        max-width: var(--max-width);
        margin: auto;
        padding: 2rem 1.5rem;
      }

      header {
        margin-bottom: 2rem;
      }

      h1 {
        font-size: 2rem;
        margin-bottom: 0.2rem;
      }

      .subtitle {
        color: var(--muted);
        font-size: 1rem;
      }

      nav {
        position: sticky;
        top: 0;
        padding-block: 1rem;
        background-color: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      nav a {
        text-decoration: none;
        margin-right: 1rem;
        color: var(--muted);
        font-size: 0.9rem;
      }

      nav a:hover {
        color: var(--accent);
      }

      section {
        text-align: justify;
        margin-bottom: 3rem;
        scroll-margin-top: 70px;
      }

      h2 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.4rem;
      }

      p {
        margin-bottom: 0.3rem;
      }

      .project {
        margin-bottom: 1.5rem;
      }

      .project-title {
        font-weight: 600;
      }

      .project-desc {
        color: var(--text);
        font-size: 0.95rem;
      }

      .stack {
        font-size: 0.8rem;
        color: var(--muted);
      }

      .skills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .skill {
        border: 1px solid var(--border);
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
        border-radius: 4px;
      }

      footer {
        border-top: 1px solid var(--border);
        padding-top: 1rem;
        font-size: 0.85rem;
        color: var(--muted);
      }

      /* mobile */

      @media (max-width: 600px) {
        h1 {
          font-size: 1.6rem;
        }

        .container {
          padding: 1.5rem 1rem;
        }
      }

      @media (max-width: 320px) {
        section {
          scroll-margin-top: 90px;
        }
      }