/* ========= Base + Consistent Sizing ========= */
* { box-sizing: border-box; }

html { font-size: 18px; }           /* one place to control site-wide size */
body {
  margin: 10px;                    /* assignment requirement */
  background-color: #fdf9f6;
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

/* Paragraphs and common text all the same */
p, li, nav a, figcaption, footer {
  font-size: 1rem;                 /* 18px from html setting */
}

/* ========= Header / Nav / Footer (centered) ========= */
header h1 {
  text-align: center;
  font-size: 2rem;                 /* ~32px */
  color: #4b0082;
  margin: 20px 0 10px;
}

nav {
  text-align: center;              /* keep nav centered */
  margin: 10px 0 20px;
}

nav a {
  text-decoration: none;
  color: #4b0082;
  font-weight: 700;
  margin: 0 8px;
}

nav a:hover { text-decoration: underline; }

footer {
  text-align: center;              /* keep footer centered */
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

/* ========= Layout: image on top, content centered container ========= */
main {
  max-width: 900px;                /* keeps lines readable */
  margin: 0 auto;                  /* center the content block */
}

/* Top image centered with caption */
figure {
  margin: 20px auto;
  text-align: center;              /* caption centered */
}
figure img {
  display: block;
  max-width: 100%;
  width: 100%;
  max-width: 900px;                /* matches main width */
  height: auto;
  margin: 0 auto;                  /* image centered */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
figcaption {
  color: #555;
  font-style: italic;
  margin-top: 8px;
}

/* Headings inside main */
h2 {
  text-align: center;
  font-size: 1.5rem;               /* ~24px */
  color: #000;
  margin: 20px 0 10px;
}

/* Ensure paragraphs are consistent & left-aligned for readability */
main p { 
  margin: 0 0 1rem; 
  text-align: left;
}

/* Center media blocks on pages that use them (page2/page3) */
audio, video, iframe {
  display: block;
  margin: 16px auto;
}
/* === Paragraph size tweak (smaller across all pages) === */
main p,
main li {
  font-size: 0.9rem;   /* ~16px if html is 18px */
  line-height: 1.6;
}