/* Typography updates based on
   "The Principles of Typography: Back to Basics"
   1. Increased base font size and chose a sans-serif typeface for readability.
   2. Added line-height and limited text width for better leading/measure.
   3. Adjusted heading sizes to create a clear hierarchy.
   4. Used .section spacing and alignment to improve alignment & proximity.
*/

body {
  font-size: 20px;
  background-color: #B06A30;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Panel / section layout */
.section {
  max-width: 800px; /* keeps lines from being too wide (measure) */
  margin: 30px auto; /* centers the panels with extra space between */
  padding: 20px;
  background-color: wheat;
  border-radius: 10px;
}

/* Headings – hierarchy */
h1 {
  color: rgb(18, 28, 115);
  font-size: 40px;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  color: rgb(18, 28, 115);
  font-size: 32px;
  margin-bottom: 8px;
}

h3, h4 {
  color: rgb(57, 125, 62);
  font-size: 28px;
  margin-bottom: 6px;
}

/* Paragraph text */
.section p,
.section li {
  color: #e32753;
  line-height: 1.5; /* leading */
  text-align: left; /* better readability than centered paragraphs */
}

/* Link states – all 4 */
a:link {
  color: #368e91;
  text-decoration: none;
}

a:visited {
  color: #121c73;
}

a:hover {
  color: #397d3e;
  text-decoration: underline;
}

a:active {
  color: #84ad87;
  font-size: 1.05em;
}
/*typography updates:
-increase based font size for better readability.
-added line-height and limited text width to improve leading and measure.
-adjusted heading sizes to create a clear heirachy.
-centered sections and improved spacing for aligment and proximity.
*/