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

:root {
  /* Color */
  --color-slategray: #576074;
  --color-darkslategray-200: rgba(74, 82, 79, 0.09);
  --color-darkslategray-100: #4a524f;
  --color-lightcyan: #defff9;
  --color-whitesmoke-300: #ececec;
  --color-whitesmoke-200: #f4f4f4;
  --color-whitesmoke-100: #f8f8f8;
  --color-mediumaquamarine-100: #00a885;
  --color-lightseagreen-200: rgba(0, 168, 135, 0.09);
  --color-lightseagreen-100: #00a887;
  --color-gray-300: rgba(0, 0, 0, 0.85);
  --color-gray-200: #7a7a7a;
  --color-gray-100: #fafafa;
  --color-gainsboro: #d9d9d9;
  --color-black: #000;
  --Primary-Contrast: #fff;

  /* Gap */
  --gap-18: 18px;
  --gap-36: 36px;
  --gap-16: 16px;
  --gap-6: 6px;
  --gap-28: 28px;
  --gap-10: 10px;
  --gap-5: 5px;
  --gap-4: 4px;
  --gap-14: 14px;
  --gap-2: 2px;
  --gap-12: 12px;
  --gap-8: 8px;
  --gap-24: 24px;
  --gap-30: 30px;
  --gap-20: 20px;

  /* Padding */
  --padding-26: 26px;
  --padding-40: 40px;
  --padding-15: 15px;
  --padding-19: 19px;
  --padding-10: 10px;
  --padding-6: 6px;
  --padding-16: 16px;
  --padding-11: 11px;
  --padding-30: 30px;
  --padding-12: 12px;
  --padding-20: 20px;
  --padding-14: 14px;

  /* BorderRadius */
  --br-16: 16px;
  --br-8: 8px;
  --br-6: 6px;
  --br-4: 4px;
  --br-10: 10px;

  /* Font */
  --font-roboto: Roboto;
  --font-archivo: Archivo;

  /* FontSize */
  --font-size-26: 26px;
  --font-size-10: 10px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-12: 12px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-14: 14px;

  /* Figma Variables */

  /* Color */
  --Light-Text: #787878;
  --Dark: #171e1d;
  --Accent: #00c29f;
  --Accent1: #00c29f;
  --Light-grey-border1: #e8ecf2;
  --White: #fff;
  --Light-grey-border: #e8ecf2;
}