layout: fix content scrolling behind navbar

[MRita443]

Currently, the navbar is set to fixed, so it doesn't occupy space in the layout. As a result, when content overflows vertically, it appears behind the navbar, and the page content is not properly centered. While removing the fixed positioning would fix this issue, we need the navbar to stay visible while scrolling. We should research solutions for this.

Example on login page 680x410:

Desired outcome:

[MRita443]

If the transition is too stark, add a fade out gradient at the top of the page below the nav bar

[RuiSoares333]

Considering that the navbar should be visible at all times, from my point of view, there are 2 options:

Negative Margin	Background Color Opaque
By changing the main's div class margin to mt-20 -mb-10 md:mb-20	By adding height breakpoints to the tailwind.config file and then adding the following classes to the navbar bg-vivid-red-900 backdrop-blur-sm bg-opacity-80 and h-sm:bg-opacity-0 h-sm:backdrop-blur-none