:root {
	--background: #fff;
	--foreground: #222;
	--light: #eee;
	--dark: #777;
	--accent: #c29;
	--mark: #fe3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #111;
		--foreground: #bbb;
		--light: #222;
		--mark: #430;
	}
}

html {
	font-family: monospace;
	line-height: 1.25em;
	color: var(--foreground);
	background-color: var(--background);
}

a, a:visited {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
mark {
	background-color: var(--mark);
	color: inherit;
}

span.irc {
	white-space: pre-wrap;
}
pre span.irc {
	white-space: pre;
}

body {
	max-width: 130ch;
	padding: 0 1ch;
	margin: auto;
}

h1, h2, nav, div, table, footer {
	margin: 1rem 0;
}

nav, nav + div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
nav ol {
	margin: 0;
	padding: 0;
	margin-right: 1ch;
}
nav ol li {
	display: inline;
}
nav ol li::before {
	content: '/';
	padding: 0 1ch;
}
nav ol li:first-child::before {
	padding-left: 0;
}

input {
	margin-right: 0.5ch;
}
input[type="checkbox"], label {
	margin-right: 1ch;
}

table {
	border-spacing: 0;
	/* Allow some room to start selecting from */
	margin-left: -2ch;
	padding-left: 2ch;
}
tr {
	vertical-align: top;
}
td:not(:last-child) {
	padding-right: 1ch;
}
th {
	font-weight: inherit;
}

thead {
	background-color: var(--light);
}
tr.topic th {
	text-align: left;
	padding: 0.5em 0.5ch;
}
tr.page th {
	padding: 0.5em 0;
}
tr.gap {
	color: var(--dark);
	background-color: var(--light);
}

td.time, td.network, td.context, td.nick {
	white-space: nowrap;
}
td.time, td.network, td.context {
	font-size: x-small;
	color: var(--dark);
}
td.time a, td.network a, td.context a {
	color: inherit;
}
tr:target td.time a {
	color: var(--accent);
	text-decoration: underline;
}

td.nick {
	text-align: right;
}

td.message {
	width: 100%;
	overflow-wrap: anywhere;
}
tr.join td.message,
tr.part td.message,
tr.quit td.message,
tr.kick td.message,
tr.nick td.message,
tr.ban td.message,
tr.unban td.message {
	color: var(--dark);
}

footer {
	color: var(--dark);
	font-size: small;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
footer a, footer a:visited {
	color: inherit;
}
footer span[title] {
	cursor: help;
}
footer span[title]:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
}