* {
	-webkit-text-size-adjust: none !important;
}

textarea-container {
	display: block;
	overflow-y: scroll;
	max-width: -webkit-fill-available;
	max-width: -moz-available;
	max-width: stretch;
	width: 700px;
	border: 10px solid black;
	background: black;
}
textarea-container:focus-within {
	outline-style: auto;
}
textarea-container > div {
	display: block;
	position: relative;
	background: black;
	contain: content;
}
textarea-container > div > * {
	all: initial;
	
	display: block;
	overflow: hidden;	overflow: clip;
	width: 100%;
	
	white-space: pre-wrap;
	word-break: break-word;
	line-break: anywhere;
	
	font-family: Cascadia Mono, Cascadia Code, Fira Code, consolas, monospace, monospace;
	font-size: 1rem;
	line-height: 1.25rem;
	font-kerning: none;
	font-variant-ligatures: none;
	tab-size: 3; -moz-tab-size: 3;
}
textarea-container > div > textarea {
	position: absolute;
	top: 0;
	z-index: 1;
	resize: none;
	height: 100%;
	overflow: hidden;
	
	background: transparent;
	color: transparent;
	caret-color: white;
	contain: strict;
}
textarea-container > div > textarea-overlay {
	pointer-events: none;
	background: black;
	color: white;
	will-change: contents;
	contain: content;
}
/* necessary to avoid hiding last linebreak */
textarea-container > div > textarea-overlay::after {
	content: "\A";
}

.name { color: cyan; }
.comment { color: #0C0; }
.commenttext { color: lime; }
.tag { color: #0AF; }
.doctype { color: silver; }
.charref { color: magenta; }
.key { color: orange; }
.value { color: fuchsia; }
.script { color: silver; }
.rawtext { color: silver; }

.prefix {color: lime;}
.new {text-decoration: underline;}
.suffix {color: blue;}

span.word {
	color: #DEF;
}
span.comment {
	color: #a1f198;
	font-style: italic;
}
span.string { color: #9C9; }
span.operator { color: #BB7; }
span.keyword { color: #2494f0; }
span.constant { color: #f359ab; }
span.property { color: #D9B; }
span.flow { color: #2494f0; }
span.semicolon { color: #CF0; }
span.assignment { color: goldenrod; }