fieldset,
label {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.5em;
  margin: 10px;
}

.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}

.rating > label:before {
  margin: 5px;
  font-size: 1.75em;
  font-weight: 900;
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  content: "\f005";
}

.rating > .half:before {
  content: "\f089";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  font-weight: 900;
}

.rating > label {
  color: #ddd;
  float: right;
  position: relative;
}

.rating label > span {
  position: absolute;
  top: 1em;
  right: 0.4em;
  width: 1em;
  z-index: 999;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating > label:hover, /* hover current star */
.rating > label:hover ~ label {
  color: #f9a11b;
}

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
  color: #f9a11b;
}