body > div {
  /* theme */
  --primary: #9ccaff;
  --on-primary: #00325a;
  --primary-container: #00497f;
  --on-primary-container: #d0e4ff;
  --secondary: #bbc8db;
  --on-secondary: #253140;
  --secondary-container: #3c4858;
  --on-secondary-container: #d6e3f7;
  --tertiary: #d6bee4;
  --on-tertiary: #3b2948;
  --tertiary-container: #523f5f;
  --on-tertiary-container: #f3daff;
  --error: #ffb4a9;
  --error-container: #930006;
  --on-error: #680003;
  --on-error-container: #ffdad4;
  --background: #1b1b1b;
  --on-background: #e2e2e6;
  --surface: #1b1b1b;
  --on-surface: #e2e2e6;
  --surface-variant: #42474e;
  --on-surface-variant: #c3c7d0;
  --outline: #8d9199;
  --inverse-on-surface: #1b1b1b;
  --inverse-surface: #e2e2e6;
  --overlay: rgba(0, 0, 0, 0.5);
  --active: rgba(255, 255, 255, 0.2);

  /* for no-club */
  --primary-no-club: var(--primary);
  --on-primary-no-club: var(--on-primary);
  --secondary-no-club: var(--secondary);
  --on-secondary-no-club: var(--on-secondary);
}

.no-club {
  --primary: var(--primary-no-club);
  --on-primary: var(--on-primary-no-club);
  --secondary: var(--secondary-no-club);
  --on-secondary: var(--on-secondary-no-club);
}

.Gladiators {
  --primary: #004a1f;
  --on-primary: whitesmoke;
  --secondary: #d27405;
  --on-secondary: #2f3436;
}

.Parabool {
  --primary: #583e8d;
  --on-primary: whitesmoke;
  --secondary: #625b71;
  --on-secondary: white;
}

.Calamari {
  --primary: #fe0;
  --on-primary: #000;
  --secondary: #fc0;
  --on-secondary: #000;
}