@charset "UTF-8";
@font-face {
    font-family: HankenGrotesk;
    src: url(../assets/fonts/HankenGrotesk-VariableFont_wght.ttf);
}

html{
    font-size: 18px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: HankenGrotesk;
}

:root{
    /* Primary */
    --light-red: hsl(0, 100%, 67%);
    --orangey-yellow: hsl(39, 100%, 56%);
    --green-teal: hsl(166, 100%, 37%);
    --cobalt-blue: hsl(234, 85%, 45%);
    
    /* Gradients */
    --light-slate-blue-background: hsl(252, 100%, 67%);
    --light-royal-blue-background: hsl(241, 81%, 54%);
    --violet-blue-circle: hsla(256, 72%, 46%, 1);
    --persian-blue-circle: hsla(241, 72%, 46%, 0);

    /* Neutral */
    --pale-blue: hsl(221, 100%, 96%);
    --light-lavender: hsl(241, 100%, 89%);
    --dark-gray-blue: hsl(224, 30%, 27%);
}

body{
    background-color: var(--pale-blue);
    height: 100vh;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

main{
    display: flex;
    flex-flow: row;

    background-color: white;
    max-width: 910px;
    border-radius: 10%;

    .result{
        background-image: linear-gradient(var(--light-slate-blue-background), var(--light-royal-blue-background));
        color: white;
        text-align: center;

        width: 460px;
        border-radius: 10%;
        
        padding: 30px;

        h1{
            font-size: min(2rem, 2.4rem);
            color: var(--light-lavender);
        }

        p{

            color: var(--light-lavender);
        }

        .result_score{
            margin-top: 30px;
            margin-bottom: 1em;

            span{
                font-weight: bold;
                font-size: 4.5rem;
            }

            p{
                opacity: 70%;
            }

            background-image: linear-gradient(var(--violet-blue-circle), var(--persian-blue-circle));
            clip-path: circle(5.5rem);
            padding: 39px;
        }

        .result_text{
            margin: 10px 0 50px 0;

            h2{
                font-size: 1.6rem;
                margin-bottom: 1em;
            }

            p{
                justify-self: center;
                width: 250px;
            }
        }
    }

    .summary{
        display: flex;
        flex-flow: column;

        background-color: white;
        width: 460px;
        border-radius: 10%;

        h2{
            font-size: 1.6rem;
            margin: 40px 0 12px 15%;

            color: var(--dark-gray-blue);
        }

        div{
            display: flex;
            justify-content: space-between;

            border-radius: 10px;
            padding: 16px;
            width: 70%;
            margin: 10px auto;

            p{
                font-size: 1rem;
                color: var(--dark-gray-blue);
            }
        }

        a{
            background-color: var(--dark-gray-blue);
            color: white;
            padding: 13px;
            border-radius: 50px;
            text-align: center;
            text-decoration: none;

            width: 70%;
            align-self: center;
            margin-top: 30px;

            &:hover{
                background-image: linear-gradient(var(--light-slate-blue-background), var(--light-royal-blue-background));
            }
        }

        .summary_reaction{
            background-color: color-mix(in hsl, var(--light-red), transparent 90%);
            
            span{
                color: var(--light-red);
            }
            .span_opacity{
                color: var(--dark-gray-blue);
                opacity: 50%;
            }
        }

        .summary_memory{
            background-color: color-mix(in hsl, var(--orangey-yellow), transparent 90%);

            span{
                color: var(--orangey-yellow);
            }
            .span_opacity{
                color: var(--dark-gray-blue);
                opacity: 50%;
            }
        }

        .summary_verbal{
            background-color: color-mix(in hsl, var(--green-teal), transparent 90%);

            span{
                color: var(--green-teal);
            }
            .span_opacity{
                color: var(--dark-gray-blue);
                opacity: 50%;
            }
        }

        .summary_visual{
           background-color: color-mix(in hsl, var(--cobalt-blue), transparent 90%);

            span{
                color: var(--cobalt-blue);
            }
            .span_opacity{
                color: var(--dark-gray-blue);
                opacity: 50%;
            }
        }
    }
}