@import url("/static/normalize.css");
@import url("/static/fonts.css");

:root {
  /* Fonts */
  /* TODO: Font stack for sans-serif */
  --sans-serif: "Source Sans 3", "Open Sans", sans-serif;
  --handwritten: "Playpen Sans", "Comic Sans MS", sans-serif;
  --monospace: "Source Code Pro", monospace;

  font-size: 16px;

  --base: oklch(0.68 0.16 240);
  --step: 35;
  --c0: oklch(from var(--base) l c h);
  --c1: oklch(from var(--c0) l c calc(h - var(--step)));
  --c2: oklch(from var(--c1) l c calc(h - var(--step)));
  --c3: oklch(from var(--c2) l c calc(h - var(--step)));
  --c4: oklch(from var(--c3) calc(l + 0.1) c calc(h - var(--step) - 15));
  --c5: oklch(from var(--c4) calc(l - 0.1) c calc(h - var(--step) + 15));
  --c6: oklch(from var(--c5) l c calc(h - var(--step)));
  --c7: oklch(from var(--c6) l c calc(h - var(--step)));
  --c8: oklch(from var(--c7) l c calc(h - var(--step)));
}

body {
  font-family: var(--sans-serif);
  margin: 1rem;
}

td:has(.pill) {
  line-height: 2;
}
th {
  text-align: right;
}
th::after {
  content: ":";
}
.pill {
  color: white;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 14px;
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-weight: bold;
}
.pill.c0 {
  background-color: var(--c0);
}
.pill.c1 {
  background-color: var(--c1);
}
.pill.c2{
  background-color: var(--c2);
}
.pill.c3 {
  background-color: var(--c3);
}
.pill.c4 {
  background-color: var(--c4);
}
.pill.c5 {
  background-color: var(--c5);
}
.pill.c6 {
  background-color: var(--c6);
}
.pill.c7 {
  background-color: var(--c7);
}
.pill.c8 {
  background-color: var(--c8);
}