@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,800;1,400&family=Poppins:wght@200&display=swap');* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Hanken Grotesk', sans-serif;
}

:root {

    /* Gradient */
    /* --primary-color: hsla(256, 72%, 46%, 1); */
    --gradinet-primary-color: hsl(252, 100%, 67%);
    --gradinet-secondary-color: hsl(241, 81%, 54%);

    --gradient-third-color: hsla(256, 72%, 46%, 1);
    --gradient-fourth-color: hsla(241, 72%, 46%, 0);
    /* colors */
    --primary-color: #fff;
    --secondary-color: hsl(241, 100%, 89%);
    --reaction-color: hsl(0, 100%, 67%);
    --memory-color: hsl(39, 100%, 56%);
    --verbal-color: hsl(166, 100%, 37%);
    --visual-color: hsl(234, 85%, 45%);
    /* fonts */
    --font-size: 18px;
    --medium-size: 700;
}

.container {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main {
    display: flex;
    box-shadow: 0 0 5px #ccc;
    border-radius: 2rem;
}
.main-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3rem;
    background-image: linear-gradient(to bottom, var(--gradinet-primary-color), var(--gradinet-secondary-color));
    height: 32rem;
    width: 22rem;
    border-radius: 2rem;
}
.main-section .title {
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-weight: var(--medium-size);
}

.main-section .scores-display {
    margin-block: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 13rem;
    width: 12rem;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, var(--gradient-third-color), var(--gradient-fourth-color));
}

.main-section .scores-display h1 {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 5rem;
}
.main-section .scores-display p {
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 200;
}
.main-section .content h3 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 400;
    padding-block: 1rem;
}
.main-section .content p {
    font-size: var(--font-size);
    color: var(--secondary-color);
    line-height: 1.5em;
}

/* SECONDAY SECOND */
.seconday-section {
    height: 32rem;
    width: 22rem;
    padding: 2rem;
}
.seconday-section .header {
    font-size: 1.5rem;
    color: hsl(224, 30%, 27%);
}
.seconday-section .btn {
    background-color: hsla(222, 100%, 96%, 0.479);
    margin-block: 2rem;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}
.seconday-section .btn .test-name {
    display: flex;
}
.seconday-section .btn .test-name p {
    margin-left: 1rem;
}
i {
    text-decoration: solid;
    font-weight: 600;
    color: var(--secondary-color);
}
#react {
    color: var(--reaction-color);
}
#memo {
    color: var(--memory-color);
}
#verb {
    color: var(--verbal-color);
}
#vis {
    color: var(--visual-color);
}
button {
    border: none;
    color: var(--primary-color);
    background-image: linear-gradient(to bottom, var(--gradinet-primary-color), var(--gradinet-secondary-color));
    border-radius: 50px;
    font-size: 1rem;
    width: 100%;
    padding: 1rem 3rem;
    cursor: pointer;
}
button:hover {
    background-image: none;
    background-color: #000000c5;

}

/* Mobile version */
@media screen and (max-width: 440px)  {

    .container .main {
        display: block;
        height: 100vh;
        border-radius: none;

    }
    .container .main .main-section {
        width: 100vw;
        height: 22rem;
        border-radius: 0;
        border-bottom-right-radius: 3rem;
        border-bottom-left-radius: 3rem;
        padding: 1rem 3rem;
    }

    .main-section .scores-display {
        margin-block: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 8rem;
        width: 8rem;
        border-radius: 50%;
        background-image: linear-gradient(to bottom, var(--gradient-third-color), var(--gradient-fourth-color));
    }
    .main-section .scores-display h1 {
        font-size: 3rem;
    }
    .seconday-section {
        width: 100%;
    }
    .react-btn {
        display: flex;
        justify-content: center;
    }
}