body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  margin: 0;
  padding: 2rem;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  max-width: none;
}

div.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 32rem;
  min-height: 100%;
  width: 100%;
}

footer {
  margin-top: 2rem;
}

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

:root[data-theme="light"] {
  --background-body: #fff;
  --background: #efefef;
  --background-alt: #f7f7f7;
  --selection: #9e9e9e;
  --text-main: #363636;
  --text-bright: #000;
  --text-muted: #70777f;
  --links: #0076d1;
  --focus: #0096bfab;
  --border: #dbdbdb;
  --code: #000;
  --button-base: #d0cfcf;
  --button-hover: #9b9b9b;
  --scrollbar-thumb: rgb(170, 170, 170);
  --scrollbar-thumb-hover: var(--button-hover);
  --form-placeholder: #949494;
  --form-text: #1d1d1d;
  --variable: #39a33c;
  --highlight: #ff0;
  --text-dim: #b0b0b0;
}

:root[data-theme="dark"] {
  --background-body: #1a1d23;
  --background: #121418;
  --background-alt: #1c1f26;
  --selection: #1c76c5;
  --text-main: #dbdbdb;
  --text-bright: #fff;
  --text-muted: #a9b1ba;
  --links: #41adff;
  --focus: #0096bfab;
  --border: #2d3139;
  --code: #ffbe85;
  --button-base: #0d0f13;
  --button-hover: #090a0d;
  --scrollbar-thumb: var(--button-hover);
  --scrollbar-thumb-hover: rgb(0, 0, 0);
  --form-placeholder: #a9a9a9;
  --form-text: #fff;
  --variable: #d941e2;
  --highlight: #efdb43;
  --text-dim: #5a5e66;
}

#theme-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

#theme-toggle:hover {
  color: var(--text-main);
}