.box{
    width: 50%; 
    }
    
    p{
    font-size:24px;
    margin: 0;
    padding:0;
    }
    
    .rating{
    position:relative;
    display:flex;
    flex-direction: row-reverse;
    margin-top:0px; 
    margin-bottom:40px;  
    border: 1px solid #000;
    box-sizing: border-box;
    background:#f00;
    background: linear-gradient(to right, #f00 , #f00, #f00, #f00, #f00, #f00, #ff0, #ff0, #ff0, #0f0, #0f0);
    }
    
    
    .rating label{
    display:block;
    cursor:pointer;  
    width:10%;  
    height:40px;  
    display:flex;  
    justify-content:center;  
    align-items:center;  
    transition: 0.5s;  
    background: #fff;  
    color:#000;  
    font-size:20px;  
    border-right:1px solid #000;  
    }
    /*
    .rating input{
        display:none;
    }
    */
    #rate1:hover ~ label, #rate2:hover ~ label, #rate3:hover ~ label, #rate4:hover ~ label, #rate5:hover ~ label, #rate6:hover ~ label{
        background:#f00 ;
    }
    #rate7:hover ~ label, #rate8:hover ~ label{
        background:#ff0 ;
    }
    #rate9:hover ~ label, #rate10:hover ~ label{
        background:#0f0 ;
    }
    
    
    #rate1:checked ~ label, #rate2:checked ~ label, #rate3:checked ~ label, #rate4:checked ~ label, #rate5:checked ~ label, #rate6:checked ~ label  {
        background: #f00;
    }
    #rate7:checked ~ label, #rate8:checked ~ label  {
        background: #ff0;
    }
    #rate9:checked ~ label, #rate10:checked ~ label  {
        background: #0f0;
    }
    
    @media only screen and (max-width: 600px) {
        .box{
            width: 100%; 
            }
    }