@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.center {
    margin-top: 70px;
    /* margin-left: 100px;
    transform: translate(-8%, -50%); */
}

    .center .stars {
        height: 40px;
        width: 100%;
        text-align: center;
    }

.stars input {
    display: none;
}

.stars label {
    float: right;
    font-size: 50px;
    color: lightgrey;
    margin: 0 5px;
    text-shadow: 1px 1px #bbb;
}

    .stars label:before {
        content: '★';
    }

.stars input:checked ~ label {
    color: #ff5421;
    text-shadow: 1px 1px #c60;
}

.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label {
    color: #ff5421;
}

.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label {
    color: #ff5421;
    text-shadow: 1px 1px #ff5421;
}
.setstar {
    color: #ff5421;
    text-shadow: 1px 1px #c60;
}
/*.stars .result:before {
    content: "";
    position: absolute;
    width: 100%;
    left: 0%;
    transform: translateX(8%);
   
    font-size: 18px;
    font-weight: 500;
    color: #ff5421;
    font-family: 'Poppins', sans-serif;
    display: none;
    top: 11px;
}

.stars input:checked ~ .result:before {
    display: block;
}

.stars #five:checked ~ .result:before {
    content: "I love it ";
}

.stars #four:checked ~ .result:before {
    content: "I like it ";
}

.stars #three:checked ~ .result:before {
    content: "It's good ";
}

.stars #two:checked ~ .result:before {
    content: "I don't like it ";
}

.stars #one:checked ~ .result:before {
    content: "I hate it ";
}*/