Blazor does not apply style correctly from app.css

I am trying to learn Blazor wasm by writting my first app in it. VS 2022 is up to date, and .NET 6 is up to date. I have the following code in app.cs (amongst others, shortened version):

:root {
  /* some variables defined */    
}
* { ... }
html { ... }
body { ... }

.container-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

The idea was to reuse this style throughout the app. In the index.html I have the following relevant links:

<head>
  ...
  <link href="css/app.css" rel="stylesheet" />
  <link href="WebClient.styles.css" rel="stylesheet" />
  ...
</head>

I tried applying container-centered class to MainLayout.razor NotFound section:

<NotFound>
  <LayoutView Layout="@typeof(MainLayout)">
    <div class="container-centered">
      <h3>404</h3>
      <p role="alert">There is nothing on this page</p>
    </div>
  </LayoutView>
</NotFound>

However it does not work, content is showing at the top-left corner. Now, if I change something in app.cs, save, then undo the change, save, hot reload will pick up the changes, and now the 404 message will be shown in the middle of the screen - which is how it should be.

So, obviously something is preventing from applying this style at beginning. I am sure that app.cs is loaded in app, since the variables defined in it are colors which are used on other screens successfully.

Now, if I move container-centered class definition to index.html, then it works without problem.

Anyone knows what is going on here?

Solution

It looks like that my problem was related to moving razor components from one location to another. At this point css is no longer "attached to razor file. When I restart VS, everything works OK.