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

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

img {
    display: block;
    margin: auto;
}

/* variables */
:root {
    /* colors */
    --primary: 25, 97%, 53%;
    --clr-primary: hsl(25, 97%, 53%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-light-gray: hsl(217, 12%, 63%);
    --clr-medium-gray: hsl(216, 12%, 54%);
    --clr-dark-gray: hsl(210, 19%, 18%);
    --clr-dark-blue: hsl(215, 22%, 15%);
    --clr-darker-blue: hsl(216, 12%, 8%);

    --font-family: 'Overpass', sans-serif;
    /* font weight */
    --fw-normal: 400;
    --fw-bold: 700;

    /* font sizes */
    --fs-400: 15px;
    --fs-500: 18px;
    --fs-600: 22px;

    --circle-diameter: 50px
}



body {
    min-height: 100vh;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    background-color: var(--clr-darker-blue);

    font-family: var(--font-family);
    font-size: var(--fs-400);

    padding: 20px;
}

.card {
    max-width: 400px;

    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    text-align: left;
    background-color: var(--clr-dark-blue);
    border-radius: 30px;
}

h1 {
    color: var(--clr-white);
    line-height: 1;
    padding-bottom: 0;
}

p {
    color: var(--clr-medium-gray)
}

/* forms */

fieldset {
    border: none;
}

.radio-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.radio {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

label {
    padding-top: 0.18em;
    color: var(--clr-medium-gray);
    font-size: var(--fs-500);
    vertical-align: middle;
}

input[type="radio"] {
    position: absolute;
    width: 1em;
    height: 1em;
    opacity: 00%;
    margin: 0;
}

input[type="radio"]:checked+label,
input[type="radio"]:hover+label {
    background-color: var(--clr-medium-gray);
    color: var(--clr-white);
}

input[type="radio"]:active+label {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

button {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    height: var(--circle-diameter);
    border-radius: var(--circle-diameter);
    border: none;
    color: var(--clr-white);
    background-color: var(--clr-primary);
}

button:active {
    background-color: var(--clr-white);
    color: var(--clr-primary);
}

.attribution {
    font-size: 11px;
    text-align: center;
    position: fixed;
    bottom: 0;
    color: var(--clr-medium-gray);
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

/* thanks card */
.selected-rating {
    background-color: var(--clr-dark-gray);
    color: hsl(var(--primary), 60%);
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

/* utility */
.single-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.circle {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    border-radius: var(--circle-diameter);
    background-color: var(--clr-dark-gray);

    display: flex;
    justify-content: center;
    align-items: center;
}

.hide {
    display: none;
}

.center-text {
    text-align: center;
}