How to dynamically scale viewports based on mobile device within website?

I'm hosting a website as a project to familiarize with the networking side of things. I figured I should host a halfway decent website. Not even close to being a web developer, I nearly completed before realizing my template doesn't scale well at all with mobile devices. Without some serious hacking away (trying to focus on networking front) it's never go to be particularly optimized for mobile devices, but I'd like it to not be totally broken and have taken a liking to the aesthetic, so I don't think I want to switch to a more adaptable template.

I've set the viewport so that it scales decently well enough with some iPhones, but I'd like the ability to dynamically scale based upon the end-users device, as the current setting still leaves quite a bit of users with a broken design. Where would I even begin with this?

Here is the website: https://ascendantvestals.com (A fictitious cult, luring people in with the prospect of a free Minecraft server. lol)