/* CHANGE (whole file): Comments added to explain each fix.
   Colours were kept the same except where marked as a contrast fix. */

body {
  font-family: Arial, sans-serif;
  background-color: #2e2c2c;
  color: #d1c5c5;
}

h1 {
  color: #3e8e9c;
  /* CHANGE: "font: size 36px; ;" is not valid CSS, so the browser ignored it and
     the heading used the default size. "font-size" is the correct property. */
  font-size: 36px;
}

h2 {
  color: #3e8e9c;
  /* CHANGE: Same problem as h1, fixed to font-size. This also sets the size to
     20px. Before, the browser used its default size (about 24px), so h2 headings
     will look a little smaller now. Change the value if you prefer the old size. */
  font-size: 20px;
}

nav {
  display: flex;
  gap: 30px;
  padding: 10px;
  background-color: #333333;
}

nav a {
  text-decoration: underline #3e8e9c;
  /* CHANGE: The old purple (#6f3e9c) on dark grey (#333333) had a contrast ratio of
     about 1.7:1. That is too low to read easily (WCAG recommends at least 4.5:1).
     This lighter purple gives about 6:1. */
  color: #c8a2f0;
  font-weight: bolder;
}

nav a:hover {
  /* CHANGE: Hover text was teal on purple (about 2:1 contrast). White on purple
     gives about 7:1. */
  color: #ffffff;
  background-color: #6f3e9c;
}

img {
  /* NOTE (not changed): max-width here overrides the width="400" attribute on the
     avatar in index.html, so the image displays at 200px. Keep one or the other. */
  max-width: 200px;
  border-radius: 20%;
  border: 5px solid #474747;
}

p {
  /* CHANGE: "padding: #ffffffff" is not valid. A colour was given where a length
     is needed, so the browser ignored it. If you meant to make the text white,
     use "color: #ffffff;" instead. */

  /* CHANGE: 20px line spacing is tight for normal-size text and makes paragraphs
     harder to read. 1.5 times the text size is a common, readable value. */
  line-height: 1.5;
}