body {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: light-gray;
	line-height: normal;
}

:root {
  /* fonts */
  --title: "SF Pro Display";
  --body-3: "SF Pro Text";
  --body-31: Barlow;

  /* font sizes */
  --body-3-size: 12px;
  --label-size: 14px;
  --title-size: 16px;
  --h3-size: 18px;

  /* Colors */
  --shades-extra-light: #f4f5f8;
  --shades-light: #e9ebef;
  --shades-white: #fff;
  --shades-black: #000;
  --text-text-50: #6b717e;
  --shades-semi-dark: #657089;
  --primary-100: #0085ff;
  --shades-almost-black: #131720;
  --secondary-100: #00c48b;

  /* Gaps */
  --gap-10xs: 3px;
  --gap-9xs: 4px;
  --gap-3xs: 10px;
  --gap-base: 16px;
  --gap-5xs: 8px;
  --gap-6xs: 7px;
  --gap-2xs: 11px;
  --gap-11xs: 2px;

  /* Paddings */
  --padding-xl: 20px;
  --padding-2xl: 21px;
  --padding-8xs: 5px;
  --padding-9xs: 4px;
  --padding-6xl: 25px;
  --padding-xs: 12px;
  --padding-base: 16px;
  --padding-sm: 14px;
  --padding-18xl: 37px;
  --padding-17xl: 36px;
  --padding-mini-5: 14.5px;
  --padding-3xs: 10px;
  --padding-xs-5: 11.5px;
  --padding-smi: 13px;
  --padding-2xs-5: 10.5px;
  --padding-mini: 15px;

  /* Border radiuses */
  --br-xs: 12px;
  --br-5xs: 8px;
  --br-base: 16px;

  /* Effects */
  --shadow-hi: 0px 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-menu: 0px 2px 10px rgba(0, 0, 0, 0.05);
}