Can I use root variables in my CSS file rather than the style blocks in HTML?

I understand that this :root situation works like a class between HTML <style> tabs but is there a way I can put it in my CSS file and have it actually work?

Here I attempted to change text to red via variables

It didn’t work

Here’s the link to my actual code

The variable contains the value, in your case red. You are not using the value on any property.

:root {
  --main-red: red;

h1 {
  color: var(--main-red);

header {
  background: var(--main-red);

nav {
  border-bottom: 2px solid var(--main-red);