:root {
  --color-bg-light: #f5f5f5;
  --color-fg-light: #000000;
  --color-link-light: #9A3ED9;
  --color-bg-dark: #252525;
  --color-fg-dark: #ffffff;
  --color-link-dark: #CC67F1;
  --space-small: 1em;
  --space-medium: 2em;
  --max-width: 750px;
  --font-size-large: 1.9em;
  --font-size-medium: 1.1em;
  --font-size-body: 0.9em;
  --font-size-small: 0.7em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

header {
  padding-top: var(--space-medium);
  padding-bottom: var(--space-medium);
}

header nav {
  display: flex;
  flex-direction: row;
  align-items: last baseline;
  gap: var(--space-small);
}

header h1 {
  font-size: var(--font-size-medium);
  margin-right: auto;
  font-weight: bolder;
}

main {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size-body);
}

main h2 {
  font-size: var(--font-size-large);
}

li {
  margin: var(--space-small) 0;
}

p.colophon {
  font-style: italic;
}

blockquote {
  font-style: italic;
  border-left: 0.25em solid;
  padding-left: 1em;
}

blockquote p, h4 {
  margin: 0.5em 0;
}

div.hero {
  width: 100%;
  max-width: 500px;
  margin: 2em auto;
}

div.badge {
  width: 40%;
  max-width: 200px;
  margin: 2em auto;
}

figure.floating {
  float: right;
  min-width: 120px;
  max-width: 160px;
  text-align: center;
  margin: 0.2em;
}

figure.floating img {
  width: 100%;
}

figure.floating figcaption {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

footer {
  font-size: var(--font-size-small);
  padding-top: var(--space-medium);
  padding-bottom: var(--space-medium);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-small);
}

footer nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-small);
  justify-content: center;
}

@supports (padding: max(0px)) {
  body {
    padding-left: max(var(--space-medium), env(safe-area-inset-left));
    padding-right: max(var(--space-medium), env(safe-area-inset-right));
  }
}
body {
  margin: 0;
  min-height: 100vh;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

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

a {
  color: var(--color-link-light);
}

h1 a {
  color: var(--color-fg-light);
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--color-fg-dark);
    background-color: var(--color-bg-dark);
  }
  a {
    color: var(--color-link-dark);
  }
  h1 a {
    color: var(--color-fg-dark);
  }
}

/*# sourceMappingURL=styles.css.map */