style.css

:root {
  --s8: 8px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --s128: 128px;

  --primary: hsl(160deg, 100%, 30%);
  --secondary-lighter: hsl(45deg, 100%, 50%);
  --secondary-darker: hsl(45deg, 100%, 40%);
  --grays-black: hsl(0deg, 0%, 0%);
  --grays-very-dark: hsl(0deg, 0%, 10%);
  --grays-dark: hsl(0deg, 0%, 30%);
  --grays-medium: hsl(0deg, 0%, 40%);
  --grays-light: hsl(0deg, 0%, 60%);
  --grays-white: hsl(0deg, 0%, 100%);

  --size-1rem: 1rem;
  --size-1-25rem: 1.25rem;
  --size-1-5rem: 1.5rem;
  --size-2rem: 2rem;
}

* {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Add styles here! */

header {
  padding-top: var(--s64);
  padding-bottom: var(--s32);
}

p {
  margin: var(--s16) 0;
}

main {
  background-color: var(--grays-light);
  border-top: var(--s8) solid var(--grays-medium);
  padding: var(--s64) 0;
}

.max-width-wrapper {
  max-width: 650px;
  margin: 0 auto;
}

.card,
.intro-chunk {
  background-color: var(--grays-white);
  padding: var(--s16);
}

.intro-chunk {
  max-width: 360px;
}

.intro-chunk strong {
  color: var(--primary);
}

.indented-heading {
  background-color: var(--secondary-lighter);
  border-bottom: var(--s8) solid var(--secondary-darker);
  padding: var(--s8) var(--s24);
  margin-left: -24px;
}