html, body {
  height: 100%;
}

.outerframe {
  min-height: 100%;
  position: relative;
}

.outerframe > .container {
  padding-bottom: 10rem;
}

.outerframe > footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 8rem;
}

.rate-star {
  font-size: larger;
  color: transparent;
  background-image: linear-gradient(#ffcc33, #ffcc33), linear-gradient(#cccccc, #cccccc);
  background-position: left, right;
  background-repeat: no-repeat;
  background-size: var(--rate) 100%, calc(100% - var(--rate)) 100%;
  background-clip: text;
  -webkit-background-clip: text;
}

.rate-star:before{
  content: "★★★★";
}

.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 15px;
  border-right: 15px solid  rgba(0,0,0,.125);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -13px;
  top: 15px;
  border-right: 15px solid  #f8f9fa;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}