Index.css not being applied to React Application

I am trying to follow a react youtube tutorial and for some reason my index.css is not working when I apply the changes to the folder and click save. I’ve tried searching similar questions on stackoverflow and google but the solutions have not helped. I tried importing. "./index.css" to my index.js and App.js files but no success. My css file is in the src folder along with the other files.

App.js:

import Header from "./components/Header";

function App() {
  const name = "brad";
  const x = false;
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

index.css:

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Poppins", sans-serif;
    }
    
    .container {
      max-width: 500px;
      margin: 30px auto;
      overflow: auto;
      min-height: 300px;
      border: 1px solid steelblue;
      padding: 30px;
      border-radius: 5px;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .btn {
      display: inline-block;
      background: #000;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
      text-decoration: none;
      font-size: 15px;
      font-family: inherit;
    }
    
    .btn:focus {
      outline: none;
    }
    
    .btn:active {
      transform: scale(0.98);
    }
    
    .btn-block {
      display: block;
      width: 100%;
    }
    
    .task {
      background: #f4f4f4;
      margin: 5px;
      padding: 10px 20px;
      cursor: pointer;
    }
    
    .task.reminder {
      border-left: 5px solid green;
    }
    
    .task h3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .add-form {
      margin-bottom: 40px;
    }
    
    .form-control {
      margin: 20px 0;
    }
    
    .form-control label {
      display: block;
    }
    
    .form-control input {
      width: 100%;
      height: 40px;
      margin: 5px;
      padding: 3px 7px;
      font-size: 17px;
    }
    
    .form-control-check {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .form-control-check label {
      flex: 1;
    }
    
    .form-control-check input {
      flex: 2;
      height: 20px;
    }
    
    footer {
      margin-top: 30px;
      text-align: center;
    }

File Structure:

src:
|App.css
|App.js
|index.js

Package.json:

 {
      "name": "react-task-tracker",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }