:root { 
  --black: #000000;
  --ffde00: #ffde00;
  --mirage: #0f1825;
  --mountain-mist: #999999;
  --sunglow: #f9ce37;
  --white: #ffffff;
 
  --font-size-l: 14px;
  --font-size-m: 11px;
  --font-size-s: 10px;
  --font-size-xl: 16px;
  --font-size-xxl: 17px;
  --font-size-xxxl: 21px;
  --font-size-xxxxl: 27px;
 
  --font-family-roboto: "Roboto", Helvetica;
}
.roboto-10-regular {
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

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

.roboto-bold-sizzling-sunrise-11px {
  color: var(--ffde00);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

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

.roboto-normal-mountain-mist-16px {
  color: var(--mountain-mist);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 400;
}

.roboto-normal-black-17px {
  color: var(--black);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.roboto-normal-sunglow-14px {
  color: var(--sunglow);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

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

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