CSS is too hard

I tried css only solution for the dropdown first using animation. It worked great--for half the time. The other half the <detail> element just immediately showed the contents without having the smooth animation. why?

In mobile layout, I added padding to the body tag so that my content won't touch the bottom. It didn't and site ignore me lol. I had to add 100% height to html instead--why? why can't I just tell body to occupy 100% and add padding and call it a day?

The background was acting weird too. The smooth gradient would load fine at first load in mobile. As soon as the scrollbars appeared, the gradient would start again? I had to add the background to html. But when I removed the background from body, it would do the same thing--huh?