/* .star-widget input{
  display: none;
} */
.star-widget label{
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
  color: #fd4;
}
input:checked ~ label{
  color: #fd4;
}
input#rate-5:checked ~ label{
  color: #fe7;
  text-shadow: 0 0 20px rgb(95, 46, 12);
}
#rate-1:checked ~ header:before{
  content: "I just hate it ";
}
#rate-2:checked ~ header:before{
  content: "I don't like it ";
}
#rate-3:checked ~ header:before{
  content: "It is awesome ";
}
#rate-4:checked ~ header:before{
  content: "I just like it ";
}
#rate-5:checked ~ header:before{
  content: "I just love it ";
}

form header{
  width: 100%;
  font-size: 25px;
  color: rgb(63, 156, 0);
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}


/* .star-edit input{
  display: none;
} */
.star-edit label{
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
  color: #fd4;
}
input:checked ~ label{
  color: #fd4;
}
input#r-5:checked ~ label{
  color: #fe7;
  text-shadow: 0 0 20px rgb(95, 46, 12);
}
#r-1:checked ~ header:before{
  content: "I just hate it ";
}
#r-2:checked ~ header:before{
  content: "I don't like it ";
}
#r-3:checked ~ header:before{
  content: "It is awesome ";
}
#r-4:checked ~ header:before{
  content: "I just like it ";
}
#r-5:checked ~ header:before{
  content: "I just love it ";
}

form header{
  width: 100%;
  font-size: 25px;
  color: rgb(63, 156, 0);
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}