title: ASP.NET Core 6 MVC : CSS variable Issues
body: <p>I copied and pasted this CSS to codepen <a href="https://codepen.io/albertcardonaii/pen/mdBoOdP" rel="nofollow noreferrer">The Code</a>.</p>
  <p>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?</p>
  <p><a href="https://i.stack.imgur.com/OiavD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OiavD.png" alt="Inside the Login.cshtml.css" /></a></p>
  <p><a href="https://i.stack.imgur.com/ZJv12.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZJv12.png" alt="BlackBG works" /></a></p>
  <pre class="lang-css prettyprint-override"><code>//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: &quot;Courier New&quot;, 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);
      }
  </code></pre>