:root { 
  --accent---sweet-corn: #f8d57e;
  --black: #000000;
  --cta---aqua-squeeze: #e5f4f2;
  --cta---observatory: #009379;
  --neutral---mine-shaft: #2d2d2d;
  --neutral---zircon: #f8f9ff;
  --onboarding-background-grey: #2d2d2d;
  --white: #ffffff;
  --zircon: #f7f9ff;
 
  --font-size-38px: 38px;
  --font-size-67px: 67px;
  --font-size-l: 28px;
  --font-size-m: 21px;
  --font-size-s: 20px;
  --font-size-xl: 50px;
  --font-size-xs: 18px;
  --font-size-xxs: 16px;
  --font-size-xxxs: 14px;
 
  --font-family-mulish: "Mulish", Helvetica;
  --font-family-poppins: "Poppins", Helvetica;
}
.display-xl {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-67px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1.68px;
}

.display-l {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1px;
}

.display-m {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-38px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.76px;
}

.display-s {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.28px;
}

.display-xs {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xss);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.display-xss {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.body-l {
  font-family: var(--font-family-mulish);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.body-m {
  font-family: var(--font-family-mulish);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.body-s {
  font-family: var(--font-family-mulish);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.poppins-semi-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 600;
}

.mulish-normal-thunder-20px {
  color: var(--neutral---mine-shaft);
  font-family: var(--font-family-mulish);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}