/* Minimal Reset */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: inherit;
}

ol,
ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Font-face Declarations */

@font-face {
    font-family: 'Hanken Grotesk';
    src: url(assets/fonts/HankenGrotesk-VariableFont_wght.ttf) format('truetype');
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
}

/* Root Declarations */
:root {
    /* Layout - Widths */

    --mw-desktop: 90rem;
    /* mw desktop is 1440px */

    --mw-mobile: 23.438rem;
    /* mw mobile is 375px */

    /* Colors - Primary*/
    --clr-prm-lred: hsl(0, 100%, 67%);
    --clr-prm-oyellow: hsl(39, 100%, 56%);
    --clr-prm-gteal: hsl(166, 100%, 37%);
    --clr-prm-cblue: hsl(234, 85%, 45%);

    /* Colors - Gradients */
    --clr-grd-lsblue: hsl(252, 100%, 67%);
    --clr-grd-lrblue: hsl(241, 81%, 54%);
    --clr-grd-vblue: hsla(256, 72%, 46%, 1);
    --clr-grd-pblue: hsla(241, 72%, 46%, 1);

    /* Colors - Neutral */
    --clr-neut-white: hsl(0, 0%, 100%);
    --clr-neut-paleblue: hsl(221, 100%, 96%);
    --clr-neut-lightlavender: hsl(241, 100%, 89%);
    --clr-neut-dgblue: hsl(224, 30%, 27%);

    /* Fonts - Font Family */
    --ff-primary: 'Hanken Grotesk', 'san-serif';

    /* Fonts - Font Weights */
    --fw-reg: 500;
    --fw-semi-bold: 700;
    --fw-bold: 800;

    /* Fonts - Font Size */
    --fs-100: 0.5rem;
    --fs-200: 0.75rem;
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.250rem;
    --fs-700: 1.5rem;
    --fs-800: 2rem;
    --fs-900: 2.5rem;
}

/* Desktop - General Styling */
body {
    font-family: var(--ff-primary);
    font-size: var(--fs-500);
    color: var(--clr-neut-dgblue);
    position: relative;
}

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

.flex-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

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

.grid-flow[data-spacing="large"] {
    gap: 2rem;
}

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

.button {
    color: var(--clr-neut-white);
    font-weight: var(--fw-semi-bold);
    line-height: 1;
    background: var(--clr-neut-dgblue);
    padding: 1rem 2rem;
    border: 0;
    border-radius: 100vw;
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: 
    linear-gradient(var(--clr-grd-lsblue), 
    var(--clr-grd-lrblue));
}

.result-summary {
    --padding: 2.5rem;
    --border-radius: 2rem;


    max-width: 46rem;
    display: grid;
}

@media (min-width: 600px) {
    .result-summary {
        margin-inline: 1rem;
        grid-template-columns: 1fr 1fr;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: .5rem 1rem 3rem hsl(224, 30%, 27%, .2);
    }
}

.results {
    color: hsl(0, 0%, 100%, .7);
    text-align: center;
    padding: var(--padding) calc(var(--padding) * 1.5);
    background: linear-gradient(var(--clr-grd-lsblue), 
    var(--clr-grd-lrblue));
    border-radius:0 0 var(--border-radius) var(--border-radius);
}

@media (min-width: 600px) {
    .results {
        border-radius: var(--border-radius);
    }
}

.result-score {
    display: grid;
    place-content: center;
    width: 12rem;
    margin-inline: auto;
    background: linear-gradient(var(--clr-grd-lrblue), 
    var(--clr-grd-lsblue));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.result-score span {
    display: block;
    font-size: 5rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--clr-neut-white);
}

.result-rank {
    color: var(--clr-neut-white);
    font-size: 2rem;
    font-weight: var(--fw-bold);
}

.summary {
    padding: var(--padding);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-radius: .5rem;
    background: hsl(0, 100%, 67%, .1);
}

.summary-item svg {
    stroke: var(--item-color);
}

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

.summary-item[data-item-type="accent-1"] {
    --item-color: var(--clr-prm-lred);
    stroke: var(--item-color);
}
.summary-item[data-item-type="accent-2"] {
    --item-color: var(--clr-prm-oyellow);
    stroke: var(--item-color);
}
.summary-item[data-item-type="accent-3"] {
    --item-color: var(--clr-prm-gteal);
    stroke: var(--item-color);
}
.summary-item[data-item-type="accent-4"] {
    --item-color: var(--clr-prm-cblue);
    stroke: var(--item-color);
}

.summary-score {
    font-weight: var(--fw-bold);
    color:hsl(224, 30%, 27%, .5);
}

.summary-score span {
    color: var(--clr-neut-dgblue);
}

/* Attribution */

.footer {
position: absolute;
inset: auto 0 0 0;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

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