tape.css

/* 
https://s9a.page/tape remix
*/

:root {
  --tape-white: #f5f5f5;
  --tape-black: #090909;
  --tape-pink: #fbbfff;
  --tape-yellow: #eee833;
  --tape-blue: #11dff1;
  --tape-green: #44f477;
}

@media not (prefers-contrast: more) {
  :root {
    --tape-white: #e0e0e0;
    --tape-black: #0e0e0e;
  }
}

.tape-white { --tape-hex: var(--tape-white) }
.tape-blue { --tape-hex: var(--tape-blue) }
.tape-pink { --tape-hex: var(--tape-pink) }
.tape-green { --tape-hex: var(--tape-green) }
.tape-yellow { --tape-hex: var(--tape-yellow) }
.tape-clean:not(.tape-clash),
.tape-clean :not(.tape-clash) {
  background: transparent;
  color: inherit;
}

.tape-flat { border-color: transparent }
.tape-flap { border-color: currentColor }
.tape-blue,
.tape-pink,
.tape-green,
.tape-yellow,
.tape-white {
  background: var(--tape-hex) !important;
  color: var(--tape-black) !important;
}

.tape-black {
  background: var(--tape-black) !important;
  color: var(--tape-hex, var(--tape-white)) !important;
}

.tape-erase,
.tape-erase * {
  color: transparent !important;
}

/* ¡! */

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

.tape-black ::selection {
  color: blueviolet;
  background: cyan;  
}

.tape-black:focus {
  outline-color: var(--tape-black);
}

.naranja { --tape-hex: orange }
.nurple { --tape-hex: plum }
.blurple { --tape-black: #518 }
.bae { --tape-hex: #bae }

.roygbiv {
  background-image: linear-gradient(
    .25turn,
    coral,
    orange,
    var(--tape-yellow),
    var(--tape-green),
    var(--tape-blue),
    #b8e,
    violet
  ) !important;
}