Issues using CSS in express.js

I am interfacing with the world of web development. I'm learning how to use express.js to create the backend. However these days I ran into a problem with CSS: specifically some CSS selectors are not considered, for example in the following code the h1 selector works but the #page-container selector does not. Thanks to whoever will be able to help me

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/index.css')
    link(rel="preconnect" href="https://fonts.gstatic.com")
    link(href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet")
  body
    block content

index.pug

extends layout
    
block content
  #page-container
    #title-container
      h1 LOGIN
    #center-container
      #thumb-container
        img(src='#')
        #button-container
          button(src='#')

index.css


h1 {
    font-family: Arvo, Georgia, "Times New Roman", Times, serif;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
};

#page-container {
    max-width: 992px;
    color: lightgray;
    margin: 10px auto;
    height: 100%;
};

As requested I am editing the question by adding the HTML rendered by the browser

Rendered HTML

<html>
   <head>
      <title>Express</title>
      <link rel="stylesheet" href="/stylesheets/index.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">
   </head>
   <body data-new-gr-c-s-check-loaded="14.993.0" data-gr-ext-installed="">
      <div id="page-container">
         <div id="title-container">
            <h1>LOGIN</h1>
         </div>
         <div id="center-container">
            <div id="thumb-container">
               <img src="#">
               <div id="button-container"><button src="#"></button></div>
            </div>
         </div>
      </div>
   </body>
</html>

Solution

This is a typo, but I'm answering, so OP can see it.

There are ; after your rules in your CSS. Remove those:

h1 {
  font-family: Arvo, Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
}

#page-container {
  max-width: 992px;
  color: lightgray;
  margin: 10px auto;
  height: 100%;
}

<div id="page-container">
  <div id="title-container">
    <h1>LOGIN</h1>
  </div>
  <div id="center-container">
    <div id="thumb-container">
      <img src="#">
      <div id="button-container"><button src="#"></button></div>
    </div>
  </div>
</div>