Level 2 headings are a mere 20% larger than level 3 headings (`36px` and `30px` respectively). This makes it difficult to distinguish the two, especially when they're not right next to each other. ([Example](https://ritchie.page/blog/i-made-a-new-site/))  Common ways to solve this include greater differences in font size, font weight, and/or color. Decorations, such as underlines, can also be used. Notably, the font weight seems to be set to 700 (Corresponding to bold), yet the non-bold version is still in use. This is because a different font name is set for each variant in the CSS. The correct way to do this is to set the same font name, and then specify a different `font-weight` in each `@font-face` block. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight) for details. Displaying the correct variant doesn't make the headings more easy distinguishable, but this might be helpful to know in fixing this.