Fine tune my website

I am a self published writer who tries to maintain a small site to help interested readers learn about my books. During my annual update to add my latest publication I noticed a couple of my pages were broken (one I ended up scrapping as it would be too complex to fix though my contact one I need). I contacted my hosting site what may have caused the error they said they'd look into it, next time I check my whole site is gone and I can't even get into my server to see if my webpages are still there. The company has been hush hush about what they did. As a result I was forced to rewrite my site as best as I could from the limited info I have saved local host but there is many elements I can't get to function right. For starters the contact page was producing 500 Gateway network protocol errors or something (my company gave me an error log saying it will help isolate the issue what a joke at least for me). I tried to rebuild the contact page many times each time producing the same error (I have all these attempts still which you can download here [login to view URL]!NvJw3K5S!LOK5bz1ARp4sB207R4zzWAQSyLMYqu_cals5qxrMzYM if you think they may help but it's a messy folder.) Aside from having to rebuild a functioning contact page (with recaptcha (site keys are in a comment in the head tag of the html page) I have a bit of css, and javascript that needs finessing. for the css there are two things. Mainly I need the site to be responsive (I sort of did this with the main nav but gave up after weeks of not getting it quite right) so this will be a lot of work with media queries, width percentages etc. Part of this is to have my content divs stack vertically on mobile but side by side on desktop. The main nav is the other css issue my rollover effect ceased to function and I can't even get the links to work This may just be an html issue either way I'm lost. And if it possible the other main nav thing is to implement my header image (with 100% width) on the desktop version but have only the logo version for the mobile. As for the Javascript there are two things. The first is on my book page there is an external js function which assigns the right html link to a div/button element based on which book button the user clicked on. Because it is only a fragment of the original code something is obviously missing as the buttons (buy print and buy digital) aren't loading the links they were supposed to. The other javascript is on the character page. In another year I will be producing the follow up series (continues where this one left off) because of which, any information pertaining to the series I will be releasing under the same domain. With such declared instead of book 1 characters book 2 characters etc it is going to need a parent button with the series name so series 1>book1 characters. Because there are so many characters the character menu scrolls (probably not in a mobile friendly fashion which if not would be nice to fix) with the overflow hidden. What would need to change is make the character menu a scrollable sub menu to its parent series name so, to my understanding code an event listener to learn what button was clicked series 1 or 2 than load that character menu which can then be scrolled. I started coding it a bit but wasn't getting too far, again I'm tired of fighting with code I don't understand it enough I only took basic html in school after all. Anyhow, Hopefully that explains it well enough. Because of my server malfunctioning it will have to be written on local host, I'm sorry for that. Anyhow, I've included the basic site so you can take a look at what I have so far so to see if you're up for the task. Hopefully soon my server will work again so to upload it but the host services isn't very forthcoming what is going on. Anyhow thanks for your time and I look forward to hearing from you if you are up to the challenge (at least a challenge for me).