/* 

## Layout

- Mobile: 375px
- Desktop: 1440px

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

*/


: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%);

    /*PRIMARY SKILLS*/
    --Light-red-a: hsla(0, 100%, 67%, 0.08);
    --Orangey-yellow-a: hsla(39, 100%, 56%, 0.08);
    --Green-teal-a: hsla(166, 100%, 37%, 0.08);
    --Cobalt-blue-a: hsla(234, 85%, 45%, 0.08);





    /*GRADIENTS - (BACKGROUND)*/
    --Light-slate-blue: hsl(252, 100%, 67%);
    --Light-royal-blue: hsl(241, 81%, 54%);

    /*GRADIENTS - (CIRCLE)*/
    --Violet-blue: hsla(256, 72%, 46%, 1);
    --Persian-blue: 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%);

    --your-result: rgb(188,177,254);
    --of-100: rgb(138, 129,251);
    --you-scored: rgb(183, 179, 251);
    --out-of-100: rgb(171, 166, 171);

}



/* BASE STYLES */
* {
    margin: 0;
}

body {
    background-color: grey;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

h1 {
    font-weight: 800;
    font-size: 3.5rem;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    color: var(--Dark-gray-blue);
    font-size: 1.1rem;
}


main {
    width: 375px;
    height: 810px;
    background-color: var(--White);
}






/* RESULTS */
.results {
    background-image: linear-gradient(180deg, var(--Light-slate-blue), var(--Light-royal-blue));
    height: 356px;
    text-align: center;
    border-radius: 0 0 30px 30px;
}

.results .style {
    padding: 30px 30px 40px;
}

.results .style .heading h2 {
    color: var(--your-result);
    font-size: 1.2rem;
    font-weight: 700;
}

.circle {
    background-image: linear-gradient(180deg, var(--Violet-blue), var(--Persian-blue));
    margin: 30px auto 0 auto;
    height: 145px;
    width: 145px;
    border-radius: 100%;
}

.circle h1 {
    color: var(--White);
    line-height: 120px;
    height: 120px;
}

.circle p {
    color: var(--of-100);
    position: relative;
    margin-top: -25px;
    font-size: 1rem;
    font-weight: 700;
}

.great h2 {
    color: var(--White);
    margin-top: 10px;
    font-weight: 500;
    font-size: 1.4rem;
}

.great p {
    color: var(--you-scored);
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
}



/* SUMMARY */
.summary {
    margin: 0 27px;
}

.summary .heading {
    padding-top: 28px;
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 1.15rem;
}



/* SKILLS */
.skill {
    /* height: 49px; */
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
}

.skill h3 {
    display: inline-block;
    position: absolute;
    top: 14px;
    left: 40px;
    font-size: 1rem;
    font-weight: 800;
}

.skill p {
    display: inline-block;
    position: absolute;
    top: 14px;
    right: 12px;
    font-weight: 800;
    font-size: 1rem;
}

.grey {
    color: var(--out-of-100)
}



/* ICON */
.icon-svg {
    height: 20px;
    display: inline-block;
}



/* REACTION */
.reaction-container {
    background-color: var(--Light-red-a);
}

.reaction-container h3 {
    color: var(--Light-red);
}



/* MEMORY */
.memory-container {
    background-color: var(--Orangey-yellow-a);
}

.memory-container h3 {
    color: var(--Orangey-yellow);
}


/* VERBAL */
.verbal-container {
    background-color: var(--Green-teal-a);
}

.verbal-container h3 {
    color: var(--Green-teal);
}


/* VISUAL */
.visual-container {
    background-color: var(--Cobalt-blue-a);
}

.visual-container h3 {
    color: var(--Cobalt-blue);
}



/* CONTINUE BUTTON */
button {
    margin-top: 25px;
    width: 100%;
    padding: 19px 32px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    background-color: var(--Dark-gray-blue);
    border: none;
    border-radius: 25px;
    color: var(--White);
    display: block;
}

button:hover {
    background-image: linear-gradient(180deg, var(--Light-slate-blue), var(--Light-royal-blue));
}


/* COURSE STYLES */
.attribution { 
    margin-top: 5px;
    font-size: 11px; text-align: center; 
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}