@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');

body {
  font-family: 'Overpass', sans-serif;
  padding: 0;
  margin: 0;
  background-color: hsl(216, 12%, 8%);
}

section {
  background-color: hsl(213, 19%, 18%);
  width: 300px;
  height: 350px;
  border-radius: 10px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section h1,
section h2 {
  color: hsl(0, 0%, 100%);
}

section p {
  color: hsl(217, 12%, 63%);
}

.section__container {
  padding: 1rem;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


/* rating */
.section__star {
  background-color: hsl(213, 20%, 25%);
  padding: 10px;
  border-radius: 20px;
}

.section__number {
  margin-bottom: 1rem;

  display: flex;
  justify-content: space-around;
}

.section__number button {
  background-color: hsl(213, 20%, 25%);
  color: hsl(217, 12%, 63%);
  padding: 10px 15px;
  border-radius: 20px;
  border: none;

  cursor: pointer;
}

.section__number button:hover {
  background-color: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);
}

.section__number button:focus {
  background-color: hsl(217, 12%, 63%);
  color: hsl(0, 0%, 100%);
}

.section__submit {
  width: 100%;
  border-radius: 20px;
  border: none;
  padding: 10px;
  background-color: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);

  cursor: pointer;
}

.section__submit:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(25, 97%, 53%);
}


/* thank */
.section__thank {
  text-align: center;

  display: none;
}

.section__illust {
  width: 130px;
  margin-top: 1rem;
}

.section__selected {
  background-color: hsl(213, 20%, 25%);
  padding: 5px;
  margin: 16px 40px;
  border-radius: 20px;
}

.section__selected>* {
  color: hsl(25, 97%, 53%);
  display: inline;
}


/* footer */
.attribution {
  font-size: 11px;
  color: hsl(217, 12%, 63%);

  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}