CSS Custom Properties implementation guide in Media Queries for Responsive Design
I've searched everywhere and can't find a clear answer. I'm optimizing some code but I recently switched to I tried several approaches but none seem to work... This might be a silly question, but I'm experiencing an scenario with CSS custom properties (variables) not updating properly when using media queries for a responsive design. I have defined a set of CSS variables in the `:root` that I want to change based on the viewport width. However, when I resize the browser, the styles do not reflect the changes as expected. Here’s a snippet of my CSS: ```css :root { --main-bg-color: lightblue; --main-text-color: black; } body { background-color: var(--main-bg-color); color: var(--main-text-color); } @media (max-width: 600px) { :root { --main-bg-color: lightgreen; --main-text-color: white; } } ``` I’ve tested this in both Chrome and Firefox (latest versions), but the background and text color remain the same even when the screen width is below 600 pixels. I've also tried clearing the cache and even using `!important` to force the colors, but nothing seems to work. Is there something I’m missing here? I expected the background color to change to light green and the text color to change to white when the viewport is resized below 600px. Any guidance or insight would be greatly appreciated! My development environment is Ubuntu. I'd be grateful for any help. Am I missing something obvious?