:root {
  --color-fg: black;
  --color-bg: #dcdcdc;
  --color-link-fg: #ff3366;
  --color-link-hover-bg: black;

  --spacing-xxs: 8px;
  --spacing-xs: 10px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 80px;

  --font-family: sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 16px;

  --max-width: 600px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #dcdcdc;
    --color-bg: #191919;
    --color-link-hover-bg: #dcdcdc;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-fg);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

main {
  padding: var(--spacing-md);
}

h1,
h2,
h3 {
  margin: var(--spacing-md) 0;
}

iframe,
ul,
p {
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

ul {
  padding-left: var(--spacing-md);
}

a {
  text-decoration: none;
  color: var(--color-link-fg);
  font-weight: bold;
}

a:hover {
  background: var(--color-link-hover-bg);
  color: var(--color-bg);
}

img {
  max-width: 100%;
}

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

section {
  max-width: var(--max-width);
}