Stats Review

Hi there. Good job.

I have some suggestions for improving css code:

• declaring variables looks pretty ugly. You need to work on naming.

: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-main-para : hsla(0, 0%, 100%, 0.75); /* (main paragraph) */
--slightly-transparent-white-stat-head : hsla(0, 0%, 100%, 0.6); /* (stat headings) */
}

In my opinion, it would be better like this:

:root {
    --very-dark-blue: 233, 47%, 7%;
    --dark-desaturated-blue: 244, 38%, 16%;
    --soft-violet: 277, 64%, 61%;
    --white : 0, 0%, 100%;

    --color-text: hsla(var(--white), 0.75);
    --color-heading: hsla(var(--white), 0.6);
    --color-accent: var(--soft-violet);

    --bg-body: var(--very-dark-blue);
    --bg-card: var(--dark-desaturated-blue);
}

• Your effect does not match the design. Instead, you could use a pseudo-element with a gradient background.

filter:brightness(80%);

• also, I would advise you to read about css methodology. This will help you better organize your code. In my opinion, this design has only two elements - a card and a picture. That is, in css it will be two components - .card and .image. Further from them you build a tree structure

card
    -  card-content
        - card-header
        - card-text
        - card-stats
            -card-stat
            .....

I hope my feedback will be useful.

Good luck and fun coding 🤝⌨️