html,
body
{
	font-family: /*'Segoe UI', 'Roboto', 'San Francisco', 'IBM Plex Sans',*/ sans-serif;
}

body
{
	display: grid;
	place-items: center center
}


h4 code
{
	font-size: 1.5em;
}

code
{
	background: #f2f4f4;
	border-radius: 5px;
	padding: 3px 5px 3px 5px;
}

.container
{
	width: 60em;
}

.nav
{
	font-size: 1.5rem;
	display: flex;
	flex-direction: row;

	.wide
	{
		flex: 1;
		font-weight: bold;
	}
}

.split
{
	display: grid;
	grid-template-columns: 16em auto;
}

video
{
	width: 100%;
}

@media screen and (max-width: 58em)
{
	.split
	{
		display: flex;
		flex-direction: column;
	}

	.container
	{
		width: calc(100% - 2em);
		margin: 1em;
	}
}