body {
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
}

#demo,
.box {
  border: 1px solid #bbb;
  border-radius: 0.5em;
}

#demo {
  clear: all;
  display: inline-block;
  width: 95vw;
  height: 60vh;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 1em;
}

.box {
  cursor: pointer;
  display: inline-block;
  margin: 0.1em;
  width: 4em;
  height: 4em;
}

.box.active,
.box:hover {
  border: 1px solid #222;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.windfall {
  background-color: #3a2d5d;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.6), transparent 70%),
    radial-gradient(circle at 80% 60%, rgba(0, 255, 255, 0.6), transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(0, 0, 255, 0.6), transparent 50%);
}

.party {
  background-color: teal;
  background-image:
    radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.5),
      transparent 50%),
    radial-gradient(circle at top right,
      rgba(255, 255, 255, 0.5),
      transparent 60%),
    radial-gradient(at bottom left,
      rgba(255, 0, 255, 0.5),
      transparent 80%),
    radial-gradient(at bottom right,
      rgba(255, 100, 100, 0.5),
      transparent 30%);
}

.fun {
  /* Credit: Mathieu Veber */
  background-image:
    radial-gradient(circle at 30% 5%, #FFDB58, transparent 50%),
    radial-gradient(circle at 59% 78%, #FF7F50, transparent 40%),
    radial-gradient(circle at 7% 70%, #40E0D0, transparent 70%),
    radial-gradient(circle at 95% 4%, #D896FF, transparent 40%),
    radial-gradient(circle at 99% 92%, #FFFACD, transparent 100%);
}

.swishy {
  background-image:
    radial-gradient(circle at 17% 41%, #0000FF, transparent 80%),
    radial-gradient(circle at 60% 7%, #FF00FF, transparent 80%),
    radial-gradient(circle at 75% 82%, #7F00FF, transparent 80%),
    radial-gradient(circle at 86% 28%, #FF007F, transparent 80%),
    radial-gradient(circle at 2% 93%, #FF007F, transparent 80%);
}

.sunray {
  background-image:
    radial-gradient(circle at 99% 2%, #353535, transparent 80%),
    radial-gradient(circle at 4% 11%, #FAF474, transparent 80%),
    radial-gradient(circle at 29% 77%, #FECEAB, transparent 80%),
    radial-gradient(circle at 90% 86%, #E84A5F, transparent 80%);
}

.spotlights {
  background-color: #000428;
  background-image: radial-gradient(circle at 20% 40%, #fbc2eb 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, #a6c1ee 0%, transparent 50%);
}

.showdown {
  background-color: #000428;
  background-image: radial-gradient(circle at 20% 20%, #007991 0%, transparent 70%),
    radial-gradient(circle at 90% 10%, #20a967 0%, transparent 70%),
    radial-gradient(circle at 90% 90%, #78a1ff 0%, transparent 60%),
    radial-gradient(circle at 40% 80%, #78ffd6 0%, transparent 80%);
}

.fresh {
  background-image:
    radial-gradient(circle at 85% 18%, #D7AEFB, transparent 80%),
    radial-gradient(circle at 23% 67%, #A7FEEB, transparent 80%),
    radial-gradient(circle at 17% 3%, #FAF474, transparent 80%),
    radial-gradient(circle at 81% 75%, #FFD460, transparent 80%);
}

.bubbles {
  background-image:
    radial-gradient(circle at 11% 20%, #FFFACD, transparent 30%),
    radial-gradient(circle at 1% 81%, #FFFACD, transparent 30%),
    radial-gradient(circle at 44% 21%, #FFFACD, transparent 30%),
    radial-gradient(circle at 48% 64%, #FFFACD, transparent 30%),
    radial-gradient(circle at 77% 50%, #FFFACD, transparent 30%),
    radial-gradient(circle at 84% 3%, #FFFACD, transparent 30%),
    radial-gradient(circle at 95% 96%, #FFFACD, transparent 30%),
    radial-gradient(circle at 27% 31%, #CB4154, transparent 100%),
    radial-gradient(circle at 84% 49%, #4B0082, transparent 100%),
    radial-gradient(circle at 10% 50%, #40E0D0, transparent 100%);
}

.wow {
  background-image:
    radial-gradient(circle at 12% 4%, #40E0D0, transparent 60%),
    radial-gradient(circle at 59% 62%, #D896FF, transparent 60%),
    radial-gradient(circle at 91% 13%, #EA7E5D, transparent 60%),
    radial-gradient(circle at 22% 95%, #4B0082, transparent 60%),
    radial-gradient(circle at 84% 84%, #CB4154, transparent 60%),
    radial-gradient(circle at 2% 9%, #36454F, transparent 60%);
}

.dusky {
  background-color: #000428;
  background-image: radial-gradient(circle at 10% 30%, #004e92 0%, transparent 50%),
    radial-gradient(circle at 80% 0%, #000428 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, #fbc2eb 0%, transparent 80%);
}

.jupiter {
  background-image: linear-gradient(to bottom, #ffd89b, #19547b);
}

.juice {
  background-image: linear-gradient(to right, #7B4397, #DC2430);
}

.minty {
  background-image: linear-gradient(40deg, #00C9FF, #92FE9D);
}

.lavender {
  background-image: radial-gradient(circle, #fbc2eb, #a6c1ee);
}

.corporate {
  background-image: radial-gradient(circle, #004e92, #000428);
}

.peach {
  background-image: linear-gradient(to right, #f12711, #f5af19);
}

.yummy {
  background-image: linear-gradient(23deg, rgb(3, 0, 30), rgb(115, 3, 192), rgb(236, 56, 188), rgb(253, 239, 249));
}

.political {
  background-image:
    radial-gradient(circle at 96% 10%, #CB4154, transparent 80%),
    radial-gradient(circle at 8% 40%, #1560BD, transparent 100%),
    radial-gradient(circle at 64% 67%, #4B0082, transparent 100%),
    radial-gradient(circle at 31% 11%, #36454F, transparent 100%);
}

.elmer {
  background-image:
    radial-gradient(circle at 48% 48%, #1560BD, transparent 10%),
    radial-gradient(circle at 71% 28%, #4B0082, transparent 10%),
    radial-gradient(circle at 29% 25%, #FF7F50, transparent 10%),
    radial-gradient(circle at 34% 55%, #1560BD, transparent 10%),
    radial-gradient(circle at 49% 19%, #008080, transparent 10%),
    radial-gradient(circle at 61% 71%, #4B0082, transparent 10%),
    radial-gradient(circle at 64% 13%, #228B22, transparent 10%),
    radial-gradient(circle at 12% 73%, #FF7F50, transparent 10%),
    radial-gradient(circle at 14% 10%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 22% 50%, #D896FF, transparent 10%),
    radial-gradient(circle at 45% 73%, #FFDB58, transparent 10%),
    radial-gradient(circle at 59% 48%, #CB4154, transparent 10%),
    radial-gradient(circle at 72% 66%, #FFE5B4, transparent 10%),
    radial-gradient(circle at 11% 12%, #87CEEB, transparent 10%),
    radial-gradient(circle at 25% 7%, #F5F5DC, transparent 10%),
    radial-gradient(circle at 5% 39%, #708090, transparent 10%),
    radial-gradient(circle at 51% 95%, #D896FF, transparent 10%),
    radial-gradient(circle at 25% 86%, #CB4154, transparent 10%),
    radial-gradient(circle at 92% 33%, #CB4154, transparent 10%),
    radial-gradient(circle at 83% 81%, #228B22, transparent 10%),
    radial-gradient(circle at 39% 39%, #228B22, transparent 10%),
    radial-gradient(circle at 57% 32%, #FFDB58, transparent 10%),
    radial-gradient(circle at 90% 63%, #FFDB58, transparent 10%),
    radial-gradient(circle at 38% 12%, #40E0D0, transparent 10%),
    radial-gradient(circle at 37% 90%, #40E0D0, transparent 10%),
    radial-gradient(circle at 81% 13%, #40E0D0, transparent 10%),
    radial-gradient(circle at 70% 93%, #EA7E5D, transparent 10%),
    radial-gradient(circle at 4% 88%, #9DC183, transparent 10%),
    radial-gradient(circle at 22% 31%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 32% 70%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 66% 42%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 83% 48%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 98% 97%, #FFF0F5, transparent 10%),
    radial-gradient(circle at 20% 17%, #4B0082, transparent 90%),
    radial-gradient(circle at 72% 54%, #1560BD, transparent 90%),
    radial-gradient(circle at 96% 94%, #008080, transparent 90%),
    radial-gradient(circle at 4% 40%, #708090, transparent 90%);
}

#cssOutput {
  white-space: pre-wrap;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
}

footer {
  margin-top: 4em;
  font-size: 0.9em;
  color: #666;
}