@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*PRIMARY*/
    --light-red: hsl(0, 100%, 67%);
    --orange-yellow: hsl(39, 100%, 56%);
    --green-teal: hsl(166, 100%, 37%);
    --cobalt-blue: hsl(234, 85%, 45%);

    /*GRADIENT*/
    /**Background**/
    --light-slate-blue: hsl(252, 100%, 67%);
    --light-royal-blue: hsl(241, 81%, 54%);
    /**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%);

    /*TRANSPARENT*/
    --light-red-transparent: hsla(0, 100%, 67%, 0.05);
    --orange-yellow-transparent: hsla(39, 100%, 56%, 0.05);
    --green-teal-transparent: hsla(166, 100%, 37%, 0.05);
    --cobalt-blue-transparent: hsla(234, 85%, 45%, 0.05);
    --light-lavender-transparent: hsla(241, 100%, 89%, 0.75);
    --dark-gray-blue-transparent: hsla(224, 30%, 27%, 0.5);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ecf2ff;
    font-family: 'Hanken Grotesk';
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.438rem;
    max-height: 1000dvh;
    display: flex;
    justify-content: center;
}

main {
    margin: 284px 0;
}

/*CARD*/
.card {
    background-color: white;
    color: var(--dark-gray-blue);
    border-radius: 32px;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 16px 32px 8px rgba(0,0,0,0.08);
}

/**SCORE CARD**/
.score-card {
    background: linear-gradient(180deg, rgba(120, 87, 255, 1) 0%, rgba(46, 43, 233, 1) 100%);
    color: var(--light-lavender);
    width: 266px;
    height: 419px;
    border-radius: 32px;
    padding: 38px 51px 55px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.score-title {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.938rem;
}

.score-circle {
    background:linear-gradient(180deg, var(--violet-blue), var(--persian-blue));
    border-radius: 50%;
    margin: 0 auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 200px;
    height: 200px;
    strong {
        color: white;
        font-weight: 800;
        font-size: 4.5rem;
        line-height: 4.875rem;
    };
    span {
        color: var(--light-lavender-transparent);
    };
}

.score-summary {
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h2 {
        color: white;
        line-height: 1.938rem;
        font-weight: 600;
        font-size: 2rem;
        line-height: 2.625rem;
    };
    p {
        padding: 0 2px;
    }
}

/**SUMMARY CARD**/
.summary-card {
    width: 288px;
    height: 428px;
    padding: 38px 40px 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summary-title {
    font-size: 1.5rem;
    line-height: 1.938rem;
}

.summary-skills {
    height: 271px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summary-skill {
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
}

.summary-skill-type {
    display: flex;
    gap: 12px
}

.summary-skill-score {
    color: var(--dark-gray-blue);
    font-weight: 700;
    display: flex;
    gap: 8px
}

.skill-total {
    color: var(--dark-gray-blue-transparent)
}

.summary-skill:nth-of-type(1) {
    background-color: var(--light-red-transparent);
    color: var(--light-red);
}

.summary-skill:nth-of-type(2) {
    background-color: var(--orange-yellow-transparent);
    color: var(--orange-yellow)
}

.summary-skill:nth-of-type(3) {
    background-color: var(--green-teal-transparent);
    color: var(--green-teal);
}

.summary-skill:nth-of-type(4) {
    background-color: var(--cobalt-blue-transparent);
    color: var(--cobalt-blue);
}

.continue-button {
    background-color: var(--dark-gray-blue);
    color: white;
    border-radius: 50px;
    padding: 17px 16px 16px;
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.438rem;
    text-decoration: none;
    transition: 0.4s;
}

.continue-button:hover {
    background: linear-gradient(180deg, rgba(120, 87, 255, 1) 0%, rgba(46, 43, 233, 1) 100%);
}

@media only screen and (max-width:768px) {
    body {
        font-size: 1rem;
        line-height: 1.313rem;
    }

    main {
        margin: 0%;
    }

    /*CARD*/
    .card {
        width: auto;
        height: auto;
        border-radius: 0%;
        flex-direction: column;
    }
    
    /**SCORE CARD**/
    .score-card {
        width: auto;
        height: auto;
        border-radius: 0 0 32px 32px;
        padding: 24px 40px 40px;
    }
    
    .score-title {
        font-size: 1.125rem;
        line-height: 1.438rem;
    }
    
    .score-circle {
        margin: 23px auto 25px ;
        width: 140px;
        height: 140px;
        strong {
            font-size: 3.5rem;
            line-height: 4rem;
        };
    }
    
    .score-summary {
        height: 81px;
        h2 {
            font-size: 1.5rem;
            line-height: 1.938rem;
        }
    }
    
    /**SUMMARY CARD**/
    .summary-card {
        width: auto;
        height: 399px;
        padding: 24px 30px 30px;
    }
    
    .summary-title {
        font-size: 1.125rem;
        line-height: 1.438rem;
    }
    
    .summary-skills {
        height: 269px;
    }
}