Styling the Orchard Tag Cloud so it looks like a cloud, not a list

I've had a tag cloud sat on the right-hand side of my blg (or down the bottom for those viewing on mobile devices, or computers with tiny screens) pretty much since I set it up on Orchard. The tag cloud is provided by a built-in module, and has been since February 2014 (according to the GitHub commit history) when it made its way in from the Orchard.Module.Vandelay.Industries module. I mention this because the solution to my tag cloud being a tag list came yesterday when I somehow landed on a question titled How to use vandelay tag cloud in Orchard CMS blog which was answered by Bertrand Le Roy way back in November 2012 giving me exactly what I needed to style the cloud to work for me! The answer's a little out of date with regards to class names but the principles of it are exactly what I needed. I'll document how I've styled my tag cloud so there's a reference that may be useful to others.

Styling the Orchard Tag Cloud

The first thing to be aware of when you're styling your tag cloud is that there's an element of the way you've configured the tag cloud widget that'll impact how you setup your CSS, specifically the number of buckets that you've configured against the cloud:

The number of buckets set, as noted by the informational text under the field determines how many different sizes of tags will be rendered. Or it does if there's any styling associated with the relevant classes! I call this out because the answer by Bertrand is for a tag cloud with 10 buckets, you'll want to adjust the styling of your classes accordingly. The specific styling I've applied to my site is:

ul.tag-cloud { list-style: none; }
li.tag-cloud-tag { display: inline; }
.tag-cloud-tag a { border: none; }
.tag-cloud-tag-1 { font-size: 1em; }
.tag-cloud-tag-2 { font-size: 1.3em; }
.tag-cloud-tag-3 { font-size: 1.5em; }
.tag-cloud-tag-4 { font-size: 1.7em; }
.tag-cloud-tag-5 { font-size: 1.9em; }

This is setup for the 5 buckets I've chosen and gives a reasonably distinct change in size between the first and last buckets. Of note is the fact that the names of the classes have changed since the answer given on Stack Overflow, though that was sufficient to push me in the right direction.