*{
	color: #333;
	background-color: #FFF;
}
a{
	color: #337ab7;
}
button{
	background-color: #EFEFEF;
}
@media (prefers-color-scheme: dark) {
	*{
		background-color: #181a1b;
		color: #c8c3bc;
	}
	a{
		color: #69a6d5;
	}
	button{
		background-color: #222;
	}
}

body{
	font-family: Open Sans,sans-serif;
	max-width: 70ch;
	margin: auto;
	padding: 3em 1em;
	font-size: 1.10em;
	line-height: 1.75;
}

.inputArea,
.outputArea{
	display: flex;
	flex-direction: column;
	margin: 10px;
}
:is(.inputArea, .outputArea) > textarea{
	min-height: 10em;
}
button{
	cursor: pointer;
	padding: 1.5ch;
}
h2{
	display: flex;
	justify-content: space-between;
}
.adjustButtons {
	display: flex;
	justify-content: space-around;
}
.adjustButtons > button {
	width: 100%;
}
.adjustButtons > button:nth-of-type(2) {
	flex-shrink: 2;
}
a[href^=http]:after{
	content: "↗";
	display: inline-block;
}
label {
	display: flex;
	justify-content: space-between;
}
label > span {
	width: 8em;
}
label > input {
	width: 100%;
}