[BUG] Issues In style.css and script.js

Description

1)Repeated Background Definition: button has two background definitions, which are redundant. You only need one.

2)Improvment of Media Queries:Adding another breakpoint for larger screens, e.g desktops above 1440px, to handle ultra-wide or high-resolution screens.

3)Animations Optimization: Adding will-change to animating elements (e.g., the rainbow effect) can optimize browser performance when handling complex CSS animations.

4)Inefficient DOM Access: In the scroll event listener, you repeatedly access the DOM for scrollTopButton. It's better to store the DOM element in a variable outside the scroll event, so the DOM is not queried on every scroll action.

5)Toggle Button Issue: The toggleMenu function compares the maxHeight value with "0px", which could sometimes be "0" or other forms depending on the browser and situation.

assign me the task so I can work on these issues

Screenshots

No response

Any additional information?

No response

What browser are you seeing the problem on?

Google Chrome

Checklist

[X] I have checked the existing issues.
[X] I have read the Code Of Conduct
[X] The changes don't break the code
[X] Please attach the screenshots and video of the development work once it is done

swaraj-das / Collect-your-GamingTools