*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
button {
  color: inherit;
}
button, [role="button"] {
  cursor: pointer;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
img,
svg {
  display: block;
}
img,
video {
  max-width: 100%;
  height: auto;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root {
  /* Logo colors are HSL 204 86% 53% */

  --light-theme-background-color: #ffffff;
  --light-theme-color: #000000;
  --light-theme-flash-background-color: hsl(204 86% 90%);

  --dark-theme-background-color: hsl(204 86% 10%);
  --dark-theme-color: hsl(0 0% 80%);
  --dark-theme-flash-background-color: hsl(204 86% 30%);
}

body {
  --background-color: var(--light-theme-background-color);
  --color: var(--light-theme-color);
  --color-scheme: light;
  --flash-background-color: var(--light-theme-flash-background-color);
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: var(--dark-theme-background-color);
    --color: var(--dark-theme-color);
    --color-scheme: dark;
    --flash-background-color: var(--dark-theme-flash-background-color);
  }
}

body.light {
  --background-color: var(--light-theme-background-color);
  --color: var(--light-theme-color);
  --color-scheme: light;
  --flash-background-color: var(--light-theme-flash-background-color);
}

body.dark {
  --background-color: var(--dark-theme-background-color);
  --color: var(--dark-theme-color);
  --color-scheme: dark;
  --flash-background-color: var(--dark-theme-flash-background-color);
}

body {
  background-color: var(--background-color);
  color: var(--color);
  color-scheme: var(--color-scheme);
}

.layout-page {
  padding: 10px 15px;
}

.layout-header {
  display: flex;
}

.nav-container {
  flex: 1 1 auto;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 15px;
}

.theme-toggle {
  flex: 0 0 auto;
}

.main {
  max-width: 1024px;
}