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

:root {
  /* fonts */
  --font-roboto: Roboto;
  --regular: Inter;
  --font-roboto-slab: "Roboto Slab";
  --font-poppins: Poppins;
  --font-montserrat: Montserrat;
  --font-bebas-neue: "Bebas Neue";
  --font-dm-sans: "DM Sans";
  --font-rubik: Rubik;
  --font-open-sans: "Open Sans";
  --font-plus-jakarta-sans: "Plus Jakarta Sans";

  /* font sizes */
  --font-size-xs: 12px;
  --font-size-base: 16px;
  --font-size-15xl: 34px;
  --font-size-14xl: 33px;
  --font-size-6xs-5: 6.5px;
  --font-size-5xs-3: 7.3px;
  --font-size-4xs-1: 8.1px;
  --font-size-8xs-9: 4.9px;
  --font-size-7xs-7: 5.7px;
  --font-size-11xs-5: 1.5px;
  --font-size-11xs-3: 1.3px;
  --font-size-10xs-5: 2.5px;
  --font-size-9xs-5: 3.5px;
  --font-size-9xs-1: 3.1px;
  --font-size-11xs-7: 1.7px;
  --font-size-11xs-9: 1.9px;
  --font-size-11xs-6: 1.6px;
  --font-size-10xs-1: 2.1px;
  --font-size-11xs-4: 1.4px;
  --regular-size: 14px;
  --font-size-11xs-8: 1.8px;
  --extra-bold-8-size: 8px;
  --font-size-10xs-2: 2.2px;
  --font-size-11xs-2: 1.2px;
  --font-size-11xs-1: 1.1px;
  --font-size-12xs-9: 0.9px;

  /* Colors */
  --color-gray-100: #fdfdfd;
  --color-gray-200: #fcfcff;
  --color-gray-300: #fafcff;
  --color-gray-400: #818181;
  --gray-800: #1f2633;
  --color-gray-500: #262525;
  --color-gray-600: #1e1e1e;
  --black-100: #1c1c1c;
  --secondary-500: #141522;
  --color-gray-700: #0c0c0c;
  --black-40: rgba(0, 0, 0, 0.4);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-5: rgba(0, 0, 0, 0.05);
  --black-20: rgba(0, 0, 0, 0.2);
  --color-gray-800: rgba(255, 255, 255, 0.4);
  --color-darkslategray-100: #434343;
  --color-darkslategray-200: #333434;
  --color-darkslategray-300: #333;
  --color-darkslategray-400: #2f2f2f;
  --color-darkslategray-500: #1d2d35;
  --color-steelblue-100: #376bab;
  --color-darkgreen: #3f6900;
  --color-black: #000;
  --color-lavender: rgba(205, 228, 249, 0.4);
  --color-lightgray-100: #d5d5d5;
  --color-lightgray-200: #dad3c8;
  --color-midnightblue-100: #291a71;
  --color-aliceblue-100: #f4fbff;
  --color-aliceblue-200: #e9f2fc;
  --color-aliceblue-300: #e6ecf0;
  --color-tan: #cebb9e;
  --white-white: #fff;
  --color-silver-100: #c4c4c4;
  --color-silver-200: rgba(196, 196, 196, 0);
  --color-lightskyblue: #80b9ff;
  --color-whitesmoke-100: #f5f5f7;
  --gray-30: #f2f4f7;
  --color-whitesmoke-200: #f1f1f1;
  --gray-50: #ebeef2;
  --color-whitesmoke-300: #e8edf1;
  --secondary-300: #8e92bc;
  --color-lightslategray-100: #8c97a8;
  --color-lightslategray-200: #768396;
  --color-green: #299702;
  --color-powderblue: #c9ecf6;
  --color-crimson: #f23939;
  --color-limegreen: #3cc13b;
  --color-darkorange: #ff7a00;
  --gray-300: #98a2b2;
  --gray-500: #606c80;
  --color-cornflowerblue: #55a1ff;

  /* Gaps */
  --gap-8xs-9: 4.9px;
  --gap-11xs-2: 1.2px;
  --gap-12xs-2: 0.2px;
  --gap-12xs-6: 0.6px;
  --gap-10xs-1: 2.1px;
  --gap-12xs: 1px;
  --gap-12xs-5: 0.5px;
  --gap-10xs-6: 2.6px;
  --gap-12xs-9: 0.9px;
  --gap-11xs-3: 1.3px;
  --gap-11xs-9: 1.9px;
  --gap-11xs-1: 1.1px;
  --gap-11xs-5: 1.5px;
  --gap-mid: 17px;

  /* Paddings */
  --padding-12xs-8: 0.8px;
  --padding-11xs-2: 1.2px;
  --padding-12xs-4: 0.4px;
  --padding-10xs-4: 2.4px;
  --padding-11xs-6: 1.6px;
  --padding-12xs: 1px;
  --padding-10xs-3: 2.3px;
  --padding-12xs-5: 0.5px;
  --padding-12xs-7: 0.7px;
  --padding-11xs-3: 1.3px;
  --padding-12xs-9: 0.9px;
  --padding-11xs-5: 1.5px;

  /* border radiuses */
  --br-mid-8: 17.8px;
  --br-6xs-5: 6.5px;
  --br-8xs-3: 4.3px;
  --br-12xs-5: 0.5px;
  --br-10xs-5: 2.5px;
  --br-12xs: 1px;
  --br-5xs-4: 7.4px;
  --br-11xs-4: 1.4px;
  --br-12xs-9: 0.9px;
  --br-8xs-4: 4.4px;
  --br-4xs-8: 8.8px;
  --br-10xs: 3px;
  --br-12xs-7: 0.7px;
  --br-10xs-8: 2.8px;
  --br-7xs-6: 5.6px;
  --br-10xs-2: 2.2px;
  --br-74xl-7: 93.7px;
}
