<header lang="de">
	<h1>An der schönen blauen Donau</h1>
</header>
<main lang="de">
	<p>Die Donaudampfschifffahrtsgesellschaftskapitänskajütentürschwelle ist so ein Ding, über das man leicht stolpern kann.</p>
	<p>Die DONAUDAMPFSCHIFFFAHRTSGESELLSCHAFTSKAPITÄNSKAJÜTENTÜRSCHWELLE ist so ein Ding, über das man leicht stolpern kann.</p>
	<p>π = 3,1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679…</p>
</main>

*, ::before, ::after { box-sizing: border-box }

html { background: silver }

body {
	margin: 0;
	padding: 1em;
	min-height: 100vh;
	background: white;
	color: black;
	font: 1.5em/1.4 Abril Text, serif;
	font-variant-numeric: lining-nums;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

h1 {
	font: bold 1.7em/1.1 Abril Text;
	-webkit-hyphens: none;
	hyphens: none;
}

main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	gap: 0 2em;
}

p {
	margin: 0 0 1.4em 0;
}