body{
  background-image: url(waiter.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
.container{
  margin-top: 270px;
  opacity: 0.98;
}
.title{
  color:rgb(0, 138, 92);
  font-family: "PT Serif", serif;
  font-weight: 700;

  font-size: 60px;
}
h3{
  font-size: 18px;
}
.rate{
  margin: 0 auto;
  margin-top: 500px;
  display: block;
  background-color: rgb(245, 245, 247);
  max-width: 700px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  padding: 50px;
  position: relative;
  align-items: center;
}
.smiley-container{
  font-size: 70px;
  position: absolute;
  width: 70px;
  height: 70px; 
  top: 28%;
 
  left: 50%;
  box-shadow: 0 3px 7px rgba(0,0,0,.2);
  border-radius:50px;
  color: rgba(255, 217, 0, 0.664);
  overflow: hidden;
  transform: translateX(-50%);
  display: flex;
}
.star-rating{
  font-size: 47px;
  margin-top: 180px;
}
.fa-regular{
  margin: 1px;
  transform: translate(0);
}
.fa-star {
  color: rgb(201, 201, 201);
  cursor: pointer;
}

.fa-star.active {
  color:rgb(235, 204, 31);
}
@media(max-width:500px){
  body{
    width: 100%;
    height: 100vh;
    background-size: cover;
  }
.rate{
  max-width: 500px;
}
.fa-star{
  font-size: 35px;
}
}