How to add page numbers

I'm trying to dynamically add page numbers without the default browser styles applying, adding the title in the top two corners, date and time in the bottom right, and finally the page number in the bottom left.

This is the one solution I found that doesn't involve making HTML elements to manually split the document into pages.
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#counters
```css
@page {
@bottom-center {
content: counter(page) " of " counter(pages);
}
}
```
Unfortunately it doesn't work. I might be missing some details about how this is supposed to work.