Responsive GitHub user API app w/ CSS auto-update variables for themes

(before the first point, my js code stopped working when i added too many "const x = document.querySelector("x")" like 15 or 20 and I just want to know why, I looked for the error elsewhere but could not fin anything similar, I just remembered it at the end of the feedback req, thank you a lot.)

Well, first of all, I do not know how is the square brackets part of CSS functions called so please is somebody can help me out with it by telling me the name :)

Second, I feel like I used too many id selectors, is there any recommendation for that?

Third, the js update values part I feel it is too long and I really believe there is a refactor for that but I just don't know how.

Fourth is my code messy or legible?

Fifth how did YOU solve the theme switcher part? I barely used the @media prefers theme query, only on js.

Sixth, this is my first time using grid and js for a real project. So any input on both of them is really appreciated.

FOR ANYONE READING THIS, THANK YOU! I hope my solution helps you and I am really glad for you to take the time at my solution! Have a nice day! :D