body {
  margin: 0;
  line-height: normal;
  background: #d1d9ff;
}

:root {
  /* fonts */
  --font-nunito: Nunito;
  --text-base-font-medium: Manrope;
  --font-lato: Lato;

  /* font sizes */
  --font-size-lg: 18px;
  --text-base-font-medium-size: 16px;
  --font-size-18xl-2: 37.2px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;

  /* Colors */
  --color-black: #000;
  --color-bg-magic-hover: #6d28d9;
  --color-icon: #18181b;
  --color-gray-100: rgba(255, 255, 255, 0.5);
  --color-white: #fff;
  --color-darkslategray-100: #333;
  --color-text-primary: #252c32;
  --color-crimson: #9c9c9c;

  /* Spacing */
  --spacing-spacing-sm: 8px;
  --spacing-spacing-lg: 16px;
  --size-size-avatar-xl: 56px;
  --radius-radius-card: 12px;

  /* Gaps */
  --gap-xs: 12px;

  /* Paddings */
  --padding-base: 16px;
  --padding-xl: 20px;
  --padding-8xs: 5px;
  --padding-3xs: 10px;

  /* Border radiuses */
  --br-3xs: 10px;
  --br-7xs: 6px;
  --br-xl-5: 20.5px;
  --br-8xs: 5px;

  /* Effects */
  --shadows-sm-strong: 0px 3px 7px rgba(41, 120, 221, 0.06),
    0px 2px 5px rgba(16, 24, 40, 0.03);
}