:root {
	--background: white;
	--foreground: black;
	--foreground-muted: #555;
	--background-muted: #eee;
	--accent: #916e53;
	--base-z-index: 1000;
}

.e {
	color: red;
}

@media not screen {
	header {
		display: none;
	}

	.s {
		display: none;
	}
}

@supports not ((display: flex) and (stroke: #000)) {
	header {
		display: none;
	}

	.s {
		display: none;
	}
}

@supports (display: flex) and (stroke: #000) { /* stroke: #000 detects svg support */
	@media screen {
		header {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: 0.5rem 2rem;
			width: calc(100% - 4rem);
			font-size: xx-large;
			font-weight: bold;
			gap: 2rem;
			cursor: default;
			color: var(--accent);
		}

		header svg {
			width: 3rem;
			height: 3rem;
		}

		* {
			margin: 0;
			padding: 0;
			color: inherit;
			font-family: inherit;
			font-size: inherit;
			z-index: var(--base-z-index);
		}

		body {
			background: var(--background);
			color: var(--foreground);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 0;
			height: 100vh;
			width: 100vw;
			overflow-y: scroll;
			font-family: sans-serif;
		}

		main {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
		}

		form {
			display: flex;
			flex-direction: row;
			font-size: xx-large;
			border: 0.1rem solid var(--foreground);
			background: var(--background-muted);
			max-width: 600px;
			width: 90%;
		}

		form div:has(input[type="text"]) {
			display: grid;
			position: relative;
			flex-grow: 1;
		}

		form div:has(input[type="text"]) > * {
			grid-column: 1;
			grid-row: 1;
			grid-column-end: 2;
			grid-row-end: 2;
			padding: 1rem;
			width: calc(100% - 2rem);
		}

		form div:has(input[type="text"]) label {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			z-index: calc(var(--base-z-index) - 10);
			color: var(--foreground-muted);
			text-wrap: nowrap;
			overflow: hidden;
		}

		form div:has(input[type="text"]):not(:has(input[type="text"]:placeholder-shown)) label {
			display: none;
		}

		form div:has(input[type="text"]) input[type="text"] {
			background: transparent;
			border: none;
		}

		form button[type="submit"] {
			background: none;
			border: none;
			cursor: pointer;
		}

		form button[type="submit"] svg {
			aspect-ratio: 1;
			height: 100%;
			width: auto;
		}

		.e {
			width: calc(100vw - 6.4rem);
			color: black;
			margin: 1rem;
			padding: 2rem;
			background-color: #fbb;
			border: 0.2rem solid red;
		}

		.s {
			display: unset;
		}

		.t {
			display: none;
		}
	}

	@media screen and (max-width: 600px) {
		header svg {
			display: none;
		}
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--foreground: white;
		--foreground-muted: #999;
		--background-muted: #111;
	}
}