:root {
	--table-header: hsl(0, 0%, 75%);
	--table-uncolored: hsl(0, 0%, 95%);
	--table-accent: hsl(0, 0%, 85%);
}

table {
	font-family: "Lora", serif;
	margin-block: 2.75rem;
	margin-inline: auto;
	border-collapse: collapse;
}

th {
	font-size: 1.35rem;
	background-color: var(--table-accent);
}

td {
	font-size: 1.4rem;
}

.null {
	opacity: 0.5;
}

@media (min-width: 536px) {
	tr:nth-child(even) {
		background-color: var(--table-uncolored);
	}

	th, td {
		padding: 1.5rem;
		border: 1px solid var(--table-header);
	}
}

@media (max-width: 535px) {
	table {
		width: 100%;
		border: 1px solid var(--table-accent);
	}

	th {
		display: none;
	}

	td {
		display: grid;
		grid-template-columns: max-content auto;
		justify-content: space-between;
		padding: 1.25rem 1.5rem;
	}

	td:nth-child(odd) {
		background-color: var(--table-uncolored);
	}

	td:first-of-type {
		background-color: var(--table-accent);
	}

	td::before {
		font-size: 1.35rem;
		font-weight: 700;
		content: attr(data-cell) ":";
		padding-right: 0.5rem;
	}
}