:root {
	--bgcol: black;
	--txcol: white;
}
body {
	background-color: var(--bgcol);
	transition: background-color 200ms ease-in-out;
}
h1, p {
	color:var(--txcol);
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	text-rendering: optimizeLegibility;
	transition: color 200ms ease-in-out;
}
p {
	font-size: 1.25em;
	text-align: left;
	max-width: 1300px;
}
h1 {
	font-size: 2.5em;
	text-align: center;
	font-weight: normal;
}
main {
	width: calc(100% - 40px);
	padding: 20px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	h1, p {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
	}
}
@media only screen and (min-width: 900px) {
	html, body, main {
		height: 100%;
		margin: 0;
	}
	main {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	p {
		text-align: center;
	}
}
@supports (padding: max(0px)) and (padding-left: env(safe-area-inset-left)) {
	main {
		--pl: max(20px, calc(env(safe-area-inset-left) + 10px));
		--pr: max(20px, calc(env(safe-area-inset-right) + 10px));
		padding-left: var(--pl);
		padding-right: var(--pr);
		width: calc(100% - var(--pl) - var(--pr));
	}
}