/* General reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Custom properties */
:root {
    --ff-base: 'Hanken Grotesk', sans-serif;

    --clr-accent-1: 0, 100%, 67%;
    --clr-accent-2: 39, 100%, 56%;
    --clr-accent-3: 166, 100%, 37%;
    --clr-accent-4: 234, 85%, 45%;

    --clr-primary-hsl-400: 252, 100%, 67%;
    --clr-primary-hsl-500: 256, 72%, 46%;
    --clr-secondary-hsl-400: 241, 81%, 54%;
    --clr-secondary-hsl-500: 241, 72%, 46%;

    --clr-primary-400: hsl(var(--clr-primary-hsl-400));
    --clr-primary-500: hsla(var(--clr-primary-hsl-500));
    --clr-secondary-400: hsl(var(--clr-secondary-hsl-400));

    --gradient-primary: linear-gradient(var(--clr-primary-400),
            var(--clr-secondary-400));

    --gradient-to-transparent: linear-gradient(var(--clr-primary-500),
            hsl(var(--clr-secondary-hsl-500), 0));


    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-200: hsl(221, 100%, 96%);
    --clr-neutral-300: hsl(241, 100%, 89%);
    --clr-neutral-400: hsl(224, 30%, 27%);

    --fw-regular: 500;
    --fw-semi-bold: 700;
    --fw-bold: 800;

    --fs-300: 0.938rem;
    --fs-400: 1.125rem;
    --fs-500: 1.5rem;
    --fs-550: 1.75rem;
    --fs-600: 3.125rem;
    --fs-700: 4.5rem;
}

/* Styling */
body {
    font-family: var(--ff-base);
    font-size: var(--fs-400);
    color: var(--clr-neutral-400);
}

@media (min-width: 600px) {
    body {
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
}

.flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grid-flow {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.section-title {
    font-size: var(--fs-500);
    font-weight: var(--fw-semi-bold);
}

.button {
    color: var(--clr-neutral-100);
    background-color: var(--clr-neutral-400);
    padding: 1rem;
    line-height: 1;
    border: 0;
    border-radius: 100vmax;
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: var(--gradient-primary);
}

.result-summary {
    max-width: 46rem;
    display: grid;
}

@media (min-width: 600px) {
    .result-summary {
        margin-inline: 1rem;
        grid-template-columns: 1fr 1fr;
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: .5rem 1rem 3rem var(--clr-neutral-200);
    }
}

.result {
    text-align: center;
    color: var(--clr-neutral-300);
    background: var(--gradient-primary);
    padding-block: 2.5rem;
    padding-inline: 2rem;
    border-radius: 0 0 2rem 2rem;
}

@media (min-width: 600px) {
    .result {
        border-radius: 2rem;
        gap: 2rem;
        padding-inline: 3.75rem;
    }
}

.result-score {
    display: grid;
    place-content: center;
    width: 12rem;
    background: var(--gradient-to-transparent);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;

}

.result-score span {
    font-size: 4.5rem;
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-100);
}

.result-rank {
    color: var(--clr-neutral-100);
    font-size: var(--fs-550);
    font-weight: var(--fw-semi-bold);
}

.summary {
    display: grid;
    padding: 2.5rem;
    gap: 2rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    border-radius: 0.5rem;
    background-color: hsl(var(--item-color), 0.1);
}

.summary-item-title {
    color: hsl(var(--item-color));
    font-weight: var(--fw-semi-bold);
}

.accent-1 {
    --item-color: var(--clr-accent-1);
}

.accent-2 {
    --item-color: var(--clr-accent-2);
}

.accent-3 {
    --item-color: var(--clr-accent-3);
}

.accent-4 {
    --item-color: var(--clr-accent-4);
}
.summary-score {
    font-weight: var(--fw-bold);
    color: hsl(224, 30%, 27%, 0.5);
}
.summary-score span {
    color: var(--clr-neutral-400);
}