/* Complete CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body,
h1,
h2,
p {
    margin-block-end: 0;
}

body {
    min-height: 100vh;
    line-height: 1.5;
}

h1,
h2,
button {
    line-height: 1.1;
}

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

button {
    font-family: inherit;
    font-size: inherit;
}

ul,
li {
    list-style: none;
}

/* Linking Fonts */
@font-face {
    font-display: swap;
    font-family: "Hanken Grotesk", sans-serif;
    font-style: normal;
    font-weight: 500;
    src: url(./assets/fonts/hanken-grotesk-v12-latin-500.woff2);
}

@font-face {
    font-display: swap;
    font-family: "Hanken Grotesk", sans-serif;
    font-style: normal;
    font-weight: 700;
    src: url(./assets/fonts/hanken-grotesk-v12-latin-700.woff2);
}

@font-face {
    font-display: swap;
    font-family: "Hanken Grotesk", sans-serif;
    font-style: normal;
    font-weight: 800;
    src: url(./assets/fonts/hanken-grotesk-v12-latin-800.woff2);
}

/* Global Changes w/ Root */
:root {
    /* Colors */
    --clr-light-red-15: hsla(0, 100%, 67%, 15%);
    --clr-light-red: hsl(0, 100%, 67%);

    --clr-orangey-yellow-15: hsla(39, 100%, 56%, 15%);
    --clr-orangey-yellow: hsl(39, 100%, 56%);

    --clr-green-teal-15: hsla(166, 100%, 37%, 15%);
    --clr-green-teal: hsl(166, 100%, 37%);

    --clr-cobalt-blue-15: hsla(234, 85%, 45%, 15%);
    --clr-cobalt-blue: hsla(234, 85%, 45%);

    --clr-white: hsl(0, 0%, 100%);
    --clr-grey: hsl(0, 0%, 50%);
    --clr-pale-blue: hsl(221, 100%, 96%);
    --clr-light-lavender: hsl(241, 100%, 89%);
    --clr-dark-gray-blue: hsl(224, 30%, 27%);

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

    /* Circle Gradient Colors */
    --clr-violet-blue: hsla(256, 72%, 46%, 1);
    --clr-persian-blue: hsla(241, 72%, 46%, 0);

    /* Font */
    --FF: "Hanken Grotesk", sans-serif;

    --FS-14: 0.9rem;/* 14px */
    --FS-16: 1rem;  /* 16px */
    --FS-18: 1.1rem;/* 18px */
    --FS-48: 3rem;  /* 48px */

    --FW-500: 500;
    --FW-700: 700;
    --FW-800: 800;
}

/* Typography */
.site__container {
    font-family: var(--FF);
    font-size: var(--FS-16);
}

.result__title,
.score__text,
.outcome__title,
.outcome__description {
    text-align: center;
}

.result__title,
.score__value {
    font-weight: var(--FW-800);
}

.result__title {
    color: var(--clr-light-lavender);
    font-size: var(--FS-18);
}

.score__value--large {
    font-size: var(--FS-48);
    color: var(--clr-white);
}

.score__overall--text {
    color: var(--clr-light-lavender);
    text-align: center;
}

.outcome__title,
.outcome__description {
    color: var(--clr-white);
}

.outcome__description {
    font-size: var(--FS-14);
}

.summary__title {
    font-size: var(--FS-16);
}

.score__category {
    font-weight: var(--FW-700);
    font-size: var(--FS-14);
}

.score__category--reaction {
    color: var(--clr-light-red);
}

.score__category--memory {
    color: var(--clr-orangey-yellow);
}

.score__category--verbal {
    color: var(--clr-green-teal);
}

.score__category--visual {
    color: var(--clr-cobalt-blue);
}

.score__text {
    font-size: var(--FS-14);
}

.score__text span {
    color: var(--clr-dark-gray-blue);
}

.continue__button {
    color: var(--clr-white);
}

/* General - Mobile View */
.site__container {
    background-color: var(--clr-pale-blue);
    max-width: 375px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.component__container {
    max-width: 350px;
    margin: 0 auto;
}

.result__container {
    background: linear-gradient(180deg, var(--clr-light-slate-blue) 0%, var(--clr-light-royal-blue) 100%);
    border-radius: 0.8em;
}

.result__title {
    padding-top: 1.55em;
    padding-bottom: 1.2em;
}

.score-container {
    background-image: linear-gradient(180deg, var(--clr-violet-blue) 0%, var(--clr-persian-blue) 100%);
    border-radius: 100%;
    width: 135px;
    height: 135px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
}

.score__value {
    display: flex;
}

.outcome__container {
    padding-bottom: 1.55em;
}

.outcome__title {
    margin-top: 1em;
    margin-bottom: 0.938em;
}

.outcome__description {
    width: 75%;
    margin: 0 auto;
}

.summary__container {
    background-color: var(--clr-white);
    padding: 1.2em;
}

.scores_container {
    margin-top: 1.875em;
}

.score__card {
    display: flex;
    align-items: center;
    margin-bottom: 1.55em;
    padding: 0.6em;
    border-radius: 0.6em;
}

.score__card--reaction {
    background-color: var(--clr-light-red-15);
}

.score__icon--reaction,
.score__icon--memory,
.score__icon--verbal {
    margin-right: 0.6em;
}

.score__text {
    display: flex;
}

.score__value {
    margin-right: 10px;
}

.score__category--reaction {
    margin-right: 7em;
}

.score__card--memory {
    background-color: var(--clr-orangey-yellow-15);
}

.score__category--memory {
    margin-right: 7.3em;
}

.score__card--verbal {
    background-color: var(--clr-green-teal-15);
}

.score__category--verbal {
    margin-right: 8.2em;
}

.score__card--visual {
    background-color: var(--clr-cobalt-blue-15);
}

.score__icon--visual {
    margin-right: 0.6em;
}

.score__category--visual {
    margin-right: 8.4em;
}

.continue__button {
    background-color: var(--clr-dark-gray-blue);
    border: none;
    padding: 1.1em;
    border-radius: 3.125em;
    width: 80%;
    margin-left: 1.55em;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.continue__button:hover,
.continue__button:focus {
    background-color: var(--clr-violet-blue);
}

/* General - Desktop View */
@media (min-width: 1000px) {
    .site__container {
        max-width: none;
        height: 100vh;
    }

    .component__container {
        display: flex;
        max-width: 650px;
    }

    .result__container,
    .summary__container {
        flex: 1;
    }

    .result__container {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .summary__container {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        max-width: 400px;
    }
}