html {
  position: relative;
  min-height: 100%;
}
body {
  padding-top: 3.5rem;
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
.octicon {
  display: inline-block;
  vertical-align: text-bottom;
  fill: currentColor;
}
.octicon-pencil {
  color: black;
}
.octicon-heart {
  color: red;
}

.rating {
  overflow: hidden;
  display: inline-block;
  vertical-align: text-top;
  font-family: monospace;
  color: orange;
}

.rating-input {
  float: right;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 0 0 -16px;
  opacity: 0;
}

.rating-star {
  cursor: pointer;
  position: relative;
  float: right;
  display: block;
  width: 16px;
  height: 16px;
}

.rating-star::after {
    content: '\2606';
}

.rating:hover .rating-star:hover::after,
.rating:hover .rating-star:hover ~ .rating-star::after,
.rating-input:checked ~ .rating-star::after {
    content: '\2605';
}

.rating-star::after,
.rating:hover .rating-star::after {
  content: '\2606';
}