body {
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;

  max-width: 1200px;
  padding: var(--space-sm);

  font-size: 1.1em;
}

/* Navigation component */
nav {
  margin: 0;
  padding: 0 var(--space-lg);
}
nav a {
  font-size: 1.3em;
}

/* Box component */
.box {
  flex-basis: 15.625em;
  margin: 0 0 0 -10px; /* Offset 10px box-shadow so the box appears centered */
  padding: var(--space-lg);
  padding: var(--space-md);

  background: var(--accent);
  color: var(--black);

  box-shadow: 10px 10px 0 var(--jet-black);
}
.box h1 {
  margin: 0;
  font-size: 2.2em;
}

/* Media queries */
@media (min-width: 325px) /* once we pass iPhone SE width */ {
  body {
    font-size: 1.3em;
  }
}

@media (min-width: 633px) {
  body {
    font-size: 1.5em;
  }
}

@media (min-width: 1500px) {
  body {
    font-size: 2em;
  }
}

@media (prefers-color-scheme: dark) {
  .box {
    color: var(--jet-black);
  }
}