@font-face {
  font-family: "Montserrat";
  src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}

:root {
  --font-family: "Montserrat", sans-serif;

  --background-color: #FFFFFF;
  --highlight-color: #F3F3F3;
  --foreground-color: #000000;
  --secondary-color: #004E8E;
  --paragraph-color: #051C2E;
  --warning-color: #FF5800;
  --error-color: #B22222;

  --border-radius: 4px;
  --box-shadow: 0px 3px 8px -2px #C7C7C7;
  
  --font-size-h1: 32px;
  --font-size-h2: 28px;
  --font-size-p: 16px;
  --font-size-button: 18px;
  --font-size-dropdown: 14px;

  --font-weight-h1: 600;
  --font-weight-h2: 600;
  --font-weight-p: 400;
  --font-weight-button: 700;

  --header-height: 60px;

  --main-content-width: calc(min(75%, 1000px));

  --container-padding: 1rem 0rem;
  --container-actions-margin: 2rem 0;

  --button-padding: .75rem 1.25rem;

  --notification-width: 80%;
  --notification-padding: .1rem 1rem;
  --notification-margin: 2rem 0;
  --notification-border-width: 1px 1px 1px 14px;
  --notification-shadow: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  --error-notification-border-color: var(--error-color);
  --warning-notification-border-color: var(--warning-color);

  --clarification-max-width: 66%;

  --footer-height: calc(var(--header-height) * 2);
  --footer-foreground-color: var(--background-color);
  --footer-background-color: var(--foreground-color);
  --footer-margin: 2rem;
}