@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Style */
  --my-headline-font: 'Montserrat';
  --my-plain-font: system-ui;

  --footer-text: 0.625rem;
  --caption-text: 0.75rem;
  --button-text: 0.875rem;
  --default-text: 1rem;
  --headline-text: 1.125rem;
  --title-text: 2rem;
  --default-border-radius: 4px;

  --line-height: 1.6;

  --body-background-color: #f4f4f9;
  --form-background-color: #fff;
  --text-color: #333;
  --impressum-text-color: #585858;

  --brand-color: #55a532;

  /* Related to @material/web/all.js */

  --md-sys-color-primary: var(--brand-color);

  /* select boxes */
  --md-outlined-select-text-field-outline-color: var(--text-color);
  --md-outlined-select-text-field-input-text-color: var(--text-color);
  --md-outlined-select-text-field-input-text-font: var(--my-plain-font);

  /* text field */
  --md-outlined-text-field-label-text-color: var(--text-color);
  --md-outlined-text-field-input-text-color: var(--text-color);
  --md-outlined-text-field-input-text-font: var(--my-plain-font);
  /* buttons */
  /* --md-sys-color-secondary-container: var(--text-color); */
  --md-filled-button-container-shape: 4px;
  --md-filled-tonal-button-container-shape: 4px;
}