:root {
  --bittersweet: #ff635e;
  --black: #000000;
  --black-2: #00000066;
  --black-haze: #f7f7f7;
  --blue-ribbon: #0166ff;
  --blue: #1C77FF;
  --caribbean-green: #00d894;
  --chambray: #264990;
  --electric-violet: #b22dff;
  --gallery: #eeeeee;
  --granite-gray: #686868;
  --neon-carrot: #ffa845;
  --old-brick: #902626;
  --quick-silver: #a7a7a7;
  --red: #ff0000;
  --white: #ffffff;
  --white-2: #ffffffa6;

  --font-size-xxxs: 1.4vh;
  --font-size-xxs: 1.6vh;
  --font-size-xs: 2vh;
  --font-size-s: 2.6vh;
  --font-size-m: 2.8vh;
  --font-size-md: 3vh;
  --font-size-mg: 3.5vh;
  --font-size-l: 4vh;
  --font-size-lm: 4.4vh;
  --font-size-lg: 5vh;
  --font-size-lx: 5.4vh;
  --font-size-xl: 6vh;
  --font-size-xxl: 7.5vh;
  --font-size-xxxl: 12vh;

  --font-family-outfit: "Outfit", Helvetica;
}

/* Blue Ribbon */
.outfit-light-blue-ribbon-xs {
  color: var(--blue-ribbon);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-blue-ribbon-m {
  color: var(--blue-ribbon);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: light;
  font-weight: 200;
}

/* Chambray */
.outfit-light-chambray-s {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-s);
  font-style: light;
  font-weight: 200;
}

.outfit-light-chambray-30px {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-md);
  font-style: light;
  font-weight: 200;
}

.outfit-light-chambray-mg {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-mg);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-chambray-md {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 300;
}

.outfit-normal-chambray-mg {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-mg);
  font-style: normal;
  font-weight: 300;
}

.outfit-light-chambray-m {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: light;
  font-weight: 200;
}

.outfit-light-chambray-l {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: calc(var(--font-size-l) * 0.9);
  font-style: light;
  font-weight: 200;
}

.outfit-light-chambray-lg {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-lg);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-chambray-lg {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 300;
}

.outfit-normal-chambray-xs {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 300;
}

.outfit-normal-chambray-m {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
}

.outfit-normal-chambray-18px {
  color: var(--chambray);
  font-family: var(--font-family-outfit);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
}

/* Gallery */
.outfit-light-gallery-l {
  color: var(--gallery);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-l);
  font-style: light;
  font-weight: 200;
}

.outfit-extra-bold-gallery-md {
  color: var(--gallery);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 800;
}

.outfit-extra-bold-gallery-xl {
  color: var(--gallery);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 800;
}

/* Granite Gray */
.outfit-light-granite-gray-xxxs {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-quick-silver-xxs {
  color: var(--quick-silver);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-granite-gray-xxs {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-granite-gray-xs {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-granite-gray-m {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: light;
  font-weight: 200;
}

.outfit-light-granite-gray-l {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-l);
  font-style: light;
  font-weight: 200;
}

.outfit-light-granite-gray-lm {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-lm);
  line-height: calc(var(--font-size-lm) * 0.9);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-granite-gray-xxxs {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
}

.outfit-normal-granite-gray-xs {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.outfit-normal-granite-gray-18px {
  color: var(--granite-gray);
  font-family: var(--font-family-outfit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

/* Quick Silver */
.outfit-light-quick-silver-xxxs {
  color: var(--quick-silver);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-quick-silver-18px {
  color: var(--quick-silver);
  font-family: var(--font-family-outfit);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

/* Red */
.outfit-light-red-m {
  color: var(--red);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: light;
  font-weight: 200;
}

/* White */
.outfit-light-granite-white-xxxs {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-xxxs {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-xs {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xs);
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-s {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-s) !important;
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-m {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-m);
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-l {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-l);
  font-style: light;
  font-weight: 200;
}

.outfit-light-white-lx {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-lx);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-white-xxxs {
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
}

.outfit-normal-white-l {
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.outfit-normal-white-xl {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xl);
  font-style: light;
  font-weight: 200;
}

.outfit-normal-white-xxl {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxl);
  line-height: calc(var(--font-size-xxl) * 0.9);
  font-style: normal;
  font-weight: 300;
  padding-bottom: 20px !important;
}

.outfit-normal-white-xxxl {
  color: var(--white);
  font-family: var(--font-family-outfit);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
  padding-bottom: 20px !important;
}

/* --- GRADIENTS --- */
.outfit-gradient-blue-xl,
.outfit-gradient-blue-xxl,
.outfit-gradient-blue-xxxl {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, rgba(190, 216, 255, 1) 0%, rgba(0, 102, 255, 1) 100%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-outfit);
  letter-spacing: 0;
  padding-bottom: 20px !important;
}

.outfit-gradient-blue-xl {
  font-size: var(--font-size-xl);
  line-height: calc(var(--font-size-xl) * 0.9);
}

.outfit-gradient-blue-xxl {
  font-size: var(--font-size-xxl);
  line-height: calc(var(--font-size-xxl) * 0.9);
}

.outfit-gradient-blue-xxxl {
  font-size: var(--font-size-xxxl);
  line-height: calc(var(--font-size-xxxl) * 0.9);
}