:root {
  font-size: 25px;
  --ff: 'Ubuntu', sans-serif;
  --ffh: 'Bokor', sans-serif;
  --h1: 3rem/1.2em var(--ffh);
  --h2: 2.25rem/1.2em var(--ffh);
  --h3: 1.5rem/1.2em var(--ffh);
  --h4: 1.12rem/1.6em var(--ffh);
  --h5: 0.8rem/1.6em var(--ffh);
  --h6: 0.75rem/1.8em var(--ffh);
  --big: 1rem/1.6em var(--ff);
  --p: 0.8rem/1.6em var(--ff);
  --small: 0.75rem/1.8em var(--ff);

  --margin-xxs: 0.25rem;
  --margin-xs: 0.5rem;
  --margin-s: 0.75rem;
  --margin-m: 1rem;
  --margin-l: 1.25rem;
  --margin-xl: 1.75rem;
  --margin-xxl: 2.5rem;

  --border-w: 4px;
  --border-r: 1rem;
  --border: var(--border-w) solid;

  --header-height: calc(
    calc(calc(var(--margin-xs) + 4px + calc(var(--margin-xxs) / 2)) * 2) + 1.6em
  );
  --landing-height: calc(100vh - var(--header-height));

  /* bg-colors */
  --bg-darker: oklch(62.363% 0.13577 249.75);
  --bg-dark: oklch(67.363% 0.13577 249.75);
  --bg: oklch(77.363% 0.13577 249.75);
  --bg-light: oklch(87.363% 0.13577 249.75);
  --primary-dark: oklch(72.137% 0.12431 60.808);
  --primary: oklch(82.137% 0.12431 60.808);
  --primary-light: oklch(92.137% 0.12431 60.808);
  /* text-colors */
  --text: oklch(0.15 0 264);
  --text-muted: oklch(0.4 0 264);
  /* shadows */
  /* top highlight, dark shadow, soft shadow; */
  --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
  --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
  --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;
  /* inverse shadows to look recessed */
  --ishadow-s: inset 0 1px 2px #00000070, inset 0 -1px 2px #ffffff30, inset 0 -2px 4px #ffffff15;
  --ishadow-m: inset 0 1px 2px #00000070, inset 0 -2px 4px #ffffff30, inset 0 -4px 8px #ffffff15;
  --ishadow-l: inset 0 1px 2px #00000070, inset 0 -4px 6px #ffffff30, inset 0 -6px 10px #ffffff15;
}

html,
body,
#app {
  height: 100%;
}

body {
  color: var(--text);
  font: var(--p);
  background-color: var(--bg-dark);
}

#app {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

table {
  width: 100%;
  border-spacing: 0;
  font: var(--p);
}

thead,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
}
h1 {
  font: var(--h1);
}
h2 {
  font: var(--h2);
}
h3 {
  font: var(--h3);
}
h4 {
  font: var(--h4);
}
h5 {
  font: var(--h5);
}
h6 {
  font: var(--h6);
}
.big {
  color: var(--text);
  font: var(--big);
}
p {
  font: var(--p);
}
.small {
  color: var(--text-muted);
  font: var(--small);
}
a {
  color: var(--text);
}

button {
  color: var(--text);
  background-color: var(--bg-light);
  border: none;
  border-radius: var(--border-r);
  box-shadow: var(--shadow-s);
}
button:hover {
  box-shadow: var(--shadow-m);
  cursor: pointer;
}

.icon-button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  text-align: center;
}

.shadow-s {
  box-shadow: var(--shadow-s);
}
.shadow-m {
  box-shadow: var(--shadow-m);
}
.shadow-l {
  box-shadow: var(--shadow-l);
}

.ishadow-s {
  box-shadow: var(--ishadow-s);
}
.ishadow-m {
  box-shadow: var(--ishadow-m);
}
.ishadow-l {
  box-shadow: var(--ishadow-l);
}

@media only screen and (max-width: 600px) {
  main {
    margin: 0;
  }
}