/* =========================
   Primary Navigation
   ========================= */

nav {
  margin-bottom: 3rem;
}

nav a {
  margin-right: 1rem;
  font-weight: 500;
}

/* =========================
   Base Page Layout (Global)
   ========================= */

/* Controls the overall "content column" width and centers it on the page.
   - max-width: keeps lines readable (prevents super wide text on big screens)
   - margin: creates space from top/bottom and centers left/right with "auto"
   - padding: adds breathing room on small screens so text doesn't touch edges */

body {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 20px;

    /* Default text spacing for readability across the whole site */
  line-height: 1.6;

   /* System font stack: uses the user's native OS font for a clean, modern look */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* =========================
   Headings (Global)
   ========================= */

/* Makes main page titles slightly bolder */

h1 {
  font-weight: 600;
}
/* Adds consistent spacing ABOVE headings.
   Note: This affects BOTH h1 and h2.
   If a page feels like it has "too much whitespace," this is usually why. */

h1, h2 {
  margin-top: 2.5rem;
  
  /* Subtle typographic tweak: slightly tighter heading letters */
  letter-spacing: -0.01em;
}


/* =========================
   Paragraphs (Global)
   ========================= */

/* Adds spacing between paragraphs and sets a softer text color */
p {
  margin-top: 1.25rem;
  color: #444;
}

/* =========================
   Links (Global)
   ========================= */

/* Default link style: muted blue + subtle underline using a border */

a {
  color: #2c5f73;
  text-decoration: none;
  /* Border-bottom acts like an underline, but you can control thickness/opacity */
  border-bottom: 1px solid rgba(44, 95, 115, 0.3);
}

/* Hover state: makes underline stronger so it feels interactive */
a:hover {
  border-bottom-color: rgba(44, 95, 115, 0.7);
}

/* =========================
   About Me Page Specific Styles
   ========================= */
profile-pic {
  width: 200px;
  border-radius: 100px;
  margin-top: 1.25rem;
} 
/* =========================
   Index Page Specific Styles
   ========================= */
.header-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* =========================
   Posts Page Specific Styles
   ========================= */
   .header-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}