:root {
    /* Primary Colors */
    --pri-light-red: hsl(0, 100%, 67%);
    --pri-light-red-bg: hsla(0, 100%, 67%, 0.050);
    --pri-orangey-yellow: hsl(39, 100%, 56%);
    --pri-orangey-yellow-bg: hsl(39, 100%, 56%, 0.050);
    --pri-green-teal: hsl(166, 100%, 37%);
    --pri-green-tea-bg: hsl(166, 100%, 37%, 0.050);
    --pri-cobalt-blue: hsl(234, 85%, 45%);
    --pri-cobalt-blue-bg: hsl(234, 85%, 45%, 0.050);

    /* Gradient Colors */
    --grad-light-slate-blue-bg: hsl(252, 100%, 67%);
    --grad-light-royal-blue-bg: hsl(241, 81%, 54%);

    --grad-violet-blue-circle: hsla(256, 72%, 46%, 1);
    --grad-persian-blue-circle: hsla(241, 72%, 46%, 0);

    /* Neutral */
    --neu-white: hsl(0, 0%, 100%);
    --neu-pale-blue: hsl(221, 100%, 96%);
    --neu-light-lavender: hsla(241, 100%, 89%);
    --neu-light-lavender-2: hsla(241, 100%, 89%, 0.567);
    --neu-dark-gray-blue: hsl(224, 30%, 27%);
    --neu-dark-gray-blue-2: hsla(224, 30%, 27%, 0.5);

    /* Font weights */
    --lightweight: 500;
    --medium: 700;
    --heavy: 800;

    /* Notes: Use transparency to get the color variations necessary to match the design. Hint: look into using `hsla()`.*/
}

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

html, body {
    width: 100dvw;
    height: 100dvh;

    font-family: "Hanken Grotesk", serif;
    font-optical-sizing: auto;
}

/* Mobile viewport */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--neu-pale-blue);
}

main {
    width: 100dvw;
    height: 100dvh;
    max-width: 375px;
    background-color: var(--neu-white);
}

.result {
    background: linear-gradient(to top, var(--grad-light-royal-blue-bg), var(--grad-light-slate-blue-bg));

    border-radius: 0rem 0rem 2rem 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: min-content;
    text-align: center;
}

.result h1 {
    font-size: 0.875rem;
    margin: 1rem 0rem;
    color: var(--neu-light-lavender);
    font-weight: var(--medium);
}

.result h3 {
    color: var(--neu-white);
    font-size: 1.125rem;
    font-weight: var(--medium);
    margin: 1rem 0rem 0.25rem;
}

.result p {
    color: var(--neu-light-lavender);
    font-weight: var(--lightweight);
    font-size: 0.875rem;
    width: 250px;
    margin: 0.25rem 0rem 1.5rem;
}
.calculated-score {
    border-radius: 50%;
    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    background: linear-gradient(to top, var(--grad-persian-blue-circle), var(--grad-violet-blue-circle));
    color: var(--neu-white);
}

.calculated-score h2 {
    font-size: 3rem;
}

.calculated-score p {
    font-size: 1.25rem;
    color: var(--neu-light-lavender-2);
    font-weight: var(--lightweight);
    margin: 0;
    padding: 0;
}

#resultSection {
    padding: 0rem 2rem;
    margin: 1rem 0rem 1rem;
}

#resultSection h3 {
    margin: 0rem 0rem 0.25rem;
}

.category {
    display: flex;
    align-items: center;
    margin: 0.75rem 0rem;
    border-radius: 0.625rem;
    padding: 1rem;
    font-size: 1rem;
}

.left-side {
    display: flex;
    width: 50%;
}

.left-side img.icon {
    margin: 0rem 1rem 0rem 0rem;
}

.right-side {
    width: 50%;
    text-align: right;
}

.right-side strong {
    color: var(--neu-dark-gray-blue);
    font-weight: 900;
}

.right-side p.score {
    color: var(--neu-dark-gray-blue-2);
    font-weight: var(--heavy);
}

#Reaction {
    background-color: var(--pri-light-red-bg);
    color: var(--pri-light-red);
    font-weight: var(--heavy);
}

#Memory {
    background-color: var(--pri-orangey-yellow-bg);
    color: var(--pri-orangey-yellow);
    font-weight: var(--heavy);
}

#Verbal {
    background-color: var(--pri-green-tea-bg);
    color: var(--pri-green-teal);
    font-weight: var(--heavy);
}

#Visual {
    background-color: var(--pri-cobalt-blue-bg);
    color: var(--pri-cobalt-blue);
    font-weight: var(--heavy);
}

.button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
    border: none;
    background-color: var(--neu-dark-gray-blue);
    color: var(--neu-pale-blue);
    font-weight: 600;
    font-size: 1rem;
    margin: 0.5rem 0rem;
}

button:hover {
    cursor: pointer;
    background-color: var(--grad-light-royal-blue-bg);
}

footer {
    display: none;
}

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

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


/* Desktop viewport */
@media only screen and (min-width:426px) {
    main {
        max-width: 700px;
        max-height: 425px;
        display: flex;
    }

    section.result, #resultSection {
        height: 100%;
        width: 50%;
    }

    main, section.result {
        border-radius: 2rem;
    }

    .result h1 {
        font-size: 1.25rem;
        font-weight: 500;
        margin: 0rem 0rem 1.5rem;
    }

    .calculated-score {
        margin: 1rem;
    }

    #resultSection {
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    section.result h3 {
        font-size: 1.25rem;
        font-weight: 500;
    }

    section.result p {
        padding: 0.5rem 1.5rem;
    }
}