:root { 
  --bg-color: #151e1c;
  --black: #00000000;
  --black06: #0f0f0f;
  --brand-color: #29cea1;
  --eerie-black: #151e1c80;
  --gneutral0: #000000;
  --neutral0: #000000;
  --neutral80: #c9c6c5;
  --shark: #262626;
  --tone50: #679689;
  --tone60: #748b85;
  --tone70: #808080;
  --white: #daf2eb;
  --x80: #0a3328;
 
  --font-size-28px: 28px;
  --font-size-36px: 36px;
  --font-size-45px: 45px;
  --font-size-64px: 64px;
  --font-size-l: 18px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 20px;
  --font-size-xs: 12px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 32px;
 
  --font-family-roboto: "Roboto", Helvetica;
}
.textdisplaylarge {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-64px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.25px;
}

.textdisplaymedium {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-45px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.textdisplaysmall {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-36px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.textheadinglarge {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.textheadingmedium {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-28px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.textheadingsmall {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.texttitlesmall {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.textlabelsmall {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.textbodymedium {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.textbodysmall {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.roboto-normal-swans-down-16px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.roboto-normal-swans-down-20px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.roboto-normal-swans-down-14px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.roboto-bold-eerie-black-20px {
  color: var(--bg-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-swans-down-24px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-swans-down-20px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.roboto-normal-eerie-black-16px {
  color: var(--bg-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.roboto-medium-caribbean-green-16px {
  color: var(--brand-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.roboto-bold-swans-down-36px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}

.roboto-medium-swans-down-16px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.roboto-bold-swans-down-32px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-caribbean-green-36px {
  color: var(--brand-color);
  font-family: var(--font-family-roboto);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-swans-down-28px {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-caribbean-green-20px {
  color: var(--brand-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-caribbean-green-32px {
  color: var(--brand-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.roboto-bold-caribbean-green-24px {
  color: var(--brand-color);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
}