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

.popup-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
}

:root {
  /* fonts */
  --font-urbanist: Urbanist;
  --font-poppins: Poppins;

  /* font sizes */
  --font-size-base: 16px;
  --font-size-3xs: 10px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-5xs: 8px;
  --font-size-xl: 20px;
  --font-size-7xs: 6px;

  /* Colors */
  --color-whitesmoke-100: #f7f7f7;
  --color-whitesmoke-200: #f6f6f6;
  --color-whitesmoke-300: #f0f0f0;
  --color-crimson-100: #f90640;
  --color-crimson-200: rgba(249, 6, 64, 0.01);
  --color-white: #fff;
  --color-darkslateblue-100: #1f4397;
  --color-darkslateblue-200: rgba(31, 67, 151, 0.2);
  --color-dimgray: #7b7171;
  --color-darkslategray-100: #443f3f;
  --color-darkslategray-200: #363642;
  --color-yellowgreen-100: #8bc54d;
  --color-yellowgreen-200: rgba(139, 197, 77, 0.04);
  --color-gray-100: #888;
  --color-gray-200: #221d1d;
  --color-gray-300: #1e1b1b;
  --color-gray-600: #11142d;
  --color-gray-400: #081900;
  --color-gray-500: #000929;
  --color-beige: #e4f6dc;
  --color-mediumslateblue-100: #5570ff;
  --color-mediumslateblue-200: rgba(75, 104, 255, 0.5);
  --color-black: #000;
  --color-slategray: #808191;
  --color-darkgray: #969696;

  /* Gaps */
  --gap-base: 16px;
  --gap-xs: 12px;
  --gap-0: 0px;
  --gap-3xs: 10px;
  --gap-7xs: 6px;
  --gap-smi: 13px;
  --gap-5xs: 8px;
  --gap-9xs: 4px;
  --gap-5xl: 24px;

  /* Paddings */
  --padding-13xl: 32px;
  --padding-base: 16px;
  --padding-5xl: 24px;
  --padding-xs: 12px;
  --padding-5xs: 8px;
  --padding-3xs: 10px;
  --padding-7xs: 6px;
  --padding-9xs: 4px;
  --padding-8xs: 5px;
  --padding-sm: 14px;

  /* Border radiuses */
  --br-69xl: 88px;
  --br-5xl: 24px;
  --br-base: 16px;
  --br-13xl: 32px;
  --br-35xl: 54px;
  --br-3xs: 10px;
  --br-9xs: 4px;
  --br-xs: 12px;
  --br-sm: 14px;
  --br-7xs: 6px;
}