html {
  --vbs-font-family: "Barlow", sans-serif;

  --vbs-font-multiplier: 1.05;

  /* Font sizes */
  --vbs-text-xl: calc(3rem * var(--vbs-font-multiplier, 1));
  --vbs-text-lg: calc(1.7rem * var(--vbs-font-multiplier, 1));
  --vbs-text-md: calc(1.2rem * var(--vbs-font-multiplier, 1));
  --vbs-text: calc(1rem * var(--vbs-font-multiplier, 1));
  --vbs-text-sm: calc(0.8rem * var(--vbs-font-multiplier, 1));
  --vbs-text-xs: calc(0.7rem * var(--vbs-font-multiplier, 1));

  --vbs-text-page-title: var(--vbs-text-xl);
  --vbs-text-navigation: var(--vbs-text);
  --vbs-text-footer: var(--vbs-text-sm);
  --vbs-text-h1: var(--vbs-text-lg);
  --vbs-text-h2: var(--vbs-text-md);
  --vbs-text-h3: var(--vbs-text);

  /* Font weights */
  --vbs-font-weight-light: 300;
  --vbs-font-weight-normal: 400;
  --vbs-font-weight-medium: 500;
  --vbs-font-weight-bold: 700;

  /* Styling Colors */
  --vbs-color-primary: #94003a;
  --vbs-color-primary-dark: #510022;
  --vbs-color-primary-gradient: linear-gradient(
    236deg,
    var(--vbs-color-primary) 0%,
    var(--vbs-color-primary-dark) 100%
  );
  --vbs-color-secondary: #009bc1;
  --vbs-color-secondary-dark: #002244;
  --vbs-color-secondary-gradient: linear-gradient(
    236deg,
    var(--vbs-color-secondary) 0%,
    var(--vbs-color-secondary-dark) 100%
  );

  /* Text Colors */
  --vbs-color-text: #002244;
}

.vbs-image-hero-spacer {
  height: 40px;
}