:root {
	--fg: #000;
	--bg: #fff;
	--border: 0.2em solid var(--fg);
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #fff;
		--bg: #000;
	}
}

body {
	color: var(--fg);
	background-color: var(--bg);
	fill: var(--fg);

	margin: 0 auto;
	max-width: 52em;
	padding: 1em;
	font: 1.2em/1.6 monospace;

	/* chromium changes the width of the viewport depending on whether
     or not the page is long enough to require a scrollbar. */
	overflow-y: scroll;
}

h1 {
	margin: 0;
}

p {
	font: 0.8em/1.3 sans-serif;
	margin: 1em 0;

	code {
		font-size: 1.3em;
	}
}

a {
	color: inherit;
	/* Works around what seems to be a chromium bug, This should be
     inherited from the body but isn't */
	fill: inherit;
}

a:hover {
	color: var(--bg);
	fill: var(--bg);
	background-color: var(--fg);
	text-decoration: none;
}

/* This can be used to hint where a line break makes most sense if
   wrapping is necessary. */
span.line {
	display: inline-block;
}

span.nowrap {
	white-space: nowrap;
}

header nav {
	display: flex;
	align-items: stretch;
}

.nav-home {
	display: flex;
	align-items: flex-end;
	border-right: var(--border);

	a {
		border: 0.3em solid var(--bg);
		margin: 0.7em;

		svg {
			display: block;
			width: 3em;
		}
	}

	a:hover {
		border-color: var(--fg);
	}
}

.nav-items {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 1em;
	margin: 1em;

	a {
		display: flex;
		align-items: center;
		border: var(--border);
		box-sizing: border-box;
		height: 3em;
		padding: 0 0.5em;
		font-weight: bold;
		text-decoration: none;
	}
}

.title {
	padding: 1em;
	border-top: var(--border);
	border-bottom: var(--border);

	div {
		margin-left: 1em;
	}
}

.title.row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

h1.logo {
	display: flex;
	justify-content: center;

	svg {
		max-width: 16em;
	}
}

.list-row {
	display: flex;
	align-items: baseline;
	gap: 1em;
	margin: 0.75em 0;

	a {
		font-weight: bold;
		font-size: 1.13em;
	}
}

.content {
	padding: 0 1em;
}

.poem span {
	display: block;
	text-indent: -2em;
	padding-left: 2em;
}

footer {
	border-top: var(--border);
	padding: 1em;
	text-align: center;
	font: 0.6em sans-serif;
}

#home {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 75vh;

	svg {
		width: 8em;
		margin: 1em;
	}

	.nav-items {
		justify-content: center;
	}
}

.consulting ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
	margin: -0.5em 0;

	p {
		margin: 0.5em 0;
	}
}

.software .content ul {
	padding-left: 2em;

	li {
		margin: 0.5em 0;
	}

	h3 {
		display: inline;
		padding-left: 0.25em;
		font-size: 1.13em;
	}

	p {
		display: inline;
		padding-left: 0.25em;
	}
}