* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--color-grey);
  color: var(--color-black);
  padding: var(--spacing-m);
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--spacing-s);
}
p {
  margin-bottom: var(--spacing-m);
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  margin-bottom: var(--spacing-s);
  line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

ul, ol {
  margin-left: var(--spacing-l);
  margin-bottom: var(--spacing-m);
}
ul li, ol li {
  margin-bottom: var(--spacing-xs);
}

/* @media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
  .card {
    background-color: #1e1e1e;
  }
  .navbar, .footer {
    background-color: #222;
    color: #f0f0f0;
  }
  .button {
    background-color: #42835c;
  }
} */