.rating {
    display: flex;
    padding: 0;
    margin: 0;
}

.cont {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 0 2px #b3acac;
}

.rating li {
    list-style-type: none
}

.rating-item {
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 2em;
    color: gold;
    /* color: rgb(218, 180, 11); */
}

.star {
    content: "\2605";
    color: gold;
    /* color: rgb(218, 180, 11); */
}


/* initial: make all stars full */

.rating-item::before {
    content: "\2605";
}

.rating-item-2::before {
    content: "\2605";
}


/* make until the clicked star (the rest) empty */

.rating-item.active~.rating-item::before {
    content: "\2606";
}

.rating-item-2.active~.rating-item::before {
    content: "\2606";
}


/* on hover make all full */

.rating:hover .rating-item::before {
    content: "\2605";
}


/* make until the hovered (the rest) empty */

.rating-item:hover~.rating-item::before {
    content: "\2606";
}