more precise styling for del buttons and invalid fields

index.html

@@ -9,9 +9,10 @@
 		<style>
 :root, html[data-theme='light'] {
 	--width: 80rem;
+	--danger: #cc0a00;
 }
 :invalid:not(form) {
-	border-color: red;
+	border-color: var(--danger);
 }
 fieldset > div {
 	display: flex;
@@ -31,6 +32,10 @@ fieldset select, input:not([type=checkbox]):not([type=radio]) {
 	width: initial;
 	min-width: 50%;
 	margin: 0.5rem 0;
+}
+button.del {
+	border-color: var(--danger);
+	color: var(--danger);
 }
 		</style>
 	</head>

l3config.js

@@ -87,6 +87,7 @@ class L3MultiSection {
 		let del = document.createElement('button');
 		del.setAttribute('type', 'button');
 		del.addEventListener('click', () => this.removeSection(newsection, nodes));
+		del.classList.add('del');
 		del.innerHTML = 'Remove';
 		nodes.append(del);
 
@@ -214,6 +215,7 @@ class L3MultiInput {
 		let div = newinput.node();
 		let delbutton = document.createElement('button');
 		delbutton.setAttribute('type', 'button');
+		delbutton.classList.add('del');
 		delbutton.innerHTML = '-';
 		delbutton.addEventListener('click', () => {
 			this.removeInput(newinput, div);