/**
 * Automatic version:
 * Uses light theme by default but switches to dark theme
 * if a system-wide theme preference is set on the user's device.
 */

:root {
  color-scheme: light dark;
  --primary: light-dark(#e2e2e2, #1d1d1d);
  --radius: 5px;
  --radius-xs: 3px;
  --max-width-body: 1000px;
  --background: light-dark(#fefefe, #121212);
  --font-size: 18px;
  --border: light-dark(#e2e2e2, #303030);
  --links: light-dark(#840023, #ff1755);
  --padding-md: 1.2rem;
  --code: light-dark(#158002, #ff1755);
  --padding-sm: 0.5rem;
  --background-alt: light-dark(#e2e2e2, #1d1d1d);
  --text: light-dark(#1b1b1b, #e9e9e9);
  --text-muted: light-dark(#1b1b1bb9, #e9e9e9cf);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: var(--font-size);
  color: var(--text);
  max-width: var(--max-width-body);
  margin: 0 auto;
  background-color: var(--background);
  padding: var(--padding-md);
  line-height: 1.5;
}
a {
  color: var(--links);
  text-decoration: none;
  border-bottom: 2px dashed var(--links);
  transition: all 0.2s ease;
}

a:hover {
  border-bottom-style: solid;
}

button {
  background: var(--background-alt);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: filter 0.2s ease;
}
button:hover,
.button:hover {
  filter: brightness(1.3);
}

code,
pre {
  background: var(--background-alt);
  color: var(--code);
  font-family: "Courier New", Courier, monospace;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  overflow-x: scroll;
}

input,
textarea {
  padding: var(--padding-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: inherit;
  display: block;
  width: 100%;
  margin: 0.1rem 0;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--links);
}
input::placeholder {
  color: var(--text-muted);
}

label {
  display: block;
  margin-bottom: 0.2rem;
}