@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;700&display=swap');

:root {
    /* colors */
    --royal-blue-grad: hsl(234, 85%, 45%);
    --stale-blue-grad: hsl(252, 100%, 67%);

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

    --red: hsl(0, 100%, 67%);
    --yellow: hsl(39, 100%, 56%);
    --green: hsl(166, 100%, 37%);
    --blue: hsl(234, 85%, 45%);

    --red-faded: hsla(0, 100%, 67%, 0.070);
    --yellow-faded: hsl(39, 100%, 56%, 0.070);
    --green-faded: hsl(166, 100%, 37%, 0.070);
    --blue-faded: hsl(234, 85%, 45%, 0.070);
    --gray-faded: hsla(224, 30%, 27%, 0.422);

    --white: hsl(0, 0%, 100%);
    --pale-blue: hsl(221, 100%, 96%);
    --lavander: hsla(241, 100%, 89%, 0.964);
    --gray: hsl(224, 30%, 27%);

    /*font size*/
    --fs-reg: 1rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.6rem;
    --fs-xl: 4rem;
    --fs-xxl: 5rem;

    /* screen width */
    --min-width: 800px;
}

@layer reset{
    *,
    *::before,
    *::after{
        box-sizing: border-box;
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    figure{
        margin: 0;
    }
    
    ul, 
    ol{
        list-style: none;
        padding-left: 0;
    }

    button{
        all: unset; 
        cursor: pointer;
    }

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

@layer base{
    html{
        font-family: 'Hanken Grotesk', sans-serif;
    }

    body{
        color: var(--text-color, var(--white));
        font-size: var(--fs-reg);

        @media (min-width : 800px) {
        background: var(--pale-blue);
        min-height: 100vh;
        display: grid;
        place-items: center;
        }
    }

    .summary-card > :nth-child(1){
        background: radial-gradient(circle at 50% -20%, var(--stale-blue-grad), var(--royal-blue-grad));
    }

    .summary-card > :nth-child(2){
        background: var(--white);
    }

    .summary-card h1 span{
            font-size: var(--fs-reg);
    }

    .summary-card-result-text{
            font-size: var(--fs-lg);
    }

    h1,
    h2,
    h3{
        font-size: var(--heading-font-size, 1.2rem);
    }

    .summary-card > :nth-child(1) h2{
        --heading-font-size: var(--fs-md);
    }

    h1{
        --heading-font-size: var(--fs-xl);
    }

    h3{
        --heading-font-size: var(--fs-md);
    }

    .summary-card > h1{
        --heading-font-size: var(--fs-xl);
    }

    p,
    button{
        font-size: var(--fs-md);
    }

    .summary-card-text-lavander{
        color: var(--lavander);
    }

    .summary-card-text-gray{
        color: var(--gray-faded);
        font-weight: 700;
    }
}

@layer layout{
    .summary-card >*{
        min-width: 300px;
        display: flex;
        flex-direction: column;
        color: var(--summary-card-foreground, var(--white));
        padding: var(--summary-card-padding, 40px);
        text-align: var(--summary-card-text-align, start);
        gap: var(--summary-card-gap, 18px);
    }

    .summary-card{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 890px;

        @media (min-width:800px) {
            flex-direction: row;
            justify-content: center;
                    align-items:normal;

            padding: 40px;
        }
    }

    .summary-card > div {
        @media (min-width:800px) {
            box-shadow: 0px 14px 100px var(--blue-faded)
        }
    }

    @media (min-width:800px) {
    .summary-card h1 {
        --heading-font-size: var(--fs-xxl);
    }
    }

    /* Result section */

    .summary-card-sphere-background{
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% -20%, var(--royal-blue-grad), transparent);

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

        @media (min-width:800px){
        width: 200px;
        height: 200px;
        border-radius: 50%;   
        }
    }

    .summary-card > :nth-child(1){
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom-left-radius: var(--summary-card-border-radius-left, 30px);
        border-bottom-right-radius: var(--summary-card-border-radius-right, 30px);
        --summary-card-text-align: center;

        @media (min-width : 800px){
            border-radius: 30px;
            z-index: 2;
            position: relative;
            justify-content: space-around;
            gap: 30px;
                    --summary-card-padding: 40px
        }
    }

    .summary-card > :nth-child(1) > h2 {
    order: -1;
}

    .summary-card h1 span{
        display: block;
    }

    @media (min-width:800px) {
        .summary-card-result-text{
            margin-bottom: -20px;
        }
    }
    /* Summary section */
    .summary-card-habilities ul{
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    @media (min-width:540px) {
        .summary-card-habilities ul{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    }  

    @media (min-width:800px) {
        .summary-card-habilities ul{
            display: flex;
        }
    }    

    .summary-card > :nth-child(2){
        --summary-card-foreground: var(--gray);
        --summary-card-padding: 30px;
        --summary-card-gap: 25px;
        width: 100%;

    @media (min-width : 800px){
        border-radius: 30px;
        padding-left: 70px;
        z-index: 1;
        position: relative;
        margin-left: -30px;
        --summary-card-padding: 40px
    }
    }

    li >* span:first-of-type{
        font-weight: 700;
    }

    .summary-reaction{
        color: var(--red);
    }

    .summary-memory{
        color: var(--yellow);
    }

    .summary-verbal{
        color: var(--green);
    }

    .summary-visual{
        color: var(--blue);
    }

    li{
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-radius: 15px;
    }

    ul > li:nth-child(1){
        background: var(--red-faded);
    }

    ul > li:nth-child(2){
        background: var(--yellow-faded);
    }

    ul > li:nth-child(3){
        background: var(--green-faded);
    }

    ul > li:nth-child(4){
        background: var(--blue-faded);
    }

    .summary-card-section-left,
    .summary-card-section-right{
        display: flex;
        gap: 10px;
    }

    .summary-card-button{
        text-align: center;
        color: var(--white);
        background: var(--gray);
        border-radius: 30px;
        padding: 18px;
        font-size: var(--fs-md);
    }

    .summary-card-button:active{
        background: linear-gradient( to bottom, var(--stale-blue-grad), var(--royal-blue-grad));
    }
}