@import "/lib/css/colors/colors-gray.css";

:root {
	--pad: clamp(0.5rem, 3vw, 1.5rem);
}

body {
	font-family: var(--family-alegreya);
	color-scheme: dark;
	color: var(--text);
	background-color: Canvas;
}

main {
	max-width: 640px;
	padding-inline: 0;
}
@media (min-width: 640px) {
	main {
		padding-inline: var(--pad);
	}
}

table {
	width: 100%;
	margin-block: 2em;
}
th {
	padding-block: 0.5rem;
	text-align: left;
}
@media (min-width: 640px) {
	#companions,
	#skills {
		font-size: 18px;
	}
	#skills th,
	#skills td {
		text-align: left;
	}
	th,
	td {
		text-align: right;
		border-inline: 0;
		border-color: var(--edge);

		&:first-child {
			text-align: left;
		}
	}
}
thead tr,
tr:nth-child(even) {
	background-color: var(--soft);
}
th,
td {
	padding-inline-start: 0.5rem;
}
@media (min-width: 640px) {
	th,
	td {
		padding-inline: var(--pad);
	}
}

details {
	margin-block: var(--pad);
}
summary,
textarea {
	margin-block: 0;
	padding-inline: 1rem;
	border: 1px solid var(--edge);
}
summary {
	padding-block: 0.5rem;
	font-weight: 700;
	background-color: var(--soft);
}
textarea {
	padding-block: var(--pad);
	font-size: 8pt;
	border-block-start: 0;
	background-color: Canvas;
}
@media (min-width: 910px) {
	textarea {
		font-size: inherit;
	}
}