@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  font-family: "Inter", sans-serif;
  background-color: #fff;
  color: #222;
  --card-color: #eee;
  --nest-card-color: #ccc;
  --highlight-color: #08f;
  --highlight-alt-color: #f80;
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-color: #333;
    --nest-card-color: #555;
    --highlight-color: #f80;
    --highlight-alt-color: #08f;
  }
  html, body {
    background-color: #222;
    color: #fff;
  }
}

a {
  color: var(--highlight-color);
}

header {
  background-color: var(--highlight-color);
  margin: 0%;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

ul {
  list-style-position: inside;
}

* {
  transition: all 0.3s ease;
}

/* Classes */

.card {
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: var(--card-color);
  padding: 20px;
  max-width: 700px;
  border-radius: 8px;
}

.nest {
  background-color: var(--nest-card-color);
}

.altcard {
  background-color: var(--highlight-alt-color);
}

.altlink {
  color: var(--highlight-alt-color);
}

.center {
  text-align: center;
}

.header {
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: var(--highlight-color);
  padding: 20px;
  max-width: 700px;
  border-radius: 8px;
}

.footnote {
  font-size: smaller;
}