/* Global */
@media all {
  /* Sizes */
  :root {
    --asfun-size-global-container-max-width: 1200px;
    --asfun-size-global-column-max_width: 500px;
    --asfun-padding-container-large: 1rem; /* Overwritten */
    --asfun-padding-container-small: 1rem; /* Overwritten */
  }

  /* Colors */
  :root {
    --asfun-color-grey-1: #333;
    --asfun-color-grey-2: #00000029;
    --asfun-color-grey-3: #808080;
    --asfun-color-grey-4: #f9f9f9;
    --asfun-color-grey-5: #767676;
    --asfun-color-grey-6: #ababab;
    --asfun-color-1-1: #7e2429;
    --asfun-color-1-2: #c2171d;
    --asfun-color-2-1: #efebd9;
    --asfun-color-3-1: #00C062;
    --asfun-color-4-1: #0998E8;
  }

  /* Font families */
  :root {
    --asfun-font-family-1: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
    --asfun-font-family-2: Arial, "Helvetica Neue", helvetica, sans-serif;
  }

  /* Font sizes */
  :root {
    --asfun-font-size-header-1: 1rem; /* Overwritten */
    --asfun-font-size-header-2: 1rem; /* Overwritten */
    --asfun-font-size-nav-1: 14px;
    --asfun-font-size-title-1: 1rem; /* Overwritten */
    --asfun-font-size-title-2: 1rem; /* Overwritten */
    --asfun-font-size-title-3: 1rem; /* Overwritten */
    --asfun-font-size-body-1: 1rem; /* Overwritten */
    --asfun-font-size-input-1: 1rem; /* Overwritten */
    --asfun-font-size-footer-1: 1rem; /* Overwritten */
    --asfun-font-size-footer-2: 12px;
  }

  /* Borders */
  :root {
    --asfun-border-1: 1px solid var(--asfun-color-grey-2);
    --asfun-border-radius-large: 8px;
    --asfun-border-radius-small: 4px;
  }

  /* Shadows */
  :root {
    --asfun-shadow-color-1: var(--asfun-color-grey-2);
    --asfun-shadow-small: 0 0 4px 0 var(--asfun-shadow-color-1);
  }
}


/* > 960px */
@media screen and (min-width: 961px) {
  /* Sizes */
  :root {
    --asfun-padding-container-large: 40px;
    --asfun-padding-container-small: 20px;
  }
  /* Font sizes */
  :root {
    --asfun-font-size-header-1: 36px;
    --asfun-font-size-header-2: 16px;
    --asfun-font-size-title-1: 26px;
    --asfun-font-size-title-2: 14px;
    --asfun-font-size-title-3: 20px;
    --asfun-font-size-body-1: 16px;
    --asfun-font-size-input-1: 14px;
    --asfun-font-size-footer-1: 20px;
  }
}


/* <= 960px */
@media screen and (max-width: 960px) {
  /* Sizes */
  :root {
    --asfun-padding-container-large: 20px;
    --asfun-padding-container-small: 20px;
  }
  /* Font sizes */
  :root {
    --asfun-font-size-header-1: 36px;
    --asfun-font-size-header-2: 16px;
    --asfun-font-size-title-1: 26px;
    --asfun-font-size-title-2: 14px;
    --asfun-font-size-title-3: 20px;
    --asfun-font-size-body-1: 16px;
    --asfun-font-size-input-1: 14px;
    --asfun-font-size-footer-1: 20px;
  }
}


/* <= 782px */
@media screen and (max-width: 782px) {
  /* Sizes */
  :root {
    --asfun-padding-container-large: 10px;
    --asfun-padding-container-small: 10px;
  }
  /* Font sizes */
  :root {
    --asfun-font-size-header-1: 24px;
    --asfun-font-size-header-2: 13px;
    --asfun-font-size-title-1: 20px;
    --asfun-font-size-title-2: 15px;
    --asfun-font-size-title-3: 18px;
    --asfun-font-size-body-1: 14px;
    --asfun-font-size-input-1: 14px;
    --asfun-font-size-footer-1: 15px;
  }
}


/* <= 400px */
@media screen and (max-width: 400px) {}
