:root { 
  --black: #000000;
  --blizzard-blue: #ade6ed;
  --coconut: #fefefe;
  --coconut-2: #fdfdfd;
  --concrete: #f2f2f2;
  --corn: #f2bb06;
  --eerie-black: #1e1e1e;
  --heavy-metal: #2b2b2b;
  --international-klein-blue: #0530bc;
  --iron: #d8d8d8;
  --mantis: #8cc850;
  --mauve: #dcb8fe;
  --white: #ffffff;
 
  --font-size-l: 24px;
  --font-size-m: 20px;
  --font-size-s: 16px;
  --font-size-xl: 32px;
  --font-size-xs: 14px;
  --font-size-xxl: 64px;
  --font-size-xxs: 12px;
 
  --font-family-blauer_nue-regular: "Blauer Nue-Regular", Helvetica;
  --font-family-cabinet_grotesk-bold: "Cabinet Grotesk-Bold", Helvetica;
  --font-family-cabinet_grotesk-extrabold: "Cabinet Grotesk-Extrabold", Helvetica;
  --font-family-cabinet_grotesk-medium: "Cabinet Grotesk-Medium", Helvetica;
  --font-family-cabinet_grotesk-regular: "Cabinet Grotesk-Regular", Helvetica;
  --font-family-general_sans_variable-regular: "General Sans Variable-Regular", Helvetica;
  --font-family-satoshi-italic: "Satoshi-Italic", Helvetica;
  --font-family-satoshi-medium: "Satoshi-Medium", Helvetica;
  --font-family-satoshi-regular: "Satoshi-Regular", Helvetica;
}
.bodyxs---reg {
  font-family: var(--font-family-satoshi-regular);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodys---reg {
  font-family: var(--font-family-satoshi-regular);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

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

.bodyl---reg {
  font-family: var(--font-family-satoshi-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.bodyl---med {
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.cabinetgrotesk-medium-eerie-black-24px {
  color: var(--eerie-black);
  font-family: var(--font-family-cabinet_grotesk-medium);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.cabinetgrotesk-medium-heavy-metal-16px {
  color: var(--heavy-metal);
  font-family: var(--font-family-cabinet_grotesk-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.cabinetgrotesk-regular-normal-coconut-20px {
  color: var(--coconut);
  font-family: var(--font-family-cabinet_grotesk-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.cabinetgrotesk-medium-heavy-metal-20px {
  color: var(--heavy-metal);
  font-family: var(--font-family-cabinet_grotesk-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.cabinetgrotesk-regular-normal-iron-16px {
  color: var(--iron);
  font-family: var(--font-family-cabinet_grotesk-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.cabinetgrotesk-regular-normal-concrete-20px {
  color: var(--concrete);
  font-family: var(--font-family-cabinet_grotesk-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.cabinetgrotesk-extra-normal-eerie-black-24px {
  color: var(--eerie-black);
  font-family: var(--font-family-cabinet_grotesk-extrabold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.satoshi-regular-normal-coconut-32px {
  color: var(--coconut);
  font-family: var(--font-family-satoshi-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.satoshi-italic-normal-coconut-32px {
  color: var(--coconut);
  font-family: var(--font-family-satoshi-italic);
  font-size: var(--font-size-xl);
  font-style: italic;
  font-weight: 400;
}

.cabinetgrotesk-extra-normal-coconut-24px {
  color: var(--coconut-2);
  font-family: var(--font-family-cabinet_grotesk-extrabold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.satoshi-italic-normal-heavy-metal-16px {
  color: var(--heavy-metal);
  font-family: var(--font-family-satoshi-italic);
  font-size: var(--font-size-s);
  font-style: italic;
  font-weight: 400;
}

.cabinetgrotesk-extra-normal-international-klein-blue-16px {
  color: var(--international-klein-blue);
  font-family: var(--font-family-cabinet_grotesk-extrabold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.cabinetgrotesk-medium-coconut-64px {
  color: var(--coconut);
  font-family: var(--font-family-cabinet_grotesk-medium);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.cabinetgrotesk-bold-black-32px {
  color: var(--black);
  font-family: var(--font-family-cabinet_grotesk-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.cabinetgrotesk-regular-normal-heavy-metal-64px {
  color: var(--heavy-metal);
  font-family: var(--font-family-cabinet_grotesk-regular);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.cabinetgrotesk-bold-heavy-metal-32px {
  color: var(--heavy-metal);
  font-family: var(--font-family-cabinet_grotesk-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.cabinetgrotesk-extra-normal-heavy-metal-40px {
  color: var(--heavy-metal);
  font-family: var(--font-family-cabinet_grotesk-extrabold);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
}