body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --text-md-regular: Inter;
  --font-roboto-slab: "Roboto Slab";

  /* font sizes */
  --text-md-regular-size: 16px;
  --text-sm-medium-size: 14px;
  --text-xl-regular-size: 20px;
  --text-lg-semibold-size: 18px;
  --display-xl-semibold-size: 60px;
  --display-md-semibold-size: 36px;

  /* Colors */
  --colors-background-bg-primary: #fff;
  --colors-border-border-secondary: #e9eaeb;
  --colors-text-text-quaternary-500: #717680;
  --component-colors-components-buttons-primary-button-primary-bg: #1281b7;
  --component-colors-utility-brand-utility-brand-700: #106694;
  --colors-background-bg-brand-section: #11577b;
  --colors-background-bg-secondary: #fafafa;
  --gray-light-mode-900: #181d27;
  --gradient-skeuemorphic-gradient-border: rgba(255, 255, 255, 0.12);
  --colors-border-border-primary: #d5d7da;
  --color-dimgray-100: #666;
  --colors-text-text-tertiary-600: #535862;
  --component-colors-utility-brand-utility-brand-50: #f1f9fe;
  --component-colors-utility-brand-utility-brand-200: #c0e5f7;
  --colors-text-text-brand-primary-900: #12415b;

  /* Spacing */
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --container-padding-desktop: 32px;
  --container-max-width-desktop: 1280px;
  --spacing-4xl: 32px;
  --spacing-xl: 16px;
  --radius-md: 8px;
  --spacing-sm: 6px;
  --spacing-xxs: 2px;
  --spacing-md: 8px;
  --width-md: 560px;
  --spacing-9xl: 96px;
  --spacing-2xl: 20px;
  --spacing-lg: 12px;
  --width-xl: 768px;
  --spacing-xs: 4px;
  --radius-full: 9999px;
  --spacing-9xl1: 96px;
  --radius-2xl: 16px;
  --radius-lg: 10px;
  --spacing-3xl: 24px;
  --spacing-11xl: 160px;
  --width-2xl: 1024px;

  /* Gaps */
  --gap-45xl: 64px;
  --gap-13xl: 32px;
  --gap-base: 16px;
  --gap-7xs: 6px;
  --gap-5xs: 8px;
  --gap-3xs: 10px;
  --gap-xs: 12px;
  --gap-xl: 20px;
  --gap-77xl: 96px;

  /* Paddings */
  --padding-45xl: 64px;
  --padding-13xl: 32px;
  --padding-3xs: 10px;
  --padding-base: 16px;
  --padding-11xs: 2px;
  --padding-77xl: 96px;

  /* Border radiuses */
  --br-5xs: 8px;
  --br-base: 16px;
  --br-3xs: 10px;

  /* Effects */
  --shadows-shadow-xs-skeuomorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
    0px -2px 0px rgba(10, 13, 18, 0.05) inset,
    0px 1px 2px rgba(10, 13, 18, 0.05);
  --shadows-shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
}