/* # Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### 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

- White: hsl(0, 0%, 100%)
- Pale blue: hsl(221, 100%, 96%)
- Light lavender: hsl(241, 100%, 89%)
- Dark gray blue: hsl(224, 30%, 27%)

### Notes

Use transparency to get the colour variations necessary to match the design. Hint: look into using `hsla()`.

## Typography

### Body Copy

- Font size (paragraphs): 18px

### Font

- Family: [Hanken Grotesk](https://fonts.google.com/specimen/Hanken+Grotesk)
- Weights: 500, 700, 800

 */


@font-face {
    font-family: hanken;
    src: url(../fonts/HankenGrotesk-VariableFont_wght.ttf);
}

:root{
    /* Primary */
    --primarylightred: hsl(0, 100%, 67%);
    --Orangeyyellow: hsl(39, 100%, 56%);
    --Greenteal: hsl(166, 100%, 37%);
    --Cobaltblue: hsl(234, 85%, 45%);
    /* Gradients */
    --Lightslatebluebg: hsl(252, 100%, 67%);
    --Lightroyalbluebg: hsl(241, 81%, 54%);
    --Violetbluecircle: hsla(256, 72%, 46%, 1);
    --Persianbluecircle: hsla(241, 72%, 46%, 0);
    /* Neutral */
    --White: hsl(0, 0%, 100%);
    --Paleblue: hsl(221, 100%, 96%);
    --Lightlavender: hsl(241, 100%, 89%);
    --Darkgrayblue: hsl(224, 30%, 27%);
    /* Font Weights */
    --fw500: 500;
    --fw700: 700;
    --fw800: 800;
}
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    font-family: hanken;
}
a{
    text-decoration: none;
}
main{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
h1{
    font-size: 2.4rem;
    font-weight: var(--fw700);
    color:#CBC0FF;
    margin-bottom: 30px;
}
h3{
    font-size: 2.4rem;
    font-weight: var(--fw700);
    color:#33394F;
    margin-bottom: 30px;
}
.resultbox{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    height: auto;
    box-shadow: 21px 11px 51px 0px var(--Paleblue);
    border-radius: 32px;
}
.resultcolumn{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    border-radius: 32px;
    background: var(--Lightroyalbluebg);
    background: linear-gradient(180deg, var(--Lightslatebluebg) 0%, var(--Lightroyalbluebg) 100%);
    padding: 3rem 5.5rem 5rem 5.5rem;
}
.resultcircle{
    background: var(--Violetbluecircle);
    background: linear-gradient(180deg, var(--Violetbluecircle) 0%, var(--Persianbluecircle) 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 4rem 6rem;
}
.resultnr{
    color: var(--White);
    font-size: 7rem;
    font-weight: var(--fw800);
}
.resultborderbox{
    display:flex;
    justify-content: center;
    align-items: center;

}
.percent{
    color:#8A7DFF;
    font-size: 1.5rem;
    font-weight: var(--fw800);
}
.resulttext{
    color:var(--Paleblue);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h2{
    font-size: 3rem;
    margin-bottom:3rem;
}
.resultanalysis{
    display:block;
    color: #BEBBFF;
    font-size: 1.8rem;
}
.summary{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding:3rem 3rem 5rem 3rem;  
    min-width: 10vw;
}
.ratingboxes{
    font-size: 1.8rem;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    padding:1.6rem;
    border-radius: 12px;
    gap:4rem;
}
.ratingboxes:first-of-type{
    background-color: #FFF6F5;
}
.ratingboxes:nth-child(2){
    background-color:#FFFBF2;
}
.ratingboxes:nth-child(3){
    background-color:#F2FBFA;
}
.ratingboxes:nth-child(4){
    background-color:#F3F3FD;
    margin-bottom: 30px;
}
.ratings{
    display:flex;
    flex-direction: column;
    gap:2rem;
}
.icontitle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:1rem;
}
.reaction{
    color:var(--primarylightred)
}
.memory{
    color:var(--Orangeyyellow)
}
.verbal{
    color:var(--Greenteal)
}
.visual{
    color:var(--Cobaltblue)
}
.scores{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    gap:0.8rem;
}
.ratingboxes .scores p{
    font-weight: var(--fw700);
}
.ratingboxes .scores p:last-of-type{
    color:#999798;
}
.btn{
    display:block;
    background-color: #303B59;
    text-align: center;
    color: white;
    font-size: 2rem;
    padding:1rem;
    border-radius: 36px;
    font-weight: var(--fw700);
}

@media screen and (max-width: 375px){
    main{
        justify-content: unset;
        align-items: unset;
        display: unset;
    }
    .resultbox{
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
        box-shadow: 21px 11px 51px 0px var(--Paleblue);
        border-radius: 0px;
    }
    .resultcolumn{
        border-radius: 0 0 32px 32px;
    }
    .ratingboxes{
        padding:2.2rem;
    }
    .btn{
        padding:1.8rem;
    }
}