Cutout text with any color — sadly with text repetition

dabblet.css

/**
 * Cutout text with any color — sadly with text repetition
 */

body { margin: 0 }
main {
	background: url('https://leaverou.github.io/talks/even-more-css-secrets/img/whisper.jpg') center / cover no-repeat gray;
	min-height: 100vh;
}

div {
	mix-blend-mode: screen;
	font: bold 800%/1 Helvetica Neue, sans-serif;
	background: white;
	color: black;
	position: absolute;
	padding: .3em;
}

div + div {
	background: #f06;
	color: white;
	mix-blend-mode: multiply;
}

dabblet.html

<main>
<div>Cutout text</div>
<div>Cutout text</div>
</main>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}