:root { 
  --bay-of-many: #1e3a8a;
  --black: #000000;
  --ecstasy: #f97316;
  --emperor: #4d464a;
  --licorice: #111111;
  --log-cabin: #2121210a;
  --log-cabin-2: #222222;
  --mirage: #121a2d;
  --mirage-2: #121a2dd6;
  --pewter-blue: #94a3b8;
  --resolution-blue: #003287;
  --white: #ffffff;
  --white-2: #ffffffd6;
  --white-3: #ffffff3d;
  --white-4: #ffffff6b;
 
  --font-size-l: 18px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 26px;
  --font-size-xxxxl: 42px;
 
  --font-family-kanit: "Kanit", Helvetica;
  --font-family-mona_sans: "Mona Sans", Helvetica;
  --font-family-mona_sans-medium: "Mona Sans-Medium", Helvetica;
  --font-family-plus_jakarta_sans: "Plus Jakarta Sans", Helvetica;
  --font-family-space_grotesk: "Space Grotesk", Helvetica;
}
.kanit-light-mirage-16px {
  color: var(--mirage-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.kanit-medium-mirage-18px {
  color: var(--mirage);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-bold-white-20px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.kanit-medium-log-cabin-18px {
  color: var(--log-cabin-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.kanit-medium-white-16px {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-medium-white-20px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-bold-mirage-24px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
}

.kanit-light-mirage-14px {
  color: var(--mirage-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 300;
}

.plusjakartasans-extra-bold-white-20px {
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 800;
}

.plusjakartasans-extra-bold-bay-of-many-20px {
  color: var(--bay-of-many);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 800;
}

.plusjakartasans-extra-bold-ecstasy-20px {
  color: var(--ecstasy);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 800;
}

.plusjakartasans-bold-pewter-blue-10px {
  color: var(--pewter-blue);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.spacegrotesk-bold-white-26px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.kanit-normal-white-14px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.spacegrotesk-medium-mirage-18px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.spacegrotesk-medium-white-26px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
}

.kanit-normal-ecstasy-18px {
  color: var(--ecstasy);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.kanit-light-white-16px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.kanit-normal-white-18px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.spacegrotesk-bold-ecstasy-26px {
  color: var(--ecstasy);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.kanit-medium-log-cabin-12px {
  color: var(--log-cabin-2);
  font-family: var(--font-family-kanit);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-normal-white-20px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.kanit-light-mirage-18px {
  color: var(--mirage-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 300;
}

.kanit-medium-ecstasy-18px {
  color: var(--ecstasy);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.kanit-light-mirage-16px-2 {
  color: var(--mirage-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: italic;
  font-weight: 300;
}

.kanit-normal-emperor-18px {
  color: var(--emperor);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.kanit-medium-white-20px {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.kanit-normal-white-14px-2 {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.kanit-light-mirage-16px-3 {
  color: var(--mirage);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.spacegrotesk-bold-white-18px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.kanit-medium-white-14px {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-bold-mirage-42px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
}

.kanit-bold-resolution-blue-36px {
  color: var(--resolution-blue);
  font-family: var(--font-family-kanit);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}

.spacegrotesk-bold-white-54px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
}

.kanit-medium-ecstasy-16px {
  color: var(--ecstasy);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.spacegrotesk-bold-mirage-26px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.kanit-light-white-16px-2 {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.spacegrotesk-bold-ecstasy-20px {
  color: var(--ecstasy);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.kanit-normal-ecstasy-14px {
  color: var(--ecstasy);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.spacegrotesk-bold-mirage-18px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.kanit-light-white-18px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 300;
}

.spacegrotesk-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.kanit-bold-white-36px {
  font-family: var(--font-family-kanit);
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}

.kanit-light-white-20px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 300;
}

.spacegrotesk-bold-black-42px {
  color: var(--black);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
}

.spacegrotesk-bold-white-42px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
}

.spacegrotesk-medium-mirage-20px {
  color: var(--mirage);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.kanit-bold-resolution-blue-18px {
  color: var(--resolution-blue);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.monasans-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-mona_sans);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.spacegrotesk-normal-white-18px {
  color: var(--white);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.kanit-medium-ecstasy-12px {
  color: var(--ecstasy);
  font-family: var(--font-family-kanit);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.kanit-medium-white-12px {
  color: var(--white);
  font-family: var(--font-family-kanit);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.kanit-light-white-14px {
  color: var(--white-2);
  font-family: var(--font-family-kanit);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 300;
}

.spacegrotesk-bold-ecstasy-18px {
  color: var(--ecstasy);
  font-family: var(--font-family-space_grotesk);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}