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

:root {
    --clr-light-slate-blue: hsl(252, 100%, 67%);
    --clr-violet-blue: hsla(256, 72%, 46%, 1);
    --clr-light-royal-blue: hsl(241, 81%, 54%);
    --clr-Persian-blue: hsla(241, 72%, 46%, 0);
    --clr-white: hsl(0, 0%, 100%);
    --clr-pale-blue: hsl(221, 100%, 96%);
    --clr-light-lavender: hsl(241, 100%, 89%);
    --clr-dark-gray-blue: hsl(224, 30%, 27%);

    --clr-light-red-hsl: 0, 100%, 67%;
    --clr-orangey-yellow-hsl: 39, 100%, 56%;
    --clr-green-teal-hsl: 166, 100%, 37%;
    --clr-cobalt-blue-hsl: 234, 85%, 45%;

    --opacity-summary-items-bg: 0.080;

    --gradient-primary: linear-gradient(
        var(--clr-light-slate-blue),
        var(--clr-light-royal-blue)
    );

    --gradient-to-transparent: linear-gradient(
        var(--clr-violet-blue),
        var(--clr-Persian-blue)
    );

    --ff-default: "Hanken Grotesk", sans-serif;

    --fw-500: 500;
    --fw-700: 700;
    --fw-800: 800;
}

body {
    background-color: var(--clr-white);
    font-family: var(--ff-default);
    font-size: 1.125rem;
    font-weight: var(--fw-500);
    color: var(--clr-light-lavender);
}

/* Text styles */

.results {
    text-align: center;
}

.result-title {
    font-size: 1.125rem;
    margin-bottom: 1.125rem;
}

.result-score {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    font-weight: var(--fw-700);
}

.result-score span {
    display: block;
    font-size: 3rem;
    font-weight: var(--fw-800);
    line-height: 1.2;
    color: var(--clr-white);
}

.result-rank {
    font-size: 1.5rem;
    font-weight: var(--fw-700);
    margin-bottom: 0.25rem;
    color: var(--clr-white);
}

.result-description {
    font-size: 1rem;
    line-height: 1.2;
}

.summary-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--clr-dark-gray-blue);
}

.summary-item-title,
.summary-score {
    font-size: 1rem;
}

.summary-item-title.reaction {
    color: hsl(var(--clr-light-red-hsl));
}

.summary-item-title.memory {
    color: hsl(var(--clr-orangey-yellow-hsl));
}

.summary-item-title.verbal {
    color: hsl(var(--clr-green-teal-hsl));
}

.summary-item-title.visual {
    color: hsl(var(--clr-cobalt-blue-hsl));
}

.summary-score {
    font-weight: var(--fw-700);
}

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

/* Layout styles */

.wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 375px;
}

.summary-items-container {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin: 1.5rem 0;
}

.flex-group {
    display: flex;
    align-items: center;
    column-gap: 0.625rem;
}

/* General styles */

.results {
    background: var(--gradient-primary);
    padding: 1.25rem 2.5rem 2.1875rem;
    border-radius: 0 0 12% 12%;
}

.result-score {
    background: var(--gradient-to-transparent);
    display: inline-block;
    padding:  1.875rem 2.8125rem;
    border-radius: 50%;
}

.summary {
    padding: 1.75rem;
}

.summary-item {
    padding: 0.875rem;
    border-radius: 0.375rem;
    display: flex;
    justify-content: space-between;
}

.summary-item:nth-child(1) {
    background-color: hsla(var(--clr-light-red-hsl), var(--opacity-summary-items-bg));
}

.summary-item:nth-child(2) {
    background-color: hsla(var(--clr-orangey-yellow-hsl), var(--opacity-summary-items-bg));
}

.summary-item:nth-child(3) {
    background-color: hsla(var(--clr-green-teal-hsl), var(--opacity-summary-items-bg));
}

.summary-item:nth-child(4) {
    background-color: hsla(var(--clr-cobalt-blue-hsl), var(--opacity-summary-items-bg));
}

.summary-btn {
    background-color: var(--clr-dark-gray-blue);
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 2.5rem;
    color: var(--clr-white);
    font-weight: var(--fw-700);
}

/* Media queries */

@media (min-width: 700px) {

    /* Text styles */

    .result-title,
    .summary-title {
        font-size: 1.5rem;
        font-weight: var(--fw-700);
    }

    .result-rank {
        font-size: 1.875rem;
        font-weight: var(--fw-700);
        margin-bottom: 0.625rem;
    }

    .result-score {
        font-size: 1rem;
        margin-bottom: 1.125rem;
    }

    .result-score span {
        font-size: 4rem;
        line-height: 1;
    }

    .result-description {
        font-size: 1.125rem;
    }

    /* Layout styles */

    .wrapper {
        align-items: center;
    }

    .container {
        max-width: 670px;
        display: flex;
        column-gap: 0.875rem;
        border-radius: 1.5625rem;
        overflow: hidden;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    }

    .summary-items-container {
        display: flex;
        flex-direction: column;
        row-gap: 0.625rem;
        margin: 1.5rem 0;
    }

    .results,
    .summary {
        flex: 1;
    }

    /* General styles */

    .results {
        padding: 1.75rem 2.125rem;
        border-radius: 1.5625rem;
    }

    .result-score {
        padding:  2.5rem 3.4375rem;
    }

    .summary-items-container {
        margin: 1.25rem 0 1.5rem;
    }
}