@import "./avatar.css";
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);

/* --------------main content css------------------ */
.rating{
    border: none;
    float: left;
}

.rating > input{
    display: none;
}

.rating > label:before{
    content: '\f005';
    font-family: FontAwesome; 
    margin: 5px;
    font-size: 5rem;
    display: inline-block;
    cursor: pointer;
}
.rating > .half:before{
    content: '\f089';
    position: absolute;
    cursor: pointer;
}
.rating > label{
    color:  var(--background-color); 
    float: right; 
  cursor: pointer;
}

.rating> input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label{
    color: var(--secondary-color);
}
.rating > input:checked + label:hover,
.rating > input:checked  ~  label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label{
    color: var(--primary-color)
}


.rating-box{
    width: 30rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: center;
    align-items: center;
    
}
.rating-submit-button{
    width: 5rem;
    height: 4rem;
     margin-bottom: 2rem;
    background-color: transparent;
    color: var(--secondary-color);
}
#rating-value{
    font-size: 1.5rem;
	text-align: center;
}