body {
  max-width: 56.25em;
  max-width: 65em;
  background-image: linear-gradient(
    to right bottom,
    #ffffff,
    #eaf8f4,
    #e5f6f1,
    #dff4ed,
    #d7f1e9
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* headings
----------------------------------------------- */
h1 {
  font-weight: 800;
  margin-top: var(--space-xxs);
}
h2 {
  font-weight: 600;
}

/* navigation
----------------------------------------------- */
nav ul {
  margin-top: 0;
  padding-top: var(--space-md);
}
nav.content-wrapper {
  margin-bottom: var(--space-lg);
}

/* foreground
----------------------------------------------- */
.foreground {
  min-height: 100%;
  padding: 0 var(--space-sm) var(--space-md) var(--space-sm);

  background: var(--background);
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

/* text content
----------------------------------------------- */
.content-wrapper {
  margin: 0 auto;
  max-width: 40.625em;
}

/* image
----------------------------------------------- */
.image {
  display: block;
  background: var(--white);
  padding: var(--space-md);
  max-width: 100%;
  margin: var(--space-xl) auto;
}

.image--elevated {
  box-shadow: var(--box-shadow);
}

/* media queries
----------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body {
    background-image: none;
  }
  .text--inverted-bg {
    background: var(--white);
  }
  .foreground {
    box-shadow: none;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 1.1em;
  }
}
@media (min-width: 1500px) {
  body {
    font-size: 1.2em;
  }
}
@media (min-width: 1800px) {
  body {
    font-size: 1.3em;
  }
}