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

:root {
  /* fonts preset */
  --font-inter: Inter;
  --font-poppins: Poppins;
  --font-montserrat: Montserrat;

  /* font sizes */
  --font-size-sm: 14px;
  --font-size-mini: 15px;
  --font-size-7xl: 26px;
  --font-size-smi: 13px;
  --font-size-base: 16px;
  --font-size-5xl: 24px;
  --font-size-16xl: 35px;
  --font-size-3xs: 10px;
  --font-size-lg: 18px;
  --font-size-6xl: 25px;
  --font-size-3xs-5: 9.5px;
  --font-size-13xl: 32px;
  --font-size-xs: 12px;
  --font-size-3xl: 22px;

  /* Colors */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-100: #8b8b8b;
  --color-gray-200: #212529;
  --color-gray-300: rgba(0, 0, 0, 0.5);
  --color-gray-400: rgba(24, 26, 27, 0.5);
  --color-gainsboro-100: #d9d9d9;
  --color-gainsboro-200: rgba(217, 217, 217, 0.5);
  --color-mediumseagreen: #03c988;
  --color-steelblue-100: #3795bd;
  --color-steelblue-200: rgba(55, 149, 189, 0.5);
  --color-lightgray-100: #cbcbcb;
  --color-whitesmoke: #f5f5f5;
  --color-tomato: #ff5b5b;
  --color-cornflowerblue: #5bb0ff;
  --color-darkgray: #9e9e9e;
  --color-dimgray-100: #6c6c6c;
  --color-dimgray-200: #5c5c5c;
  --color-royalblue: #4573eb;
  --color-mediumspringgreen: #45eb87;
  --color-crimson: #eb455f;
  --color-darkslateblue: #3e54ac;

  /* Gaps */
  --gap-3xs: 10px;

  /* border radiuses */
  --br-5xs: 8px;
  --br-8xs: 5px;
  --br-mini: 15px;
  --br-10xs: 3px;
  --br-61xl: 80px;
  --br-31xl: 50px;
}