body {
	font-family: var(--main-font);
	color: var(--color);
	font-size: 13pt;
	background: var(--background);
	margin: 0;
}

main {
	max-width: 1090px;
	width: 85vw;
	margin: 2em auto 0;
	box-sizing: border-box;
}

footer {
	text-align: center;
	margin: 1em;
}

header {
	width: 100%;
	text-align: center;
	padding: 0.5em;
	box-sizing: border-box;
	background-color: var(--accent-bg);
}


h1 {
	font-family: var(--header-font);
	margin: 0 auto 5px auto;
}

hr {
	border: 1px dashed var(--hr);
	margin: 4em auto 1em;
}

#filter-options {
	width: 100%;
	text-align: center;
	margin: 1.5em auto 1em;
}

article.collection {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 2.5em;
}

/* ----------------------------------------------------------- CARD CARD CARD --------------------------------------------------- */

.card {
	width: 350px;
	min-height: 25px;
	background: var(--background2);
	padding: 15px 20px;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: auto;
}

@media only screen and (width < 1275px) {
	.card {
		width: 100%;
		margin: 5px 0;
		min-height: 0;
		height: auto;
	}
}

.card h2 {
	font-size: 1.25em;
	margin: 0 auto 1em;
	font-family: var(--header-font2);
}

.card h2 a {
	color: var(--color);
}

.card h2 a:hover {
	cursor: alias;
}

ul.relations {
	list-style-type: "♡ ";
	list-style-position: inside;
	font-family: Monospace;
	font-size: 0.9em;
	padding: 0;
	margin: 10px auto;
}

ul.relations li::marker {
	color: var(--link-hover);
}

ul.relations li {
	margin: 0;
}

img.profile-pic {
	height: 100px;
	margin: 5px;
	border: 1px solid var(--hr);
	border-radius: 5px;
	float: right;
}

q.char-quote {
	background-color: var(--accent-bg);
	font-family: Georgia, Sans-Serif;
	font-style: italic;
	padding: 5px 10px;
	text-align: justify;
	color: var(--fg);
}

ul.info {
	list-style-type: none;
}

ul.info li {
	padding: 5px auto;
}

ul.info li:nth-child(odd) {
	background-color: var(--background);
}

.card p.read-more {
	float: right;
	font-style: italic;
}

/* ----------------------------------------------------------- CARD CARD CARD --------------------------------------------------- */

*:focus-visible {
	outline: 2px solid var(--link-hover);
	outline-offset: .15em;
	border-radius: .2em;
}

.check {
	list-style: '✔ ';
}

.check, ol {
	padding-left: 1.5em;
}

li {
	margin: .4em 0;
}

.check li, ol li {
	margin: .75em 0;
}

.button {
	color: var(--link);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	border-radius: 5px;
	padding: .5em;
	display: inline-block;
	border: 1px solid var(--hr);
}

.button:hover {
	color: var(--link-hover);
}

.collection:has(input:checked) .card {
	display: none;
}

.collection:has(#all:checked) .card {
	display: inline-block;
}

.collection:has(#canon:checked) .canon,
.collection:has(#modern:checked) .modern, 
.collection:has(#skyrim:checked) .skyrim,
.collection:has(#childhood:checked) .childhood,
.collection:has(#school:checked) .school,
.collection:has(#else:checked) .else {
	display: inline-block;
}

input {
	appearance: none;
	border: 1px inset var(--hr);
	border-radius: 50%;
	width: 1em;
	height: 1em;
	margin: 0 .3em;
	background: transparent;
}

input:checked {
	background: var(--color);
	border: 1px inset gray;
}

label {
	font-size: 1em;
	border: 1px solid var(--link);
	border-radius: 5px;
	padding: .3em .5em .3em .3em;
	margin: .3em;
	display: inline-block;
	background: var(--accent-bg);
}

label:hover, input:hover {
	cursor: pointer;
}

label:has(input:checked), label:hover {
	color: var(--color);
	border: 1px solid var(--link-hover);
}

.card h2 {
	margin: 5px;
}

.card h2::before {
	font-size: 1em;
	padding-right: .2em;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

.canon h2::before {
	content: "⚙";
}

.modern h2::before {
	content: "⚔";
	color: var(--orange);
}

.skyrim h2::before {
	content: "*";
	color: var(--green);
}

.childhood h2::before {
	content: "@";
	color: var(--fg);
}

.school h2::before {
	content: "!";
	color: var(--fg);
}

.else h2::before {
	content: "$";
	color: var(--fg);
}