@layer fonts {
    /* hanken-grotesk-500 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 500;
    src: url('./assets/fonts/hanken-grotesk-v11-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* hanken-grotesk-700 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 700;
    src: url('./assets/fonts/hanken-grotesk-v11-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* hanken-grotesk-800 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 800;
    src: url('./assets/fonts/hanken-grotesk-v11-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
}

@layer colors {
    :root {
        /* Primary colors */
        --clr-light-red: hsl(0, 100%, 67%);
        --clr-light-red-faded: hsla(0, 100%, 67%, 0.081);
        --clr-orange-yellow: hsl(39, 100%, 56%);
        --clr-orange-yellow-faded: hsla(39, 100%, 56%, 0.081);
        --clr-green-teal: hsl(166, 100%, 37%);
        --clr-green-teal-faded: hsla(166, 100%, 37%, 0.081);
        --clr-cobalt-blue: hsl(234, 85%, 45%);
        --clr-cobalt-blue-faded: hsla(234, 85%, 45%, 0.081);
        /* Gradient colors */
        --clr-gradient-light-slate-blue-bckgr: hsl(252, 100%, 67%);
        --clr-gradient-light-royal-blue-bckgr: hsl(241, 81%, 54%);
        --clr-gradient-violet-blue-circle: hsla(256, 72%, 46%, 1);
        --clr-gradient-persian-blue-circle: hsla(241, 72%, 46%, 0);
        /* Neutral colors */
        --clr-white: hsl(0, 0%, 100%);
        --clr-faded-gray: hsla(0, 0%, 59%, 0.668);
        --clr-pale-blue: hsla(222, 100%, 96%, 0.735);
        --clr-light-lavender: hsl(241, 100%, 89%);
        --clr-light-lavender-faded: hsla(241, 100%, 89%, 0.45);
        --clr-dark-gray-blue: hsl(224, 30%, 27%);
        /* Font colors */
        --font-results-h1-description: var(--clr-pale-blue);
        --font-results-points: var(--clr-white);
        --font-results-points-secondary: var(--clr-faded-gray);
        --font-results-text: var(--clr-white);
        --font-summary-h1: var(--clr-dark-gray-blue);
        --font-reaction: var(--clr-light-red);
        --font-memory: var(--clr-orange-yellow);
        --font-verbal: var(--clr-green-teal);
        --font-visual: var(--clr-cobalt-blue);
        --font-summary-score-dark: var(--clr-dark-gray-blue);
        --font-summary-score: var(--clr-faded-gray);
        --font-continue-btn: var(--clr-white);
        /* Layout colors */
        --layout-main-background: var(--clr-pale-blue);
        --layout-card-box-shadow: var(--clr-light-lavender-faded);
        --layout-card-gradient-light: var(--clr-gradient-light-slate-blue-bckgr);
        --layout-card-gradient-dark: var(--clr-gradient-light-royal-blue-bckgr);
        --layout-card-circle-light: var(--clr-gradient-violet-blue-circle);
        --layout-card-circle-dark: var(--clr-gradient-persian-blue-circle);
        --layout-card-background: var(--clr-white);
        --layout-reaction: var(--clr-light-red-faded);
        --layout-memory: var(--clr-orange-yellow-faded);
        --layout-verbal: var(--clr-green-teal-faded);
        --layout-visual: var(--clr-cobalt-blue-faded);
        --layout-continue-btn: var(--clr-dark-gray-blue);
        --layout-continue-btn-light: var(--clr-gradient-light-slate-blue-bckgr);
        --layout-continue-btn-dark: var(--clr-gradient-light-royal-blue-bckgr);
    }
}

@layer layout {
    :root {
        /* Padding card */
        --layout-card-padding: 40px 55px 50px 55px;
    }

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

    body {
        font-family: 'Hanken Grotesk', sans-serif;
        background-color: var(--layout-main-background);
        font-size: 18px;
        line-height: 1.5;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        padding: 20px;

        @media (width <= 900px) {
            padding: 0;
        }
    }

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        max-width: 740px;
        height: 536px;
        background-color: var(--layout-card-background);
        border-radius: 30px;
        box-shadow: 7px 15px 20px var(--layout-card-box-shadow);

        @media (width <= 900px) {
            grid-template-columns: 1fr;
            max-width: 375px;
            height: 100vh;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    .result {
        background: linear-gradient(180deg, var(--layout-card-gradient-light), var(--layout-card-gradient-dark));
        border-radius: 30px;
        color: var(--font-results-h1-description);
        padding: var(--layout-card-padding);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;

        @media (width <= 900px) {
            padding: 30px 60px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        @media (width <= 371px) {
            padding: 30px 45px;
        }

        @media (width <= 341px) {
            padding: 30px 30px;
        }
    }

    .result h1 {
        font-size: 24px;
        font-weight: 700;

        @media (width <= 900px) {
            font-size: 18px;
            margin-top: 0;
        }
    }

    .main-score {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;;
        margin-bottom: 10px;
        background: linear-gradient(180deg, var(--layout-card-circle-light), var(--layout-card-circle-dark));
        border-radius: 100%;
        width: 190px;
        height: 190px;

        @media (width <= 900px) {
            width: 140px;
            height: 140px;
        }
    }

    .score-points {
        font-size: 72px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--font-results-points);

        @media (width <= 900px) {
            font-size: 56px;
        }
    }

    .score-points-secondary {
        font-size: 18px;
        font-weight: 500;
        color: var(--font-results-points-secondary);

        @media (width <= 900px) {
            font-size: 16px;
        }
    }

    .result-text {
        font-size: 32px;
        font-weight: 700;
        color: var(--font-results-text);

        @media (width <= 900px) {
            font-size: 24px;
            margin-top: 10px;
        }
    }

    .result-description {
        font-weight: 500;

        @media (width <= 900px) {
            font-size: 16px;
            margin-top: 10px;
            line-height: 1.3;
        }
    }

    .summary {
        padding: var(--layout-card-padding);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;

        @media (width <= 900px) {
            padding: 20px 30px;
        }
    }

    .summary h1 {
        font-size: 24px;
        font-weight: 700;
        align-self: flex-start;
        color: var(--font-summary-h1);
        margin-bottom: 25px;

        @media (width <= 900px) {
            font-size: 18px;
            margin-bottom: 20px;
        }
    }

    .box {
        padding: 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    ul {
        width: 100%;
    }

    li {
        list-style: none;
        width: 100%;
        margin-bottom: 15px;;
    }

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

        @media (width <= 900px) {
            font-size: 1rem;
        }
    }

    .score-dark {
        color: var(--font-summary-score-dark);
        margin-right: 0.2rem;
    }

    .reaction {
        background-color: var(--layout-reaction);
        color: var(--font-reaction);

        @media (width <= 900px) {
            font-size: 1rem;
        }
    }

    .category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .memory {
        background-color: var(--layout-memory);
        color: var(--font-memory);

        @media (width <= 900px) {
            font-size: 1rem;
        }
    }

    .verbal {
        background-color: var(--layout-verbal);
        color: var(--font-verbal);

        @media (width <= 900px) {
            font-size: 1rem;
        }
    }

    .visual {
        background-color: var(--layout-visual);
        color: var(--font-visual);

        @media (width <= 900px) {
            font-size: 1rem;
        }
    }

    .cont-btn {
        display: inline-block;
        width: 100%;
        padding: 15px 30px;
        background: var(--layout-continue-btn);
        color: var(--font-continue-btn);
        font-weight: 700;
        border-radius: 50px;
        text-decoration: none;
        margin-top: 30px;

        @media (width <= 900px) {
            margin-top: 15px;
        }
    }

    .cont-btn:hover {
        background: linear-gradient(180deg, var(--layout-continue-btn-light), var(--layout-continue-btn-dark));
    }

    footer {
        background-color: var(--layout-card-background);
        width: 375px;
        font-size: 11px; 
        text-align: center;
        padding: 0;
        a > {
            color: hsl(228, 45%, 44%);
        }

        @media (width > 900px) {
            background-color: var(--layout-main-background);
        }
    }
}