Besides small points like the use of to indent, <code> unsemantically, everything looks well organized with a lot of effort in styling.
And that leads me to the main point:
It would be better to separate text content and styling.
And that would mean an XML format with a custom XML-to-HTML XSL transformation.
There are some XML formats ...
You don't have to list down all characters. All printable characters in the ASCII range are found in 33-126. What you could do is generate a random number within this range, and convert them into characters using String.fromCharCode().
Also, it's always a good practice to separate business logic from view logic. You will want to be able to ...
querySelectorAll vs getElementsByClassName
Generally document.getElementsByClassName will be quicker than document.querySelectorAll (see this post for more information) and the former also returns a live HTMLCollection so it wouldn't need to be queried each time....