:root { 
  --alto: #d9d9d9;
  --black: #000000;
  --blaze-orange: #ff6700;
  --clementine: #e95e00;
  --cloud: #c4c4c4;
  --gray-1: #333333;
  --gray-2: #4f4f4f;
  --gray-6: #f2f2f2;
  --hp-dark: #0f1a23;
  --hp-dark-lighter: #0f1a23cc;
  --silver: #bdbdbd;
  --white: #ffffff;
 
  --font-size-l: 21px;
  --font-size-m: 20px;
  --font-size-s: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --font-size-xxxl: 44px;
  --font-size-xxxxl: 86px;
 
  --font-family-satoshi-black: "Satoshi-Black", Helvetica;
  --font-family-satoshi-bold: "Satoshi-Bold", Helvetica;
  --font-family-satoshi-medium: "Satoshi-Medium", Helvetica;
  --font-family-satoshi-regular: "Satoshi-Regular", Helvetica;
}
.hp-h1 {
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

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

.hp-h3 {
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.hp-top-text {
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.hp-h2 {
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.hp-subtitle {
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

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

.satoshi-bold-blaze-orange-20px {
  color: var(--blaze-orange);
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

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

.satoshi-medium-clementine-21px {
  color: var(--clementine);
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

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

.satoshi-medium-mine-shaft-20px {
  color: var(--gray-1);
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.satoshi-medium-mirage-20px {
  color: var(--hp-dark-lighter);
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

.satoshi-bold-mirage-24px {
  color: var(--hp-dark);
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.satoshi-regular-normal-mirage-24px {
  color: var(--hp-dark);
  font-family: var(--font-family-satoshi-regular);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.satoshi-bold-mirage-72px {
  color: var(--hp-dark);
  font-family: var(--font-family-satoshi-bold);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
}

.satoshi-bold-mine-shaft-72px {
  color: var(--gray-1);
  font-family: var(--font-family-satoshi-bold);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
}

.satoshi-bold-mine-shaft-59px {
  color: var(--gray-1);
  font-family: var(--font-family-satoshi-bold);
  font-size: 59px;
  font-style: normal;
  font-weight: 700;
}

.satoshi-medium-clementine-20px {
  color: var(--clementine);
  font-family: var(--font-family-satoshi-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}

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

.satoshi-bold-abbey-24px {
  color: var(--gray-2);
  font-family: var(--font-family-satoshi-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.satoshi-black-mirage-48px {
  color: var(--hp-dark);
  font-family: var(--font-family-satoshi-black);
  font-size: 48px;
  font-style: normal;
  font-weight: 900;
}
