body {
    margin: 0;
    line-height: normal;
    background-color: var(--color-aliceblue-100);
  }
  
  :root {
    /* fonts */
    --body-small: Manrope;
    --font-inter: Inter;
    --font-sf-pro-display: "SF Pro Display";
    --font-roboto: Roboto;
    --font-lato: Lato;
    --font-plus-jakarta-sans: "Plus Jakarta Sans";
  
    /* font sizes */
    --body-b1-bold-size: 16px;
    --font-size-9xl: 28px;
    --body-small-size: 14px;
    --body-b3-regular-size: 11px;
    --font-size-mini: 15px;
    --font-size-xl: 20px;
    --font-size-xs: 12px;
    --subtitle-s2-bold-size: 18px;
    --font-size-3xs: 10px;
    --font-size-smi: 13px;
    --font-size-3xl: 22px;
  
    /* Colors */
    --colour-bg-bg-50: #fff;
    --color-dodgerblue-100: #4785fc;
    --color-dodgerblue-200: #2e8bfc;
    --color-dodgerblue-300: rgba(71, 133, 252, 0.1);
    --color-dodgerblue-400: rgba(71, 133, 252, 0.2);
    --colors-neutral-neutral-900: #696969;
    --color-dimgray-100: #636363;
    --color-dimgray-200: #5e5e5e;
    --color-dimgray-300: #525a6e;
    --colour-accent-accent-900: #505a62;
    --color-gray-100: #fbfbfb;
    --color-gray-200: #fafafa;
    --color-gray-300: #848484;
    --colors-bg1-bg1-800: #181529;
    --color-gray-400: #171725;
    --color-gray-500: #161626;
    --secondary-dark-blue: #131321;
    --colour-secondary-secondary-900: #051823;
    --colors-bg1-bg1-900: #121020;
    --color-gray-600: #121212;
    --color-gray-700: #000e29;
    --colour-secondary-secondary-1000: #020a0f;
    --color-gray-800: rgba(0, 0, 0, 0.4);
    --color-gray-900: rgba(0, 0, 0, 0.5);
    --color-gray-1000: rgba(0, 0, 0, 0.54);
    --color-orangered: #fb5806;
    --colour-bg-bg-800: #e3e8ec;
    --color-gainsboro-100: #e0e0e0;
    --color-gainsboro-200: #dadada;
    --color-gainsboro-300: #d9d9d9;
    --color-darkslategray-100: #4b4b4b;
    --colour-secondary-secondary-500: #0b3954;
    --color-whitesmoke-100: #f3f3f3;
    --color-whitesmoke-200: #edf0f4;
    --color-whitesmoke-300: #efefef;
    --colour-secondary-secondary-50: #e7ebee;
    --color-tomato-100: #ef5143;
    --colors-error-error-500: #f04438;
    --color-black: #000;
    --color-aliceblue-100: #f4f9ff;
    --color-aliceblue-200: #ecf3ff;
    --color-ghostwhite: #faf8ff;
    --color-mediumslateblue-100: #0148df;
    --color-red-100: #fd2931;
    --colour-error-error-500: #ff0000;
    --color-red-200: #f40000;
    --color-red-300: rgba(244, 0, 0, 0.1);
    --color-burlywood-100: #e9c477;
    --color-burlywood-200: rgba(233, 196, 119, 0.2);
    --color-darkslateblue: #1b2149;
    --color-seagreen-100: #008753;
    --color-seagreen-200: rgba(0, 135, 83, 0.1);
    --colors-primary-primary-500: #9747ff;
    --colour-accent-accent-800: #697681;
    --color-peru: #e38e32;
    --color-lavender-100: #e0ebfe;
    --color-lavender-200: #dcedfe;
    --color-lavender-300: #cfe0fb;
    --color-darkgray: #a4a4a4;
    --color-mediumseagreen: rgba(52, 168, 83, 0.1);
    --colour-accent-accent-600: #aec4d5;
    --color-lightgreen: #83be60;
    --color-honeydew: #e8f5e0;
    --color-mistyrose: #fee1e1;
    --color-yellowgreen: #63bb35;
    --color-orange: #fdb623;
  
    /* Gaps */
    --gap-xl: 20px;
    --gap-base: 16px;
    --gap-5xs: 8px;
    --gap-mini: 15px;
    --gap-8xs: 5px;
    --gap-2xs: 11px;
    --gap-3xs: 10px;
    --gap-123xl: 142px;
    --gap-lgi: 19px;
    --gap-10xs: 3px;
    --gap-6xs: 7px;
    --gap-21xl: 40px;
    --gap-11xl: 30px;
    --gap-12xl: 31px;
    --gap-13xl: 32px;
    --gap-xs: 12px;
    --gap-5xl: 24px;
    --gap-11xs: 2px;
    --gap-89xl: 108px;
    --gap-87xl: 106px;
    --gap-lg: 18px;
    --gap-3xl: 22px;
    --gap-93xl: 112px;
    --gap-91xl: 110px;
    --gap-6xl: 25px;
    --gap-9xs: 4px;
  
    /* Paddings */
    --padding-2xs: 11px;
    --padding-21xl: 40px;
    --padding-base: 16px;
    --padding-5xl: 24px;
    --padding-mini: 15px;
    --padding-7xs: 6px;
    --padding-xs: 12px;
    --padding-smi: 13px;
    --padding-27xl: 46px;
    --padding-5xs: 8px;
    --padding-3xs: 10px;
    --padding-29xl: 48px;
    --padding-13xl: 32px;
    --padding-9xs: 4px;
    --padding-11xl: 30px;
    --padding-14xl: 33px;
  
    /* Border radiuses */
    --br-xl: 20px;
    --br-5xs: 8px;
    --br-3xs: 10px;
    --br-8xs: 5px;
    --br-10xs: 3px;
    --br-9xs: 4px;
    --br-mini: 15px;
  
    /* Effects */
    --widget-shadow: 0px 6px 105px rgba(0, 0, 0, 0.03),
      0px 0.7512931227684021px 95.3px rgba(0, 0, 0, 0.01);
  }