body
{
	text-align:center;
	background-color:#f8f8f8;
	font-family:sans-serif
}

h1
{
	font-size:xx-large;
}

p
{
	font-size:large;
}

.error
{
	margin: 0.75em;
	background-color: #f8d7da;
	color: #842029;
	border: solid 1px #f5c2c7;
}

input {
	margin: 0.3rem;
	padding: 0.2rem;
	line-height: 1.5rem;
	font-size: 110%;
}
h1, h2 {
	text-align: left;
}

main {
	max-width: 600px;
	padding: 0 1.5em 1.5em 1.5em;
}

dt
{
	font-weight: bold;
	margin: 0.5em 0 0 0;
}

dd
{
	margin: 0;
}

button, input[type=submit]
{
	padding: 0.5rem;
	margin: 0.75rem;
}

@media(prefers-color-scheme:dark)
{
	body
	{
		background-color:#161616;
		color:#eee;
	}

	.error {
		color: #f8d7da;
		background-color: #842029;
	}

}

@media(min-width: 768px)
{
	body
	{
		margin-top: 3em;
	}

	main
	{
		margin-left: auto;
		margin-right: auto;
		border: solid 1px #1e1e1e;
		background-color: #efefef;
	}

	@media(prefers-color-scheme:dark)
	{
		body
		{
			background-color: #4e4e4e;
		}

		main
		{
			color: #fff;
			background-color: #1f1f1f;
		}
	}
}