@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

body{
    font-family: 'Roboto', sans-serif;

}

.components{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 90%;
    margin: 10% auto;
}


.review-box{
    border-radius: 10px;
    box-shadow: 1px 3px 3px #ddd;
    width: 420px;
    border: 1px solid #ddd;
    margin: 0 auto;
}

.profile{
    width: 44px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://lh3.googleusercontent.com/a-/AD_cMMQIOXHefPFWPImtvTwUdoxOaiAZGARFLHynPBf7dg=s120-c-c0x00000000-cc-rp-mo-br100);
}

.time{
    margin: 0 !important;
    font-size: 13px;
    font-weight: 100;
    padding-top: 5px;
}

.badge{
    border-radius: 10px;
    box-shadow: 1px 3px 3px #ddd;
    width: 330px;
    border: 1px solid #ddd;
    margin: 0 auto;
}

.top{
    display: flex;
    padding: 10px;
    gap: 20px;
}

.logo{
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-image: url(https://companieslogo.com/img/orig/GOOG-0ed88f7c.png?t=1633218227);
}

.logo2{
    margin: 10px;
    float: right;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    background-size: contain;
    background-image: url(https://companieslogo.com/img/orig/GOOG-0ed88f7c.png?t=1633218227);
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
    margin-bottom: 10px;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
}

.rate-2:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px !important;
    color:#ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.rate-text{
    margin-left: 15px !important;
}

.rate-text > p > a{
    font-weight: bolder;
}

.bottom{
    background-color: #ffc700;
    text-align: center;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 5px;
    box-shadow: 1px 3px 3px #ddd;
}

.name{
    font-weight: 400;
}

.text{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #dddddda8;
}

@media only screen and (max-width: 600px) {

.components{
    display: grid;
    grid-template-columns: 1fr;
    width: 100% !important;
}

.badge{
    width: 90% !important;
    margin: 0 auto;
}

.review-box{
    width: 90% !important;
    margin: 0 auto;
}

.rate-2:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:20px !important;
    color:#ccc;
}

}