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;
	}
}

header {
	grid-area: head;
}

nav {
	grid-area: nav;
}

main {
	grid-area: main;
}

footer {
	grid-area: foot;
}

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

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

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

dl.compact dt::after {
	content: ": ";
}