body {
	background: linear-gradient(0deg, blue, green 40%, red), radial-gradient(ellipse farthest-corner at 45px 45px, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%), repeating-linear-gradient(45deg, blue, red), repeating-radial-gradient(black, black 5px, white 5px, white 10px);
	--test1: hsla(0, 0%, 10%, 1);
	--test2: 50px;
}

* , body, div {
	background-color: var(--test1);
	z-index: var(--test2);
	border-collapse: var(--DNE);
}

div::before {
	content: "test";
}

:before, :after {
	color: red;
}

div {
	overflow: hidden;
	overflow: hidden;
}

.test {
	display: inline-block;
	width: 100px;
	height: 100px;
	grid-template-areas: "header header header header"
	                     "main main .sidebar"
	                     "footer footer footer footer";
}

.tEsT {}

.test::after {
	content: "test2";
	transition: all 1s cubic-bezier(0, 0, 1, 1);
}

p {
	border-color: #ffaaea;
	animation-duration: 2s, 1s;
	animation-delay: 0, 2s;
	animation-name: fadein, fadeout;
	animation-timing-function: spring(1 100 10 0);
	animation-iteration-count: 1, 3;
}

button {
	transition-property: background-color, opacity;
	transition-duration: 1s;
	transition-timing-function: ease;
}

button:hover {
	opacity: 0.5;
}

#\#id\.class,
.\.a,
.\#b {
	color: blue;
}

@keyframes fadein {
	from {
		color: black;
	}

	to {
		color: white;
	}
}

@keyframes fadeout {
	from {
		color: white;
	}

	to {
		color: black;
	}
}

.dom-update-highlight-container {
	display: flex;
	background-color: white;
	font-size: 1em;
}

.dom-update-highlight {
	width: 50px;
	height: 30px;
	margin: 2px 5px;
	line-height: 30px;
	text-align: center;
	background-color: white;
	border-radius: 3px;
}

.dom-update-highlight.selected {
	background-color: steelblue;
	color: white;
}

table {
	/* TEST : TEST ; */
	/* HELLO WORLD */
}

@media (prefers-dark-interface) {
	body {
		filter: invert();
	}
}

/* TEST THIS IS NOT CACHED */