* {
  box-sizing: border-box;
}

:root {
  --bg: #fdfbff;
  --fg: #1a1c1e;

  --outline: #74777f;

  --accent: #255fa4;
  --accent-hl: #003060;

  --btn-hl: #4178c1;
  --btn2-hl: rgba(189, 199, 220, 0.5);

  --error: #ff897d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1c1e;
    --fg: #e3e2e6;

    --outline: #8e9199;

    --accent: #a6c8ff;
    --accent-hl: #d6e3ff;

    --btn-hl: #79adf9;
    --btn2-hl: rgba(189, 199, 220, 0.2);

    --error: #ffb4ab;
  }
}

body {
  margin: 0;
  padding: 0.5rem;

  background: var(--bg);
  color: var(--fg);

  font-family: 'Noto Sans', 'Cantarell', 'Roboto', system-ui, sans-serif;
  font-size: 1.1rem;
}

main {
  max-width: 50rem;
  width: 100%;
  margin: auto;
}

.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: flex-start;
}

.button {
  padding: 0.25rem 1rem;

  border: none;
  border-radius: 1rem;

  background: var(--accent);
  color: var(--bg);

  text-decoration: none;
  font-size: 1rem;

  cursor: pointer;

  transition: background-color 0.15s ease-out;
}

.button:hover {
  background: var(--btn-hl);
}

.button.secondary {
  background: var(--bg);
  color: var(--fg);

  border: 1px solid var(--outline);
}

.button.secondary:hover {
  background: var(--btn2-hl);
}

a {
  text-decoration: none;
}