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

:root {
  /* Color */
  --color-steelblue: #1f6790;
  --color-darkslategray-200: #33394d;
  --color-darkslategray-100: #474747;
  --color-darkgray-200: #a1a1a1;
  --color-darkgray-100: #a3a3a3;
  --color-powderblue: #afedfb;
  --color-whitesmoke: #f5f5f5;
  --color-lightblue: #99bec9;
  --color-gainsboro-100: #e6e7e8;
  --color-lightcyan-200: rgba(223, 248, 249, 0.6);
  --color-lightcyan-100: #d5ebf0;
  --color-aliceblue: #e4f4f8;
  --color-skyblue: #3adcff;
  --color-darkturquoise: #31e5fc;
  --color-gray-1600: rgba(255, 255, 255, 0.12);
  --color-gray-1500: rgba(0, 0, 0, 0);
  --color-gray-1400: rgba(255, 255, 255, 0.2);
  --color-gray-1300: rgba(41, 39, 39, 0.5);
  --color-gray-1200: rgba(3, 18, 26, 0.7);
  --color-gray-1100: rgba(255, 255, 255, 0.5);
  --color-gray-1000: rgba(0, 0, 0, 0.7);
  --color-gray-900: rgba(0, 0, 0, 0.25);
  --color-gray-800: rgba(13, 13, 13, 0.05);
  --color-gray-700: #020101;
  --color-gray-600: #000a10;
  --color-gray-500: #040a10;
  --color-gray-400: #0b0b0b;
  --color-gray-300: #03121a;
  --color-gray-200: #141414;
  --color-gray-100: #181818;
  --Dark-Mode-Container-Border: rgba(255, 255, 255, 0.07);

  /* Gap */
  --gap-4: 4px;
  --gap-5: 5px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-14: 14px;
  --gap-15: 15px;
  --gap-20: 20px;

  /* Padding */
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-15: 15px;
  --padding-20: 20px;

  /* BorderRadius */
  --br-3: 3px;
  --br-5: 5px;
  --br-10: 10px;
  --br-15: 15px;
  --br-20: 20px;

  /* Font */
  --font-manrope: Manrope;
  --font-archivo-expanded: Archivo Expanded;
  --font-inter: Inter;

  /* FontSize */
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-30: 30px;

  --Shadow-Blur-sm:
    0px 1px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.05),
    0px 10px 10px rgba(0, 0, 0, 0.1);

  /* Figma Variables */

  /* Spacing */
  --Spacing-5px: -5px;
  --Spacing-0px: 0px;
  --Spacing-0px1: 0px;
  --Radius-0px: 0px;
  --Spacing-2px: 2px;
  --Spacing-2px1: 2px;
  --Spacing-3px: 3px;
  --Spacing-4px: 4px;
  --Spacing-4px1: 4px;
  --Spacing-6px: 6px;
  --Spacing-8px: 8px;
  --Spacing-8px1: 8px;
  --Size-font-s: 11px;
  --Spacing-12px: 12px;
  --Size-font-m: 12px;
  --Size-font-l: 13px;
  --Spacing-16px: 16px;
  --Radius-100px: 100px;
  --Radius-100px1: 100px;

  /* Color */
  --System-Dark: #000;
  --Icons-Emphasized: #ff0034;
  --Text-Default-Inverted: #fff;
  --System-Light: #fff;
  --Background-Default: #fff;
  --Border-Translucent: rgba(255, 255, 255, 0.35);
  --Text-Subtle: #6f7680;
  --Text-Subtler: #6f7680;
  --Border-Subtler: #dbdfe4;
  --Border-Default-Inverted: #fff;
  --Text-Default: #0c1014;

  /* Font */
  --Family-sf-pro-display: SF Pro Display;
}