:root { 
  --black: #000000;
  --black-russian: #040421;
  --dove-gray: #6b6b6b;
  --hawkes-blue: #e0deff;
  --masala: #3d3d3d;
  --mystic: #e4e3f0;
  --mystic-2: #e1e3ec;
  --sangria: #8e0c0c;
  --scarpa-flow: #595963;
  --storm-gray: #6c748f;
  --ultramarine: #120a8f;
  --white: #ffffff;
  --wild-sand: #f4f4f4;
  --hover-Blue: #3F38B5;
 
  --font-size-l: 20px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 32px;
  --font-size-xs: 12px;
  --font-size-xxl: 40px;
  --font-size-xxxl: 48px;
 
  --font-family-inter: "Inter", Helvetica;
  --font-family-outfit: "Outfit", Helvetica;
  --font-family-poppins: "Poppins", Helvetica;
  --font-family-secular_one: "Secular One", Helvetica;
}
.button-medium {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.button-small {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.button-large {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodysmallsmall---regular {
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyextra-smallextra---regular {
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.display3semi-bold {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.poppins-bold-scarpa-flow-16px {
  color: var(--scarpa-flow);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.poppins-semi-bold-masala-14px {
  color: var(--masala);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
}

.poppins-semi-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.secularone-normal-white-48px {
  color: var(--white);
  font-family: var(--font-family-secular_one);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.secularone-normal-black-russian-32px {
  color: var(--black-russian);
  font-family: var(--font-family-secular_one);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}