:root {
    /* Primary */ 

    --Very-dark-blue: hsl(233, 47%, 7%); /* (main background) */
    --Dark-desaturated-blue: hsl(244, 38%, 16%); /* (card background) */
    --Soft-violet: hsl(277, 64%, 61%); /* (accent) */

    /* Neutral */

    --White: hsl(0, 0%, 100%); /* (main heading, stats) */
    --Slightly-transparent-white-p: hsla(0, 0%, 100%, 0.75); /* (main paragraph) */
    --Slightly-transparent-white: hsla(0, 0%, 100%, 0.6); /* (stat headings) */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Inter', sans-serif;
    font-family: 'Lexend Deca', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Very-dark-blue);
}
body .container-main {
    width: 327px;
    height: 780px;
    background-color: var(--Dark-desaturated-blue);
    color: var(--White);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0px 20px 20px -10px rgba(23, 25, 41, 0.203087);
}
body .container-main picture {
    width: 327px;
    height: 240px;
    background: #AB5CDB;
    border-radius: 8px 8px 0 0;
}
body .container-main picture img {
    width: 100%;
    mix-blend-mode: multiply;
    opacity: 0.75;
}
body .container-main .container-text {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}
body .container-main h1 {
    font-size: calc(28rem / 16);
    line-height: 32px;
    font-weight: 700;
    text-align: center;
    width: 264px;
    height: 96px;
    font-family: 'Inter', sans-serif;
}
body .container-main h1 span {
    color: var(--Soft-violet);
}
body .container-main p {
    width: 264px;
    height: 100px;
    font-size: calc(15rem / 16);
    color: var(--Slightly-transparent-white-p);
    opacity: 0.75;
    line-height: 25px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
body .container-main .container-text .container-all {
    height: 216px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
body .container-main .container-datos {
    width: 264px;
    height: 56px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
}
body .container-main .container-datos .number {
    font-size: calc(24rem / 16);
    font-weight: 700;
    line-height: 29px;
    font-family: 'Inter', sans-serif;
}
body .container-main .container-datos .name {
    font-size: calc(12rem / 16);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--Slightly-transparent-white);
    opacity: 0.6;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
}