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

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

  /* font sizes */
  --font-size-xl: 20px;
  --font-size-mid: 17px;
  --font-size-lg: 18px;
  --font-size-3xs: 10px;
  --font-size-mini: 15px;
  --font-size-smi: 13px;
  --font-size-9xl: 28px;
  --font-size-3xl: 22px;
  --font-size-15xl: 34px;

  /* Colors */
  --color-whitesmoke-100: #f6f6f9;
  --color-whitesmoke-200: #f5f5f8;
  --color-whitesmoke-300: #f4f4f8;
  --color-whitesmoke-400: #f4f4f7;
  --color-whitesmoke-500: #f2f2f2;
  --color-black: #000;
  --color-orangered: #fa4a0c;
  --color-white: #fff;
  --color-darkgray: #9a9a9d;

  /* border radiuses */
  --br-xl: 20px;
  --br-11xl: 30px;
  --br-3xs: 10px;
  --br-21xl: 40px;
}