Why won't my Flask app connect to my CSS files?

Here is my project hierarchy:

Project

Here is my HTML file :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css') }}"/>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

My .py flask file :

from flask import Flask, render_template, redirect, json, url_for, request, abort
from pymongo import MongoClient

client = MongoClient()
db = client.web_zoo

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('home.html')

if __name__ == "__main__":
    app.run(debug=True)

And my CSS file :

body {
    color: green;
}
h1 {
    color: orange;
}

The HTML and .py files work fine and the HTML is rendered and displayed on the page. However the CSS doesn't change. It just displays it in normal black text.

NOTE : All those imports are there as I was doing something else. I stripped off everything else and still have this problem.

I can link bootstrap to it, and the CSS works, but not for my own CSS files.

I have looked at and tried these following solutions :

CSS Problems with Flask Web App

Application not picking up .css file (flask/python)

best way to override bootstrap css

It's probably quite obvious but I'm stuck. Any help? Thanks in advance!

EDIT - I have added a picture of the project hierarchy now instead of just a list. As you can see there are some other HTML files in there too, but none are used nor referenced.