I've used opacity to hide and show the overlay image

Hello 👋Ryuuuuu! ≧﹏≦,

I have some suggestions you might find useful.

1 Remove the <div class= "attribution"> from the main and change it to <footer class="attribution"> And wrap the text inside a p element. This improves accessibility and SEO since it is much more semantic.

2 To body, replace

height: 100vh;

with

min-height:100vh;

This prevents content overflowing on short devices or mobile devices in landscape orientation.

I hope this helps 🙃

Your solution is awesome 👏 I especially liked the use of the clamp() function

Happy coding bro✌️