Node.js Express not able to get static files and route is deeper then one folder level

Before I ask the question here is the folder structure of my node.js express app:

/home server.js index.html /app /routes public.js /public /css main.css

This is what I have in server.js:

// ROUTING FOR STATIC CONTENT
var public_dir = __dirname + '/public';
app.use(express.static(public_dir));

// INITIALIZE ROUTER
var public_router = express.Router();

// IMPORT PUBLIC ROUTES
require('./app/routes/public')(public_router, public_dir);

// REGISTER ROUTES
app.use('/', public_router);

This is what I have in /app/routes/public.js:

var path = require('path');

module.exports = function(public_router, public_dir) {

    public_router.get('/new', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });

    public_router.get('/popular', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });

    public_router.get('/popular/today', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });
}

Inside index.html I call css file like this:

<link rel="stylesheet" href="css/main.css">

The problem:

When I visit mydomain.com/new and mydomain.com/popular, css file is loaded and page is rendered properly. However when I visit mydomain.com/popular/today, css file is not loaded properly. In chrome dev tools I see that browser is trying to load css from popular folder which is incorrect.

Any ideas or comments would be appriciated. Thanks in advance!