ASP.NET Core 6 MVC : CSS variable Issues

I copied and pasted this CSS to codepen The Code.

When I used it for my ASP.NET Core 6 MVC app it doesn't work. If I don't use the variables and just colors it works just fine. Is there something I missed that does not allow CSS variables to work?

//the code
:root {
    --fb: rgb(16,148,244);
    --tw: rgb(93,168,221);
    --gg: rgb(234,67,53);
    --lin: rgb(10,102,194);
    --white: #ffffff;
    --fFamily: "Courier New", monospace;
}
button{
    font-family:var(--fFamily);
}
.fb-icon {
    color: var(--white);
    background-color: var(--fb);
}

    .fb-icon:hover {
        color: var(--fb);
        background-color: var(--white);
    }

.google-icon {
    color: var(--white);
    background: var(--gg);
}

    .google-icon:hover {
        color: var(--gg);
        background-color: var(--white);
    }

.twitter-icon {
    color: var(--white);
    background-color: var(--tw);
}

    .twitter-icon:hover {
        color: var(--tw);
        background-color: var(--white);
    }

.linkedin-icon {
    color: var(--white);
    background-color: var(--lin);
}

    .linkedin-icon:hover {
        color: var(--lin);
        background-color: var(--white);
    }

I create a new Asp.net 6 MVC application, and use the following code, it seems that no matter using or not using the CSS variables, the code works well on my side:

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <button class="fb-icon"> Facebook </button>
    <button class="twitter-icon">  Twitter </button>
    <button class="google-icon"> Google </button>
    <button class="linkedin-icon"> LinkedIn </button>
</div>
<style>
    :root {
        --fb: rgb(16,148,244);
        --tw: rgb(93,168,221);
        --gg: rgb(234,67,53);
        --lin: rgb(10,102,194);
        --white: #ffffff;
        --height: 35px;
        --fFamily: "Courier New", monospace;
    }
    button{
        height:var(--height);
        font-weight: 700;
        font-family:var(--fFamily);
        font-size: large;
    }
    .fb-icon {
        color: var(--white);
        background-color: var(--fb);
    }

    .fb-icon:hover
    {
        color: var(--fb);
        background-color: var(--white);
    }

    .google-icon {
        color: var(--white);
        background: var(--gg);
    }

    .google-icon:hover
    {
        color: var(--gg);
        background-color: var(--white);
    }

    .twitter-icon {
        color: var(--white);
        background-color: var(--tw);
    }

    .twitter-icon:hover
    {
        color: var(--tw);
        background-color: var(--white);
    }

    .linkedin-icon {
        color: var(--white);
        background-color: var(--lin);
    }

    .linkedin-icon:hover
    {
        color: var(--lin);
        background-color: var(--white);
    }
</style>

@*without using css variables*@
@*<style>
    button{
       height:35px;
       font-weight: 700;
       font-family:"Courier New", monospace;
       font-size: large;
    }
    .fb-icon {
        color: #ffffff;
        background-color: rgb(16,148,244);
    }

    .fb-icon:hover {
        color: rgb(16,148,244);
        background-color: #ffffff;
    }

    .google-icon {
        color: #ffffff;
        background: rgb(234,67,53);
    }

    .google-icon:hover {
        color: rgb(234,67,53);
        background-color: #ffffff;
    }

    .twitter-icon {
        color: #ffffff;
        background-color: rgb(93,168,221);
    }

    .twitter-icon:hover {
        color: rgb(93,168,221);
        background-color: #ffffff;
    }

    .linkedin-icon {
        color: #ffffff;
        background-color: rgb(10,102,194);
    }

    .linkedin-icon:hover {
        color: rgb(10,102,194);
        background-color: #ffffff;
    } 
</style>
*@

The result as below:

When build your application, is there any warning or error? Whether you are using _layout or not. In my application, there is no warning and error and I'm using the _layout page. You can check it.

Besides, you can also copy the above code to your application and check it. If still not working, try to create a new MVC application and test the above code in the Index page.

Update:

As mentioned in the comments, I could reproduce the problem: if using the CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github.

As a temporary workaround, you can use the CSS isolation without CSS variables, Or if you want to use the CSS variables, you can add the CSS style in the site.css file (in the wwwroot/css folder) or add the CSS style in the <style> tag in the view page.