body {
	display: grid;
	width: 100%;
	grid-template:
		"head head" auto
		"nav main" auto
		"nav foot" auto
		/ 15rem auto;
	background: #FF66CC;
	margin: 0 auto;
}

@media (max-width: 800px) {
	body {
		grid-template:
			"head" auto
			"nav" auto
			"main" auto
			"foot" auto
		/ auto;
	}
}

body > header {
	grid-area: head;
}

body > nav {
	grid-area: nav;
}

body > main {
	grid-area: main;
}

body > footer {
	grid-area: foot;
}

body > header, body > nav, body > main, body > footer {
	background: #FFCCFF;
	border: 2px solid black;
	margin: 10px;
	padding: 10px;
}

.wrap {
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.grid2 {
	display: grid;
	grid-template: auto / auto auto;
	width: fit-content;
	column-gap: 1rem;
}

@media (max-width: 800px) {
	.grid2 {
		grid-template: auto / auto;
	}
}

.inline-menu {
	list-style: none;
}

.inline-menu > li {
	display: inline;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.monospace {
	font-family: monospace;
}

.link {
	text-decoration: underline;
	color: blue;
}

.error {
	padding: 2px;
	background: darkred;
	color: white;
}