[data-theme="dark"] {
  color-scheme: dark;
  --color-fg: #f0f0f0;
  --color-bg: #252526;
  --color-bg-highlight: #454546;
  --color-link: #007acc;
  --color-selected: #8f8f00;
  --color-sep: #afafaf;
}

[data-theme="light"] {
  color-scheme: light;
  --color-fg: #000000;
  --color-bg: #ffffff;
  --color-bg-highlight: #f0f0f0;
  --color-link: #005ccc;
  --color-selected: #fff000;
  --color-sep: #9f9f9f;
}

[data-theme="dracula"] {
  color-scheme: light;
  --color-fg: #f8f8f2;
  --color-bg: #282a36;
  --color-bg-highlight: #44475a;
  --color-link: #8be9fd;
  --color-selected: #44475a;
  --color-sep: #6272a4;
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  padding: 1vh 0 1vh 1vw;
  color: var(--color-fg);
  background-color: var(--color-bg);
}

div {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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