Fix Lobby/Homepage Content Height - Research and Implementation Suggestion

Summary

Currently this is how https://colonist.io/ looks like when using the inspect mode in Chrome:

I researched to see if we can find an ideal solution for this

Medium Newgrounds

Gartic Phone

Venge.io

Catan Universe

both scrolling and non-scrollable websites maintain their header tab in the middle (if they have header tabs)
non-scrollable sites are mostly browser games like us
scrollable sites minimizes the size of their content to show more content at the bottom
non-scrollable maintains the size of the page even if I maximize the size on 4k. only the sizes that remain the same are advertisements

maintain header and footer width
the main content area should have its height and width adjusted on a specific percentage of the entire browser screen. something like 20% margin between the header and main content area and 15% margin between footer and the content and 65% will always be the content area. I could expound on this if my recommendation would work.

[x] how would it look on mobile? same with our current, mobile users cannot expand on Mobile view
[x] how will it look on other pages that are scrollable? ex. Community, Jobs, Store? we could follow the scrollable format, but it would be inconsistent with how our homepage and lobby are presented so I suggest doing something like this: https://prnt.sc/Z0GSQjHz3yzE, set a % on the space it would take regardless of the screen. not sure if this is easy to implement but we can still maintain how our current one is
[x] any other edge cases? none that I could think of in relation to the content height beside our scrollable and non-scrollable pages
[x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

@demiculus