demo.css

/* enjoy demo samples */

.imagine {
  --tape-remix: radial-gradient(
    circle at center,
    var(--tape-green),
    var(--tape-blue),
    var(--tape-yellow),
    var(--tape-pink)
  );
}

.hella {
  --tape-remix: radial-gradient(orchid, #bae);
}

.honey {
  --tape-remix: radial-gradient(orange, violet);
}

.twist {
  --tape-filter: hue-rotate(120deg);
}

.shout {
  --tape-filter: hue-rotate(240deg);
}

::selection {
  color: black;
  background: blueviolet;
}

:focus {
  text-decoration-style: dotted;
  outline: thick groove;
}

:hover {
  text-decoration-style: double;
}

/* throwbacks */

body { margin: auto; padding: 0 4rem }
input { font: inherit; max-width: 100% }
button { font: inherit }
figure { contain: content }
.mold { font: inherit }
.bold { font-weight: bold }
.m-auto { margin: auto }
.m-duck { margin-bottom: 2rem }
.m-down { margin-bottom: 4rem }
.pad-0 { padding: 0 }
.pad-1 { padding: 1rem }
.pad-2 { padding: 2rem }
.pad-3 { padding: 3rem }
.pad-4 { padding: 4rem }
.pad-5 { padding: 5rem }
.party { display: block; contain: content }
.fiesta { display: flex; flex-wrap: wrap }
.trio { list-style: none; flex-basis: 33.33333333% }
.duet { list-style: none; flex-basis: 50% }
.dot-after::after { content: "." }

.text-end {
  text-align: right;
  text-align: end;
}

.marvin {
  margin-inline-start: var(--volume-1);
  margin-inline-end: var(--volume-1);
}

html {
  font-family: monospace;
  --pump-level: 1;
  --volume-1: calc(.5rem + .5vw + .1vh);
  --volume-2: calc(2 * var(--pump-level) * var(--volume-1));
  --volume-3: calc(3 * var(--pump-level) * var(--volume-1));
  --volume-4: calc(4 * var(--pump-level) * var(--volume-1));
  --volume-5: calc(5 * var(--pump-level) * var(--volume-1));
  --volume-6: calc(6 * var(--pump-level) * var(--volume-1));
  --volume-7: calc(7 * var(--pump-level) * var(--volume-1));
  --volume-8: calc(8 * var(--pump-level) * var(--volume-1));
  --volume-9: calc(9 * var(--pump-level) * var(--volume-1));
  --volume-10: calc(10 * var(--pump-level) * var(--volume-1));
}

.volume-0 { font-size: 0 }
.volume-1 { font-size: var(--volume-1) }
.volume-2 { font-size: var(--volume-2) }
.volume-3 { font-size: var(--volume-3) }
.volume-4 { font-size: var(--volume-4) }
.volume-5 { font-size: var(--volume-5) }
.volume-6 { font-size: var(--volume-6) }
.volume-7 { font-size: var(--volume-7) }
.volume-8 { font-size: var(--volume-8) }
.volume-9 { font-size: var(--volume-9) }
.volume-10 { font-size: var(--volume-10) }