demo.css

/* 
  enjoy remixing these samples
  aurora remixyz inline styles
  samples webmural.com s9a.page
  yo energy flows deep ))))))))
*/

.imagine {
  --tape-remix: radial-gradient(
    circle at center,
    var(--tape-luvu),
    var(--tape-bluv),
    var(--tape-loud),
    var(--tape-play)
  );
}

.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);
}

.shell {
  --tape-watt: seashell;
}

#hi:target {
  --tape-bluv: mediumslateblue;
  --tape-play: violet;
  --tape-loud: gold;
  --tape-luvu: turquoise;
}

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

s, a { 
  text-decoration-style: dotted;
}

:focus {  
  text-decoration-style: solid;
  outline: 2rem outset;
}

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

/* N.E.R.D. ÷ MCR */
.mold { font: unset }
.bold { font-weight: bold }
.moan { margin: auto }
.moby { margin-bottom: 6vh }
.nemo { margin-bottom: 9vh }
.paz { padding: 0 }
.pad { padding: 1rem; box-sizing: border-box }
.party { display: block }
.parlay { display: table }
.fiesta { display: flex; flex-wrap: wrap }
.trio { flex-basis: calc(100% / 3) }
.duet { flex-basis: 50% }
.dot::after { content: "." }
.mime { margin-inline: var(--vol1) }
.rime { text-align: end }

@media (orientation: portrait) {
  .roam { writing-mode: vertical-rl } 
}

html { border-bottom: 9vh double var(--tape-play) }
html { font-family: sans-serif }
body { padding: 0 6vw; margin: auto }
input { font: unset; display: table; max-width: 100% }
button { font: unset }
figure { margin: auto; contain: layout }
li { list-style: none }
aside { contain: layout }

/*
RE: volume
s9a.page/volume
*/

html {
  --pump: 0.809;
  --vol1: max(1rem, 3vmax);
  --vol2: calc(2 * var(--pump) * var(--vol1));
  --vol3: calc(var(--vol1) + var(--vol2));
}

.vol0 { font-size: 0 }
.vol1 { font-size: var(--vol1) }
.vol2 { font-size: var(--vol2) }
.vol3 { font-size: var(--vol3) }