/* ---------------------------------------------------------------------------
   This top block is set up for you. Leave it alone and everything below it
   will behave sensibly.

   box-sizing: border-box makes padding and borders count INSIDE an element's
   width instead of getting added on top. The default does the opposite, which
   means the arithmetic never works out and you spend an hour wondering why
   your boxes are too wide.
--------------------------------------------------------------------------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

img { max-width: 100%; height: auto; }


/* ---------------------------------------------------------------------------
   Your styles start here. Change anything.

   One habit worth keeping: use max-width, not width. A page is responsive by
   default — a fixed width is what breaks it on a phone.
--------------------------------------------------------------------------- */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  max-width: 40rem;      /* not width */
  margin: 0 auto;
  padding: 2rem 1.25rem;
  color: #1a1a1a;
  background: #fdfdfb;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

a {
  color: #2b5eaa;
}

/* Try changing a colour and pushing. Watch your live page change. */