/* Credits to MarcMalignan */

@-webkit-keyframes grow {
    0% { font-size: 10px; }
    75% { font-size: 15px; }
    100% { font-size: 30px; }
}

html, body { 
    height: 100%; 
    margin: 0; 
}
body {
    background: rgb(20, 50, 74);
}

.rating {
    position: absolute;
    width: 450px;
    height: 90px;
    top:50%; left:50%;
    margin: -45px 0 0 -225px;
}

.rating .star {
    float: left;
    /* width: 90px; */
    width: 40px;
    line-height: 90px;
    text-align: center;
    /* font-size: 100px; */
    font-size: 30px;
    -webkit-animation: grow .8s cubic-bezier(0,3,.3,0);
    text-shadow: 0 4px 4px rgba(0,0,0,.3);
}
.rating .star:after {
    content: '\2606';
    color: gold;
}
.rating .star:nth-child(2) { -webkit-animation-duration: .9s; }
.rating .star:nth-child(3) { -webkit-animation-duration: 1s; }
.rating .star:nth-child(4) { -webkit-animation-duration: 1.1s; }
.rating .star:nth-child(5) { -webkit-animation-duration: 1.2s; }