header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 1em auto 2em auto;
	max-width: 800px;
	padding: 0 2em;
}

.header-left:focus {
	outline: none;
}

.header-logo {
	margin: 0 1em;
}

.header-logo > * {
	min-height: 2em;
	min-width: 2em;
}

.header-logo:focus, .header-logo > *:focus {
	outline: none;
}

.header-title {
	font-size: 1.5em;
	margin: 0;
	white-space: nowrap;
}

.header-title:hover {
	text-decoration: none;
}

@media (max-width: 550px) {
	header {
		align-items: center;
		border-bottom: 1px solid var(--off-black);
		flex-direction: column;
		gap: 15px;
		margin: 1em;
		padding: 0 0.5em 1em 0.5em;
	}

	.header-logo {
		min-width: 50px;
	}
}