* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #F7F7F2;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a p,
p {
  margin: 0 0 24px 0;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
button, .btn { font: inherit; cursor: pointer; border: none; }
section { position: relative; }
/* Inputs can appear inside both light content and dark components. */
input, textarea, select {
  background-color: #ffffff;
  color: #273043;
}
input::placeholder, textarea::placeholder {
  color: #555f70;
  opacity: 1;
}