:root {
  --primary-yellow: #f4dd53;
  --secondary-yellow: #e9c01b;
  --light-yellow: #d3d2cd;
  --primary-purple: #9146ff;
  --secondary-purple: #400b72;
  --primary-gray: #222222;
}

.text-yellow {
  color: var(--primary-yellow);
}

.text-light-yellow {
  color: var(--light-yellow);
}

.text-purple {
  color: var(--primary-purple);
}

.bg-light-yellow {
  background-color: var(--light-yellow);
}

.bg-black {
  background-color: black;
}

.bg-gray {
  background-color: var(--primary-gray);
}

.bg-yellow {
  background-color: var(--secondary-yellow);
}

.shadow-yellow {
  box-shadow: 0 0 2rem var(--secondary-yellow);
}

.shadow-purple {
  box-shadow: 0 0 2rem var(--primary-purple);
}

.underline-yellow {
  text-decoration: underline;
  text-decoration-color: var(--secondary-yellow);
}

.purple-translucent {
  background-color: rgba(145, 70, 255, 0.2);
}