rmcg.dev/projects/FrontendMentor/newbie/interactive-rating-component/css/style.css

/*
 * Design sizes:
 *  Mobile: 375x667 (327x360)
 *  Desktop: 1440x800 (412x416)
 */

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

:root {
    /* Colors */
    --col-orange: hsl(25, 97%, 53%);

    --col-white: hsl(0, 0%, 100%);
    --col-light-grey: hsl(217, 12%, 63%);
    --col-medium-grey: hsl(216, 12%, 54%);
    --col-very-dark-blue: hsl(216, 12%, 8%);
    --col-dark-blue: hsl(213, 19%, 18%);

    --col-button: var(--col-orange);
    --col-button-hover: var(--col-white);
    --col-background-page: var(--col-very-dark-blue);
    --col-background-component: radial-gradient(
        98.96% 98.96% at 50% 0%,
        #232a34 0%,
        #181e27 100%
    );
    --col-background-rating: var(--col-dark-blue);
    --col-font-rating: var(--col-medium-grey);
    --col-font-selected-rating: var(--col-orange);
    --col-font-header: var(--col-white);
    --col-font-body: var(--col-light-grey);
    --col-background-button-hover: var(--col-white);
    --col-font-button-hover: var(--col-orange);

    --col-font-selected-rating: var(--col-white);
    --col-background-selected-rating: var(--col-medium-grey);

    /* Typography */
    --fs-header: 1.5rem;
    --lh-header: 125%;
    --fw-header: 700;

    --fs-body: 0.875rem;
    --lh-body: 157%;
    --fw-body: 400;

    --fs-rating: 0.875rem;
    --lh-rating: 171%;
    --ls-rating: 0.175px;

    --fs-button: 0.875rem;
    --lh-button: 1.2857142857;
    --ls-button: 1.86667px;

    --border-radius: 0.9375rem;
}

body {
    min-height: 100vh;
    font-family: "Overpass", sans-serif;

    /* margin: 0 auto; */
    display: grid;
    place-content: center;

    background-color: var(--col-background-page);
}

.rating-component {
    max-width: 327px;
    background: var(--col-background-component);
    border-radius: var(--border-radius);
    /* margin: 0 1.5rem; */
}
.rating-component-front {
    padding: 24px 24px 32px 24px;
}

.star-icon {
    display: block;
    background-color: var(--col-dark-blue);

    border-radius: 50%;
    text-align: center;
    width: 40px;

    padding: 13px;
}

.star-icon:before {
}

.header {
    font-size: var(--fs-header);
    line-height: var(--lh-header);
    color: var(--col-font-header);
}

.body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--col-font-body);
}

.rating-component__header {
    margin-top: 22px; /* 1rem;*/
}
.rating-component__body {
    margin-top: 17px;
    /* margin-top: 33px; */
    margin-left: 2px;
}

#ratingForm {
    margin-top: 1.5rem;
}

#ratingForm fieldset {
    border: none;
}

/* #ratingForm input {
    visibility: hidden;
} */

.radio_container {
    /* display: flex; */
    /* gap: 30px; */
}

.ratingForm__label {
    display: inline-block;

    cursor: pointer;
    border-radius: 50%;
    background-color: var(--col-background-rating);

    font-size: var(--fs-rating);
    line-height: var(--lh-rating);
    letter-spacing: var(--ls-rating);

    font-weight: 700;
    color: var(--col-font-rating);
    /* padding: 13px 18.12px 12px 17.29px; */
    padding: 10px;
    text-align: center;
    width: 42px;
    height: 42px;
}

#ratingForm input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

#ratingForm label {
    margin-right: 13px;
}

#ratingForm label:last-of-type {
    margin-right: 0px;
}

#ratingForm label:hover {
    background-color: var(--col-orange);
    color: var(--col-white);
}
.radio_container input[type="radio"]:focus + label {
    outline: 2px dashed var(--col-white);
    color: var(--col-white);
    background-color: var(--col-medium-grey);
}

.radio_container input[type="radio"]:checked + label {
    color: var(--col-white);
    background-color: var(--col-medium-grey);
}

.btn {
    border-radius: 22.5px;
    padding: 13px 110px 13px 107px;
    text-align: center;

    font-family: "Overpass", sans-serif;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    letter-spacing: var(--ls-button);
    font-weight: 700;

    text-transform: uppercase;

    border: none;
}

.btn-submit {
    margin-top: 1.5rem;
    margin-inline: auto;

    color: var(--col-white);
    background-color: var(--col-button);
}

.btn-submit:where(:focus, :hover) {
    color: var(--col-orange);
    background-color: var(--col-background-button-hover);
}

.hidden {
    display: none;
}

.visible {
    display: block;
}
/*  for rating-component-back */

.rating-component-back {
    /* display: none; */
    padding: 24px 24px 37px 24px;

    text-align: center;
}

.thank-you-img {
    margin-top: 10px;
    width: 50%;
}

.rating-component__rating {
    margin-top: 24px;
    margin-inline: 55px;

    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--col-orange);

    border-radius: 22.5px;
    background-color: var(--col-dark-blue);
    padding: 5px 12px;
}

.rating-component__header-submitted {
    margin-top: 24px;
}

.rating-component__body-submitted {
    margin-top: 14px;
}

@media screen and (min-width: 62.5rem) {
    :root {
        /* Typography */
        --fs-header: 1.75rem;

        --fs-body: 0.9375rem;
        --lh-body: 160%;

        --fs-rating: 1rem;
        --lh-rating: 150%;
        --ls-rating: 0.2px;

        --fs-button: 15px;
        --lh-button: 1.2666666667;
        --ls-button: 2px;

        --border-radius: 30px;
    }

    .rating-component {
        max-width: 25.75rem;
    }

    .rating-component-front {
        padding: 32px 39px 32px 32px;
    }

    .star-icon {
        width: 48px;

        padding: 16px;
    }

    .rating-component__header {
        margin-top: 40px;
    }

    .rating-component__body {
        margin-top: 10px;
    }

    .ratingForm__label {
        width: 51px;
        height: 51px;
        padding: 15px;
    }

    #ratingForm label {
        margin-right: 17px;
    }

    #ratingForm label:nth-child(odd) {
        margin-right: 15px;
    }

    .btn {
        padding: 14px 138px 12px 137px;
    }
    .btn-submit {
        margin-top: 32px;
        margin-inline: unset;
    }

    .rating-component-back {
        padding: 45px 40px 45px 32px;
        /* padding: 32px 39px 40px 32px; */
    }

    .thank-you-img {
        /* margin-top: 16px; */
        width: 48%;
    }

    .rating-component__rating {
        margin-top: 22px;
        margin-inline: 60px;
        padding: 4px 19px 4px 20px;
    }

    .rating-component__header-submitted {
        margin-top: 32px;
    }

    .rating-component__body-submitted {
        margin-top: 12px;
    }
}