*:not(dialog) {
	margin: 0;
}

audio, iframe, video {
	margin: 0.333em 0; /* matches line-height */
	max-width: 100%;
}

body {
	background-image: url("../pictures/leaves-in-my-yard.jpg");
	background-position-x: center;
	background-size: max(100%, 1600pt);
	line-height: 1.333;
	margin: 48pt;
}

img {
	border-radius: 12pt;
	max-width: 100%;
}

p {
	margin: 12pt 0;
	text-wrap: pretty;
}

ul {
	margin-bottom: 1em; /* WHY wasn't this the default */
}

.global-container {
	backdrop-filter:
		blur(3pt)
		saturate(0%)
		contrast(30%)
		brightness(125%);
	border-radius: 24pt;
	display: grid;
	gap: 18pt;
	grid-template-areas:
		'title title'
		'. .';
	margin: auto;
	max-width: 550pt;
	min-width: 375pt;
	padding: 24pt;
}

.content {
}

.nav {
	display: flex;
	flex-direction: column;
	gap: 12pt;
}

.nav a {
	color: inherit;
	text-decoration: none;
}

.title {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	grid-area: title;
}

.title > * {
	display: block;
}