dance.css

.dew-dance {
  --dew-shift: color 303ms;
  --dew-solar: #cd5;
  --dew-lunar: #528;
  --dew-slick: skyblue;
  --dew-slime: indigo;
  --dew-locus: currentColor;
  --dew-hover: hue-rotate(-120deg);
}

.dew-hot {
  --dew-solar: #010101;
  --dew-lunar: deeppink;
}

.dew-warm {
  --dew-solar: #202020;
  --dew-lunar: orchid;
}

.dew-noise {
  --dew-solar: #030303;
  --dew-lunar: #999;
}

.dew-bae {
  --dew-solar: #bae;
  --dew-lunar: #415;
}

html {
  font-family: sans-serif;
  font-size: max(3ch, 3vmax + 2vmin);
  line-height: 1.618;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-wrap: anywhere;
}

dl {
  font-size: 2rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  line-height: 1;
}

dt {
  margin: 0;
  flex-basis: 100%;
}

dd {
  margin: 0;
  flex-basis: 100%;
}

figure {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 1em;
}

header {
  box-sizing: border-box;
  padding-inline: 1em;
}

h1 {
  display: inline;
}

sub {
  font-size: 1ch;
  vertical-align: text-bottom;
}

:link {
  text-decoration: line-through dotted;
}

:focus {
  outline: thick dotted;
}

.discoball {
  position: absolute;
  top: -100%;
}

.thump:target {
  position: relative;
  top: 0;
}