body {

  /*
   Font sizes based on vertical rhythm of:
   - Font size: 16px;
   - Scale factor: 1.303
   - Details: https://www.gridlover.net/try
 */
  --font-size: 1rem;
  --font-size-smallest: calc(var(--font-size) * 0.3);
  --font-size-smaller: calc(var(--font-size) * 0.5);
  --font-size-small: calc(var(--font-size) * 0.875);
  --font-size-medium: calc(var(--font-size) * 1);
  --font-size-default: calc(var(--font-size) * 1.25);
  --font-size-large: calc(var(--font-size) * 1.5);
  --font-size-larger: calc(var(--font-size) * 2);
  --font-size-largest: calc(var(--font-size) * 2.5);
  --font-size-body: calc(var(--font-size) * 1.25);
  --font-size-summary: calc(var(--font-size) * 1.1875);
  --font-size-banner-title: calc(var(--font-size) * 1.3125);
  --font-size-banner-description: calc(var(--font-size) * 1.0625);
  --font-size-h1: clamp(var(--font-size-large), 10vw, var(--font-size-larger));
  --font-size-h2: clamp(calc(var(--font-size) * 1.4), 8vw, calc(var(--font-size) * 1.6875));
  --font-size-h3: clamp(var(--font-size-medium), 6vw, calc(var(--font-size) * 1.3125));
  --font-size-h4: calc(var(--font-size) * 1.1875);
  --font-size-pub-content: calc(var(--font-size) * 1.125);

  --font-primary: "Lexend", "Open Sans", "Helvetica Neue", sans-serif;
  --font-secondary: var(--font-primary);
  --color-accent: #482682;
  --color-accent-hover: #297e85;
  --color-section-header-bg: var(--color-accent);
  --color-yellow: #F9DE4B;
  --border-width: 3px;
  --border-color: var(--header-services-button-border-color);
  --border: var(--border-width) var(--border-style) var(--border-color);
  --color-grey-dark: #383838;
  --color-info: #359DA5;
  --color-danger: #482682;
  --color-success: #3D8826;
  --color-sub-page-bg: rgba(255, 255, 255, 0.87);
  --color-sub-page-accent: #205632;
  --color-sub-theme-accent: #E64879;
  --color-sub-theme-accent--hover: #F39200;
  --color-publication-breadcrumb-bg: #F2F0F6;
  --color-publication-pager-border: #D1C9E0;
  --color-publication-contents-active: #F9D1DD;
  --color-sub-theme-accent-opacity: rgba(230, 72, 121, 0.2);

  /* Header Items */
  --section-spacing-vertical-header: var(--spacing);
  --header-link-color: var(--color-black);
  --header-services-button-border: 0;
  --header-services-button-border-color: var(--color-black);
  --header-services-button-color: var(--color-white);
  --header-services-button-bg-color: transparent;
  --header-services-button-color-hover: var(--color-black);
  --header-services-button-bg-color-hover: var(--color-yellow);
  --header-search-button-color: var(--color-black);
  --header-search-button-bg-color-hover: var(--color-black);
  --header-search-input-border: none;
  --border-radius: var(--spacing-smallest);
  --banner-content-border-radius: 50px;
  --banner-content-bg-color: rgba(72, 38, 130, 0.86);
  --banner-content-text-color: var(--color-white);
  --banner-content-width: 700px;
  --banner-subtitle-size: var(--font-size-largest);
  --banner-title-size: var(--font-size-largest);
  --header-logo-width: 250px;
  --header-logo-mobile-width: 140px;
  --color-section-header-bg-mobile: #359DA5;
  --banner-secondary-content-bg-color: var(--color-sub-page-bg);

  --box-link-border-radius: 1rem;
  --box-link-background-color: var(--color-white);
  --box-link-background-color--no-bg: var(--color-accent);
  --color-page-section-background-color-2: #6275BA;
  --btn-start-border-color: var(--color-white);
  --btn-start-border-color--no-bg: var(--color-accent);
  --btn-start-bg-color: transparent;
  --btn-start-padding-vertical: 20px;
  --btn-start-padding-horizontal: 40px;
  --btn-start-bg-color-hover: var(--color-accent);
  --btn-start-bg-color-hover--no-bg: var(--color-white);
  --btn-start-icon: url('../../assets/icons/arrow_forward_outline.svg');
  --btn-start-icon--no-bg: url('../../assets/icons/list-arrow.svg');
  --color-page-section-background-color-3: #D63566;
  --color-page-section-background-color-3-text-color: var(--color-white);
  --breadcrumbs-border: var(--border-width) var(--border-style) var(--color-white);
  --color--black: #000; /* Black */

  --step-by-step-relationship-border-color: rgba(220, 220, 220, 0.27);
  --teaser-featured-background--color: rgba(98, 117, 186, 0.16);

  --transition-time: 0.15s;

  --button-radius: 12px;

  /* New wysiwyg styles */
  --border-xlarge: 11px;
  --color-accent-light-callout: #d8dcee;
  --color-accent-light-secondary: #d3e7d4;

}
/*
  @file This is our file to create the variables that will be used across the theme.

  To override these in your sub-theme, just create a new variables.css file and
  library, and add that to your theme.info.yml file.

  We are adding these to body instead of :root so we can more easily override
  them in the future. For example if we create a theme setting to add an inline
  style for --color-accent: red;, or if we used JS to add it to the body element.
*/