style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);


#view-source {
  position: fixed;
/*    display: block;*/
  display: none;
  right: 0;
  bottom: 0;
  margin-right: 40px;
  /* margin-bottom: 40px; */
  z-index: 900;
}


div.stars
{
  width: 270px;
  display: inline-block;
}

input.star
{
  display: none;
}

label.star
{
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before
{
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before
{
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before
{
  color: #F62;
}

label.star:hover
{
  transform: rotate(-15deg) scale(1.3);
}

label.star:before
{
  content: '\f006';
  font-family: FontAwesome;
}

p
{
font-family: 'Roboto Mono', monospace;
}


label.star {
  font-size: 20px;
}

.legends {
  width: 50%;
  margin-left: 0px;
  left: auto;
  right: auto;
}

.stars {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}

body{
  height: 100vh;
}

.page-footer {
  padding-top: 20px;
  width: 100vw;
}

@media only screen and (max-width:650px) {
  .legends {

    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }

  .stars {

    width: 100%;


  }
}