body {
  display: block;
  margin: 0px;

  --app-drawer-width: 256px;

  --app-primary-color:  #2b618e;
  --app-secondary-color: #a00;
  --app-dark-text-color: var(#333333);
  --app-light-text-color: white;
  --app-section-even-color: #e7e7e7;
  --app-section-odd-color: white;

  --app-header-background-color: var(--app-section-even-color);
  --app-header-text-color: var(--app-light-text-color);
  --app-header-selected-color: #70B070;

  --app-drawer-background-color: var(--app-secondary-color);
  --app-drawer-text-color: var(--app-light-text-color);
  --app-drawer-selected-color: #78909C;

  --paper-tabs-selection-bar-color: var(--app-section-odd-color);

  --md-sys-color-primary: var(--app-primary-color);
  --md-sys-color-secondary: var(--app-secondary-color);
  --md-sys-color-secondary-container: var(--app-section-even-color);
  --md-sys-color-surface: var(--app-section-odd-color);

  --md-primary-tab-container-color: var(--app-section-odd-color);

  --my-brand-font: 'Open Sans';
  --my-headline-font: 'Montserrat';
  --my-title-font: 'Montserrat';
  --my-plain-font: system-ui;

  --md-ref-typeface-brand: var(--my-brand-font);
  --md-ref-typeface-plain: var(--my-plain-font);

  --md-sys-typescale-headline-font: var(--my-headline-font);
  --md-sys-typescale-title-font: var(--my-title-font);
}