@font-face {
    font-family: 'Hanken Grotesk';
    src: url(assets/fonts/HankenGrotesk-VariableFont_wght.ttf);
}

/* Variables area */

:root{
    --lightRed: hsl(0, 100%, 67%);
    --veryLightRed: hsl(0, 100%, 98%);
    --orangeyYellow: hsl(39, 100%, 56%);
    --lightYellow: hsl(39, 100%, 98%);
    --greenTeal: hsl(166, 100%, 37%);
    --lightGreen: hsl(166, 100%, 98%);
    --cobaltBlue: hsl(234, 85%, 45%);
    --lightBlue: hsl(234, 85%, 98%);

    --lightSlateBlue: hsl(252, 100%, 67%);
    --lightRoyalBlue: hsl(241, 81%, 54%);

    --violetBlue: hsla(256, 72%, 46%, 1);
    --persianBlue: hsla(241, 72%, 46%, 0);

    --white: hsl(0, 0%, 100%);
    --paleBlue: hsl(221, 100%, 96%);
    --lightLavender: hsl(241, 100%, 89%);
    --darkGrayBlue: hsl(224, 30%, 27%);
}

/* Reset settings */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-overflow: balance;
    word-wrap: break-word;
}

/* Global styling area */

html{
    font-family: 'Hanken Grotesk';
    font-size: 18px;
}

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

h2{
    font-size: 1.5rem;
    font-weight: 700;
}

p{
    font-size: 1rem;
    font-weight: 500;
}

b{
    margin-right: 0.5rem;
}

/* Local styling area */

body{
    background-color: var(--paleBlue);
}

.main{
    width: 100%;
    height: 100vh;

    background-color: var(--white);
    
    box-shadow: 0px 24px 39px 10px var(--lightLavender);
}

.mainValue{
    height: 45vh;

    background: linear-gradient(0deg, var(--lightRoyalBlue) 30%, var(--lightSlateBlue));

    border-radius: 0 0 1.5rem 1.5rem;

    text-align:center;

    padding:1.5rem;

    display: grid;
}

#p_like_h2{
    font-size: 1.2rem;
}

.mainValue h1, .mainValue h2{
    color:var(--white);
}

.mainValue p{
    color: var(--lightLavender);
}

.mainValue div{
    background: linear-gradient(to top, var(--persianBlue), var(--violetBlue));

    width: 45%;

    aspect-ratio: 1/1;

    margin-inline: auto;

    border-radius: 50%;

    padding: 1.5rem;

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

.summaryValue{
    padding: 1.5rem;
    
    display: grid;

    row-gap: 1rem;
}

.summaryValue h1{
    margin-bottom: 0.5rem;
}

.summaryValue p{
    color: var(--darkGrayBlue);
}

.summaryValue div{
    width: 100%;
    height: 3rem;

    padding: 1rem;

    border-radius: 0.5rem;

    display: grid;
    grid-template-columns: 0.5fr 3fr 1.5fr;
    justify-content: center;
    align-items: center;
}

.summaryValue div>*{
    display: flex;
    flex-wrap: wrap;
}

.summaryValue div p{
    justify-self: center;
}

.reaction{
    color:var(--lightRed)
}

.memory{
    color:var(--orangeyYellow)
}

.verbal{
    color:var(--greenTeal)
}

.visual{
    color:var(--cobaltBlue)
}

.summaryValue div:nth-of-type(1){
    background-color: var(--veryLightRed);
}

.summaryValue div:nth-of-type(2){
    background-color: var(--lightYellow);
}

.summaryValue div:nth-of-type(3){
    background-color: var(--lightGreen);
}

.summaryValue div:nth-of-type(4){
    background-color: var(--lightBlue);
}

button{
    height: 3.2rem;

    margin-top: 0.5rem;

    border-radius: 4rem;

    color: var(--white);

    font-size: 1rem;

    background-color: var(--darkGrayBlue);
}

.attribution{
    display: none;
}

/* Adaptive area */

@media(min-width:450px){
    .main{
        width:90%;

        margin-inline: auto;
        margin-block: 5%;

        border-radius: 1.5rem;
    }

    .mainValue{
        border-radius: 1.5rem;
    }
}

@media(min-width:500px){
    .main{
        width:80%;

        margin-inline: auto;
        margin-block: 10%;
    }
}

@media(min-width:600px){
    .main{
        width:70%;

        margin-inline: auto;
        margin-block: 15%;
    }
}

@media(min-width:700px){
    .main{
        width:60%;

        margin-inline: auto;
        margin-block: 15%;
    }
}

@media(min-width:800px){
    .main{
        width:50%;

        margin-inline: auto;
        margin-block: 15%;
    }
}

@media(min-width:900px){
    .main{
        width:45%;

        margin-inline: auto;
        margin-block: 15%;
    }
}

@media(min-width:1000px){
    .main{
        width:70%;
        height: 55vh;

        margin-inline: auto;
        margin-block: 15%;

        display: flex;
        flex-direction: row;
    }

    .mainValue{
        width: 50%;
        height: 100%;
    }

    .mainValue div{
        width: 60%;
    }

    .summaryValue{
        width: 50%;

        padding: 2rem;

        margin-inline: auto;
        margin-block: 0.5rem;
    }
}

@media(min-width:1200px){
    h1{
        font-size: 4rem;
    }

    .main{
        width:60%;
        height: 53vh;

        margin-inline: auto;
        margin-block: 15%;

        display: flex;
        flex-direction: row;
    }

    .mainValue{
        width: 50%;
        height: 100%;
    }

    .mainValue div{
        width: 60%;
    }

    .summaryValue{
        width: 50%;

        padding: 2rem;

        margin-inline: auto;
    }
}

@media(min-width:1400px){
    .main{
        width:48%;
        height: 53vh;

        margin-inline: auto;
        margin-block: 10%;

        display: flex;
        flex-direction: row;
    }

    .mainValue{
        width: 50%;
        height: 100%;
    }

    .mainValue p{
        width: 85%;

        margin-inline: auto;
    }

    .mainValue div{
        width: 60%;
    }

    .summaryValue{
        width: 50%;

        padding: 1.5rem;

        margin-inline: auto;
    }
}

@media(min-width:1500px){
    .main{
        width:45%;
        height: 53vh;

        margin-inline: auto;
        margin-block: 10%;

        display: flex;
        flex-direction: row;
    }
}

@media(min-width:1600px){
    .main{
        width:42%;
        height: 53vh;

        margin-inline: auto;
        margin-block: 10%;

        display: flex;
        flex-direction: row;
    }
}