style.css

:root, .light {
	--background-color: #fafafa;
	--text-color: #101010;
	--table-head-bg-color: #009d81;
	--table-row-bg-color: #99d8cc;
	--button-color: #ccc;
	--button-hover-color: #aaa;
}

.dark {
	--background-color: #181818;
	--text-color: #fefefe;
	--table-head-bg-color: #009d81;
	--table-row-bg-color: #304440;
	--button-color: #333;
	--button-hover-color: #444;
}


@media print {
body, html {
	padding: 0;
}
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	font-size: 10pt;
}

.table {
	border: 3px solid var(--text-color);
	grid-gap: 0;
	font-family: sans-serif;
}

.table thead {
	background-color: var(--table-head-bg-color);
	color: var(--text-color);
}

.table th {
	text-align: left;
}

.table tbody td:nth-child(3),
.table thead th:nth-child(3),
.table tbody td:nth-child(4),
.table thead th:nth-child(4) {
	text-align: right;
}

.table td, th {
	padding: 0.2rem 0.7rem;
}

.table thead th:nth-child(1) {
	text-align: left;
}

.table tbody td:nth-child(2) {
	max-width: 20rem;
}

.table thead tr th {
	height: 3rem;
}

.table tbody tr td {
	height: 2.5rem;
}

.table tbody tr:nth-child(2n) {
	background-color: var(--table-row-bg-color);
}

.name + .name::before {
	content: ", ";
}

.info {
	display: inline-block;
	border: 3px solid var(--text-color);
	padding: 0.7rem;
	margin-bottom: 0;
	width: 100%;
	box-sizing: border-box;
}

body {
	print-color-adjust: exact;
	height: 100vh;
	background: var(--background-color);
}

#app {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: var(--text-color);
}

#home {
	display: flex;
	flex-direction: column;
}

#home > a, #theme-button {
	padding: 0.75em 2em;
	margin: 0.75em;
	background-color: var(--button-color);
	text-align: center;
	color: var(--text-color);
	text-decoration: none;
	position: relative;
}

#home > a:hover, #theme-button:hover {
	background-color: var(--button-hover-color);
}

#home > a::before, #theme-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	transition: inset 0.25s ease;
	inset: 0;
}

#home > a:hover::before, #theme-button:hover::before {
	background: linear-gradient(45deg, #00d061, #0000, #0000, #0061d0);
	inset: -3px;
}

#theme-button {
	font-size: inherit;
	margin-bottom: 3em;
	padding: 0.5em 1em;
	margin-left: auto;
	margin-right: auto;
	border: none;
}