html {
    font-family: system-ui;
    color-scheme: light dark;

    --background: Canvas;
    --accent-primary: color-mix(in hsl, var(--background), grey 20%);
    --accent-secondary: color-mix(in hsl, var(--background), grey 10%);

    --preferred-single-column-width: 100ch;
}

input, select, button {
  font-family: inherit;
}

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

body {
    height: 100vh;
}

.big-button {
    height: 3em;
    font-size: large;
}

h1 {
  text-align: center;
  display: grid;
  place-content: center;
  padding-top: 1rem;
}

.sidebar > li {
  list-style: none;
  font-size: large;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  grid-row: 2 / -1;
}

.sidebar > li > a {
  padding: 1em 2em;
  display: block;
  text-decoration: none;
  color: currentColor;
  transition: background-color 100ms;
}

.sidebar > li > a[data-selected="True"] {
  background-color: var(--background);
}

.sidebar,.sidebar-spacer {
  background-color: var(--accent-primary);
}

.sidebar > li > a:not([data-selected="True"]):hover {
  background-color: var(--accent-secondary)
}

.sidebar-spacer {
  background-image: url('/static/icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}