Interactive rating component with Flexbox

Hey @kristiingco, Excellent work. Your code is neat & clean.🙂

I want to give you some little recommendations. You can give a try, center the card using grid. (it's more simple than flex)

.container {
  height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  display: grid;
  place-content: center;
}

Secondly, you can use linear-gradient for card background:

background: linear-gradient(
    var(--dark-blue), /* hsl(213, 19%, 18%) */
    var(--dark-blue-plus)  /* hsl(213, 19%, 12%) */
  );