:root {
  --color-primary: #1c1cccff;
  --color-primary-dark: #1b1b81ff;
  --color-light: #5f5fe7ff;
  --light: #fefefe;
  --dark: #222222;
  --fore: var(--dark);
  --back: var(--light);
  color-scheme: light dark;

  --gray-100: color-mix(in oklab, var(--fore) 5%, var(--back) 95%);
  --gray-200: color-mix(in oklab, var(--fore) 20%, var(--back) 80%);
  --gray-600: color-mix(in oklab, var(--fore) 40%, var(--back) 60%);
  --gray-800: color-mix(in oklab, var(--fore) 90%, var(--back) 10%);

  --text--2: clamp(0.69rem, 0.71rem + -0.08vw, 0.63rem);
  --text--1: clamp(0.83rem, 0.83rem + 0.01vw, 0.84rem);
  --text-0: clamp(1rem, 0.97rem + 0.17vw, 1.13rem);
  --text-1: clamp(1.2rem, 1.12rem + 0.41vw, 1.5rem);
  --text-2: clamp(1.44rem, 1.29rem + 0.76vw, 2rem);
  --text-3: clamp(1.73rem, 1.47rem + 1.27vw, 2.66rem);
  --text-4: clamp(2.07rem, 1.67rem + 2vw, 3.55rem);
  --text-5: clamp(2.49rem, 1.88rem + 3.05vw, 4.74rem);

  font-family: 'Josefin Sans', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fore: var(--light);
    --back: var(--dark);
  }
}

body {
  font-size: var(--text-0);
  font-weight: normal;
  line-height: 1;
  text-rendering: optimizeSpeed;

  display: flex;
  flex-flow: row nowrap;
}

nav-bar {
  flex: 0 0 clamp(7rem, 4rem + 8vw, 12rem);
}

body>div {
  flex: 1 1 auto;
  max-width: 1200px;
  margin: 0 2rem;
}

.icon {
  width: 1.6em;
  height: 1.6em;
  vertical-align: -0.4em;
  display: inline;
}

.icon.small {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.1em;
}

.icon.ok {
  color: oklab(0.561952 -0.138091 0.105979);
}

.icon.warning {
  color: oklab(0.691654 0.0392715 0.130626);
}

.icon.unimportant {
  color: var(--gray-600);
}

@supports (background-color: color-mix(in oklab, red 50%, blue 50%)) {
  .icon.ok {
    color: color-mix(in oklab, #00aa00 80%, var(--fore) 20%);
  }

  .icon.warning {
    color: color-mix(in oklab, #ffaa00 80%, var(--fore) 20%);
  }
}

a {
  color: var(--gray-800);
  text-decoration: underline;
}

.pending {
  color: var(--gray-800);
  font-style: italic;
}

button {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.25rem;
  background-color: var(--back);
  color: var(--fore);
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--text-0);
}

button.secondary {
  border-color: var(--gray-600);
}

button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}