html,
body {
  min-height: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

main {
  width: 100%;
}

section {
  padding-block: var(--space-xl);
}

.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-max));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - (var(--container-padding) * 2), 900px);
  margin-inline: auto;
}

.container-wide {
  width: min(100% - (var(--container-padding) * 2), 1440px);
  margin-inline: auto;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

video,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  border: none;
  background: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

section.section-light {
  background-color: var(--color-paper);
  color: var(--color-black);
}

section.section-dark {
  background-color: var(--color-bg);
  color: var(--color-text);
}

@media (max-width: 768px) {
  section {
    padding-block: var(--space-lg);
  }
}