body {
	display: flex;
	flex-direction: column;
	font-family: sans-serif;
	font-size: large;
	height: 100vh;
	margin: 0;
}

nav,
footer {
	background-color: black;
	color: white;
	padding: .5ex 1ex;
}

main,
header {
	margin: 0 auto;
	width: min(120ex, 100%);
	padding: 1ex;
	box-sizing: border-box;
}

footer {
	font-style: italic;
	justify-self: center;
	margin-top: auto;
}

a {
	text-decoration: none;
	color: inherit;

	a&:hover {
		background-color: dodgerblue;
	}
}

/* HEADER */

header {
	.headerRow {
		display: flex;
		gap: 1ex;
		margin: 1ex 0;
	}

	.headerBlock {
		background: #ed5fb1a0;
		font-size: 150%;
		font-weight: bold;
		padding: .5ex 1ex;
		text-decoration: none;
		color: inherit;

		&.main {
			font-size: 250%;
		}
	}
}

div.summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 1ex;

	.r {
		text-align: right;
	}
}

#search {
	width: 100%;
	font: inherit;
	margin: 3ex 0 1ex;
}

ul.sub {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	gap: 1ex;

	li {
		padding: 0 1ex;
		background: #ed5fb1a0;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: smaller;

	td.r {
		text-align: right;
	}

	td.wnowrap {
		white-space: nowrap;
	}

	td,
	th {
		border: grey 1px solid;
		padding: .2ex .5ex;
	}

	tr:hover {
		background: lightgray;
	}
}

div.bar {
	display: flex;
	background: lightgrey;
	margin-bottom: 1ex;

	div.option {
		height: 2ex;
	}
}

body:has(#checkExpressed:checked) .bar {

	[data-opinion=B],
	[data-opinion=N],
	[data-opinion=A] {
		display: none;
	}
}

[data-opinion=XL] {
	background: brown;
}

[data-opinion=L] {
	background: tomato;
}

[data-opinion=C] {
	background: aqua;
}

[data-opinion=R] {
	background: blue
}

[data-opinion=XR] {
	background: darkblue;
}

[data-opinion=O] {
	background: black;
}

[data-opinion=B] {
	background: white;
}

[data-opinion=N] {
	background: orange;
}

[data-opinion=A] {
	background: lightgrey;
}

.copinion {
	border-radius: 100%;
	width: .8em;
	height: .8em;
	display: inline-block;
	margin-right: 1ex;
	vertical-align: baseline;
}