Why do :root CSS properties don't show up?


the CSS custom properties do not show up at all and the first 2 lines give error in VS code

:root {
--primary-color: #2bcbba;

How do I fix it?

Can you please provide the error message VS Code gives you and provide your actual code rather than a screenshot?

@a2937 here’s the code that doesn’t show on the page

:root {
    --primary-color: #2bcbba;
    --light-color: #d1d8e0;
    --grey-color: #687080;
    --red-color: #ff4757;
    --flashwhite-color: #f1f2f6;
    --white-color: #ffffff;
    --dark-color: #212121;
    --primary-font: 'Montserrat', sans-serif;
    --second-font: 'Prata', serif;
    --fs14: 14px;
    --fw600: 600;

    --transition-color: color .3s;
    --transition-background: background-color .3s;
    --transition-border: border .3s;
    --transition-transform: transform .3s;

    --shadow: 0px 10px 20px 0px rgb(0 0 0 / 20%);
    --fade: fade-bottom .3s cubic-bezier(0.39, 0.575, .0565, 1) both;


The error message on VS code says:
media query expected

It feels like we don’t have all of the information we need to help you. The CSS you are showing us is about adding custom variables, but then the error message you gave us is about media queries. Can you explain in more detail what you are trying to do?

Also, when you say that “the code that doesn’t show on the page”, what exactly do you mean?

I solved it :partying_face:
the problem was a missing ; on the line above the :root section