ref(css): Shrink h4 to differentiate it from h3

[lobsterkatie]

As @rhcarvalho correctly points out here, actual headings have many advantages over text made to look like a heading by bolding it and putting it on its own line.

In markdown, it's the difference between #### Dogs Rule and **Dogs Rule**. In HTML it means anchor links, consistent styling, and better accessibility (vs. lack of all of those things).

So, a clear win for headings, right? It would be, except that with our current CSS, it's next to impossible to tell an h4 (#### Dogs Rule) from an h3 (### Dogs Rule), because the difference is only a 4% reduction in size. Since using h4s breaks the document's visual hierarchy, folks in many cases choose to use the fake heading in spite of its drawbacks, because it is visually distinct from an h3.

This PR shrinks the size of h4s so that you get the look of the fake heading, with all of the advantages of the real one.

[rhcarvalho]

This is good, but I can't fail but notice that now h4, h5 and h6 are all the same size :)

And we do have cases in the docs that we use as many as 5 nesting levels :/

Might be the time to loop in a designer and review the header styles. (Or stop nesting so many levels in a single page, which is also humanly hard to follow/distinguish)

[PeloWriter]

That is a good point, Rodolfo, thank you. My preference is that we do not ever use an H5 or H6. Doing so is, as you note, not super helpful to readers because they're those headers are visually so close. In reality, the need for this level heading suggests there's actually a deeper content problem - we shouldn't need more than four headings.