Why are my styles not getting applied to elements in nextjs?

Question

I have added the following classes to elements as follows:

import Link from "next/link";
import React from "react";

const Page = () => {
  return (
    <div>
      <h1 className="notes-header">Index Page</h1>
      <Link href="./notes">
        <a className="notes-home">Notes</a>
      </Link>
    </div>
  );
};

export default Page;

Next, I added styling to my element as follows

.notes-header {
  font-size: 100px;
}

.notes-home {
  font-size: 28px;
}

Lastly, I created a _app.js file and imported the global css file as shown below:

import React from "react";
import "../styles/globals.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

The problem is my styles don't get applied to my selected elements. What I'm I getting wrong?