I've been forced to work on recently working on a website.
I'm not too used to jQuery and/or CSS, and I need a bit of help with that, so (naturally) I came here.

My current (edit: not anymore ) problem is:
- I want to have an options menu with a cool transition. (done)
- I want the options in the options menu to appear after the transition, but when the settings box is closing, it should disappear immediately.
- I think I'm on the right track with the latter, but I'm not completely sure.

The github repo is here, and the (not really, but kinda live) site is here.

Edit: The problem is that, when you click the switch (after clicking the settings icon), then close the settings icon, everything is all screwed up.

After I posted, I figured out what is happening by myself, (I'm checking for clicks in the settings div, and the switch is in the settings div.) but I cannot figure out how to solve it.

It looks like the switch in the off state isn't properly set to hide when you close the settings panel, unlike the on state. To check, open the settings menu, click the switch, then close the settings menu, and click the switch again. It doesn't disappear at all, meaning when off, for some reason, it can't update its visibility to hide.

I fixed the problem, by using some "vanilla" javascript! ("vanilla" meaning not jQuery, referring to plain. And yes, I know jQuery is JS, but I still separate them into different entities.)

Can someone please explain to me what am I doing wrong here, and how I can fix it? https://github.com/Legend-of-iPhoenix/about/blob/master/js/main.js

I have tried numerous things, to no avail. (it's probably something stupidly simple, too)

The code I am using to generate random numbers and pass them to my CSS came from here and it seems to work fine there!

You should describe the symptoms and what should be happening, because I can't be bothered to first figure out what you want to happen then try to debug it.

Well, I don't know what's happening, either.

Here's an active link to the site, by the way.

I am trying to make the button resize itself randomly when it is hovered on. I am also making it change colors with a CSS animation. (which worked, until I tried to implement the JS functionality)

I think it is a combined failure in the CSS and the JS. I think that the CSS may have more of a hand in it, though, because I am much less familiar with it.

CSS File
JS File
HTML File

If you guys come up with anything at all, please tell me, by posting ideas for me to try

It's related to the CSS variables, and a missing </script> tag prevented the rest of the site from showing up. Typical idiotic me

The CSS variables are the only thing that isn't working

It's all working, just not as expected.

I am a complete moron without 2 days of sleep. I guess I am really weak

Please excuse the stupidity flowing from my hands in this thread

When you are sure there is a better way, yet you can't quite figure it out.

lines 39-93

EDIT: Thanks, PT_, for making a pull request that was nothing short of amazing.