body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-karla: Karla;
    --font-chivo: Chivo;
    --font-gangster-grotesk: "Gangster Grotesk";
  
    /* font sizes */
    --font-size-mini: 15px;
    --font-size-base: 16px;
    --font-size-5xl: 24px;
    --font-size-xs: 12px;
    --font-size-9xl: 28px;
    --font-size-xl: 20px;
    --font-size-13xl: 32px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-45xl: 64px;
    --font-size-29xl: 48px;
  
    /* Colors */
    --colors-neutral-white: #fff;
    --colors-neutral-black: #151522;
    --neutral-500: #030d24;
    --colors-primary-purple: #6979f8;
    --primary-500: #0566eb;
    --color-royalblue-100: rgba(34, 96, 239, 0.88);
    --color-royalblue-200: rgba(34, 96, 239, 0.06);
    --neutral-300: #686e7c;
    --primary-50: #e6f0fd;
    --color-darkorange-100: #fe8d00;
    --color-darkorange-200: rgba(254, 141, 0, 0.5);
    --neutral-50: #e6e7e9;
    --secondary-50: #fff3e5;
    --neutral-200: #9a9ea7;
  
    /* Gaps */
    --gap-5xs: 8px;
    --gap-9xs: 4px;
    --gap-25xl: 44px;
    --gap-xl: 20px;
    --gap-2xl: 21px;
  
    /* Paddings */
    --padding-base: 16px;
    --padding-29xl: 48px;
    --padding-5xl: 24px;
    --padding-25xl: 44px;
  
    /* border radiuses */
    --br-xl: 20px;
    --br-base: 16px;
    --br-29xl: 48px;
    --br-5xl: 24px;
    --br-10xs: 3px;
    --br-5xs: 8px;
  
    /* Effects */
    --secondary-effect: 0.20000000298023224px 0.10000000149011612px 1px
      rgba(255, 255, 255, 0.6) inset;
  }