style.css

:root {
  --primary: #666000;
  --on-primary: #ffffff;
  --primary-container: #efe750;
  --on-primary-container: #1e1c00;
  --secondary: #626042;
  --on-secondary: #ffffff;
  --secondary-container: #e9e4be;
  --on-secondary-container: #1d1c05;
  --tertiary: #3e6654;
  --on-tertiary: #ffffff;
  --tertiary-container: #c1ecd6;
  --on-tertiary-container: #002115;
  --error: #ba1b1b;
  --error-container: #ffdad4;
  --on-error: #ffffff;
  --on-error-container: #410001;
  --background: #fffcf3;
  --on-background: #1c1c16;
  --surface: #fffcf3;
  --on-surface: #1c1c16;
  --surface-variant: #e7e3d1;
  --on-surface-variant: #49473a;
  --outline: #797768;
  --inverse-on-surface: #f4f0e7;
  --inverse-surface: #31302b;
  --overlay: rgba(0, 0, 0, 0.5);
  --active: rgba(0, 0, 0, 0.1);
}

#chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.invisible {
  display: none !important;
}

article {
  max-width: 768rem;
  margin: auto;
}

input[disabled] {
  cursor: auto;
}

#file-icon,
#loader {
  display: block;
  font-size: 192rem;
  width: 192rem;
  margin: auto;
}

#loader {
  height: 192rem;
}

.toast {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.link {
  vertical-align: baseline;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #d2cb36;
    --on-primary: #353200;
    --primary-container: #4c4800;
    --on-primary-container: #efe750;
    --secondary: #ccc8a4;
    --on-secondary: #333118;
    --secondary-container: #4a482c;
    --on-secondary-container: #e9e4be;
    --tertiary: #a5d0ba;
    --on-tertiary: #0d3728;
    --tertiary-container: #274e3e;
    --on-tertiary-container: #c1ecd6;
    --error: #ffb4a9;
    --error-container: #930006;
    --on-error: #680003;
    --on-error-container: #ffdad4;
    --background: #1c1c16;
    --on-background: #e6e2da;
    --surface: #1c1c16;
    --on-surface: #e6e2da;
    --surface-variant: #49473a;
    --on-surface-variant: #cac7b5;
    --outline: #949181;
    --inverse-on-surface: #1c1c16;
    --inverse-surface: #e6e2da;
    --overlay: rgba(0, 0, 0, 0.5);
    --active: rgba(255, 255, 255, 0.2);
  }
}