body {
	font-family: sans-serif;
}

#app > div {
	display: flex;
	gap: 10px;
}

#app > div div {
	width: 50%;
}

h1, h1 + p, h1 + h2, button {
	text-align: center;
}

button {
	margin: auto;
}

textarea {
	width: -moz-available;
	width: -webkit-fill-available;
	width: stretch;
	resize: vertical;
	height: 300px;
}

span#important {
	color: red;
}

div#bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	display: block;
	z-index: -1;
	background-color: yellow;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, yellow), color-stop(100%, transparent));
	background: -webkit-linear-gradient(270deg, yellow, transparent);
	background: -moz-linear-gradient(270deg, yellow, transparent);
	background: linear-gradient(to bottom, yellow, transparent);
}

div#app {
	display: none;
}

@media (max-width: 600px) {
	#app > div {
		flex-direction: column;
	}
	#app > div div {
		width: 100%;
	}
	textarea {
		height: 150px;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		color-scheme: dark;
		background: #222;
		color: white;
	}
	span#important {
		color: salmon;
	}
	div#bg {
		background-color: gold;
		background: linear-gradient(to bottom, gold, transparent);
	}
}