:root {
  /* Colors */
  --header-background: hsla(0, 0%, 10.59%, 1);
  --header-text-color: hsla(0, 0%, 100%, 1);
  --background-color: hsla(0, 0%, 100%, 1);
  --text-color-light: hsla(0, 0%, 100%, 1);
  --border-color: hsla(0, 0%, 96.47%, 1);
  --text-color: hsla(0, 0%, 0%, 1);
  --subtitle-text-color: hsla(22.5, 8.6%, 36.47%, 1);
  --feature-title-text-color: hsla(23.16, 55.34%, 20.2%, 1);
  --button-border-color:hsla(0, 0%, 0%, 1);
  --box-shadow-color: hsla(0, 0%, 0%, 0.08);
  --button-background-color-dark:  hsla(0, 0%, 21%, 1);
  --button-box-shadow: hsla(0, 0.92%, 78.63%, 1);
  --button-background-color-light: hsla(180, 11.11%, 98.24%, 1);
  --text-color-accent: hsla(22.81, 71.6%, 33.14%, 1);
  --navigation-link-hover-color: hsla(27.16, 95%, 60.78%, 1);
  --card-border-color: hsla(0, 0%, 94%, 1);
  --card-text-color: hsla(22.5, 8.6%, 36.47%, 1);
  --dropdown-background-color: hsla(0, 0%, 98%, 1);
  --dropdown-box-shadow-color: hsla(0, 0%, 0%, 0.08);
  --footer-background-color: hsla(0, 7.69%, 97.45%, 1);
  --footer-border-color: hsla(0, 0%, 74%, 1);
  --pagination-background-color: hsla(22.81, 71.6%, 33.14%, 1);
  --pagination-bullet-background-color: hsla(46.67, 18%, 80.39%, 1);
  --header-border-color: hsla(270, 8%, 90.2%, 1);
  --integration-hover-background-color: hsla(0, 0%, 94%, 1);
  --timeline-dot-border-color: hsla(217.5, 14.81%, 89.41%, 1);
  --timeline-background-color: hsla(217.5, 14.81%, 89.41%, 1);

  /* Font Size */
  --font-size-base: calc(16 / 16 * 1rem);
  --font-size-h1: calc(72 / 16 * 1rem);
  --font-size-h2: calc(52 / 16 * 1rem);
  --font-size-h3: calc(45 / 16 * 1rem);
  --font-size-h4: calc(36 / 16 * 1rem);
  --font-size-h4-s: calc(32 / 16 * 1rem);
  --font-size-h5: calc(28 / 16 * 1rem);
  --font-size-h6: calc(24 / 16 * 1rem);
  --font-size-h7: calc(18 / 16 * 1rem);
  --font-size-h8: calc(14 / 16 * 1rem);
  --font-size-h8-s: calc(12 / 16 * 1rem);
  --font-size-h7-mega: calc(21 / 16 * 1rem);
  --font-size-testimonial: calc(21 / 16 * 1rem);

  /* Line Height (line-height/font-size) */
  --line-height-base: calc(24 / 16);
  --line-height-base-l: calc(33 / 16);
  --line-height-h1: calc(80 / 72);
  --line-height-h2: calc(65 / 52);
  --line-height-h3: calc(52 / 45);
  --line-height-h4: calc(42 / 36);
  --line-height-h4-s: calc(36 / 32);
  --line-height-h5: calc(35 / 28);
  --line-height-h6: calc(32 / 24);
  --line-height-h6-mega: calc(40 / 24);
  --line-height-h7: calc(36 / 18);
  --line-height-h7-s: calc(28 / 18);
  --line-height-h7-xs: calc(24 / 18);
  --line-height-h7-mega: calc(24 / 21);
  --line-height-h8: calc(21 / 14);
  --line-height-h8-s: calc(16 / 12);
  --line-height-testimonial: calc(28 / 21);

  /* Font family */
  --font-family-primary:  'Source Sans 3', sans-serif;
  --font-family-code: 'IBM Plex Mono', sans-serif;

  --layout-content-width: 1200px;
}