* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background-image: url("/images/designs/desktop-design.jpg"); */
  height: 100vh;
  font-family: 'Overpass', sans-serif;
  background-color: hsl(216, 12%, 8%);
}


/* RATING CARD */
.ratingGeneralBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31vw;
  height: 31vw;
  margin: auto;
  padding: 40px;
  transform: translate(-50%, -50%);
  background-color: rgb(33, 40, 50);
  border-radius: 30px;
}

.ratingGeneralBox .starIconCircle {
  display: flex;
  flex-direction: column;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(39, 46, 56);
}

.ratingGeneralBox .starIconCircle img {
  margin: auto;
}

.ratingGeneralBox h2 {
  font-weight: 700;
  font-size: 30px;
  color: white;
}

.ratingGeneralBox p {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  color: hsl(217, 12%, 63%);
}

.ratingGeneralBox .ratingButtons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ratingGeneralBox .ratingButtons .buttonMark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: none;
  font-size: 15px;
  font-weight: 700;
  color: hsl(217, 12%, 63%);
  background-color: rgb(39, 46, 56);
}

.ratingGeneralBox .ratingButtons .buttonMark:hover {
  cursor: pointer;
  background-color:hsl(25, 97%, 53%);
  color: white;
}

.ratingGeneralBox .ratingButtons .buttonMark:focus {
  background-color: hsl(217, 12%, 63%);
  color: white;
}

.ratingGeneralBox .sendButton {
  padding: 15px;
  width: 344px;
  border-radius: 30px;
  border-style: none;
  font-size: 15px;
  font-weight: 700;
  color: white;
  background-color: hsl(25, 97%, 53%);
}

.ratingGeneralBox .sendButton:hover {
  cursor: pointer;
  background-color: white;
  color:hsl(25, 97%, 53%);
}

/* THANK YOU CARD */
.generalBox {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31vw;
  height: 31vw;
  margin: auto;
  padding: 40px;
  transform: translate(-50%, -50%);
  background-color: rgb(33, 40, 50);
  border-radius: 30px;
}

.generalBox img {
  display: block;
  margin: 0 auto;
}

.generalBox .userRatingText {
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 30px;
  background-color: rgb(39, 46, 56);
}

.generalBox .userRatingText p {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: hsl(25, 97%, 53%);
}

.generalBox h2 {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  color: white;
}
.generalBox p {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
  color: hsl(217, 12%, 63%)
}