Usability improvement for narrow portrait devices

Added responsiveness for skinny portrait viewports, e.g. smartphones held in an upright position. This includes the frame darkening to make th text more visible over the white keys of the background image and the placeholder text shortening to become readable with reduced space.

This can be shown by resizing your browser window to sub 800px in diameter, in which the colour change eases in gradually. This looks pretty cool, and is recommended to all.