Please help with my overflowing div

Hi everyone,
I finished my Random quote Machine, but I have a problem making it responsive.
Here’s my code:

And here’s the live version:
On mobile, the container (the blue bubble) overflows out of the body and is cut off.
I know I have to fix the font size, but that alone won’t cut it.
I’d like the text to adjust to the size of the bubble too.
And I cannot use overflow because my :after element disappears (the triangle part of the bubble).
I’d very much appreciate any help!!

Have you tried setting the .wrapper container to height: 100vh?

Or the body to height: 100vh

Yes, it doesn’t work :frowning: