body {
  margin: 0;
  line-height: normal;
  font-family: var(--components-button-small);
}

:root {
  /* fonts */
  --components-button-small: Roboto;

  /* font sizes */
  --components-button-small-size: 13px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-9xl: 28px;
  --font-size-base: 16px;

  /* Colors */
  --color-white: #fff;
  --color-steelblue: #2893c9;
  --color-black: #000;
  --color-whitesmoke: #f4f4f4;
  --light-primary-main: #1976d2;
  --light-text-primary: rgba(0, 0, 0, 0.87);

  /* Gaps */
  --gap-11xl: 30px;
  --gap-xl: 20px;
  --gap-3xs: 10px;
  --gap-0: 0px;
  --gap-21xl: 40px;
  --gap-6xs: 7px;

  /* Paddings */
  --padding-21xl: 40px;
  --padding-xl: 20px;
  --padding-3xs: 10px;
  --padding-9xs: 4px;
  --padding-5xs: 8px;
  --padding-8xl: 27px;
  --padding-22xl: 41px;
  --padding-40xl: 59px;
  --padding-281xl: 300px;
  --padding-19xl: 38px;
  --padding-176xl: 195px;

  /* Border radiuses */
  --br-9xs: 4px;

  /* Effects */
  --elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
}