.container {
  max-width: 800px;
  margin: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.py-sm {
  padding: 8px 0;
}

.py-md {
  padding: 16px 0;
}

.py-lg {
  padding: 32px 0;
}

.text-white {
  color: hsl(150, 9%, 91%);
}

.text-black {
  color: hsl(240, 9%, 9%);
}

.text-blue {
  color: hsl(205, 93%, 44%);
}

.text-cyan {
  color: hsl(188, 81%, 67%);
}

.text-green {
  color: hsl(129, 63%, 58%);
}

.text-yellow {
  color: hsl(56, 89%, 65%);
}

.text-red {
  color: hsl(5, 92%, 59%);
}

.bg-white {
  background-color: hsl(150, 9%, 91%);
}

.bg-black {
  background-color: hsl(240, 9%, 9%);
}

.bg-blue {
  background-color: hsl(205, 93%, 44%);
}

.bg-cyan {
  background-color: hsl(188, 81%, 67%);
}

.bg-green {
  background-color: hsl(129, 63%, 58%);
}

.bg-yellow {
  background-color: hsl(56, 89%, 65%);
}

.bg-red {
  background-color: hsl(5, 92%, 59%);
}

.strike {
  text-decoration: line-through;
}

/* TODO(wpcarro): Replace with "RZA" font as static asset */
/* TODO(wpcarro): Only use "light" weight of RZA */
.font-serif {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-sans {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.font-mono {
  font-family: monospace;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}