:root {
	color-scheme: light dark;
	--page-bg: light-dark(white, #1e1e1e);
	--text: light-dark(black, white);
	--accent: light-dark(#000050, #7ca8ff);
	--hover: light-dark(#2d2d2d, #c8c8c8);
	--backing: light-dark(rgb(0,0,0,.075), rgb(0,0,0,.5));
	--tag: light-dark(rgb(0,0,0,.05), rgb(0,0,0,.25));
	--green: light-dark(darkgreen, #8dff8d);
	--red: light-dark(darkred, #ffaea0);
	--brightness: light-dark(brightness(.1), brightness(1));
}

html, body {margin: 0;}

body {font-family: 'Book Antiqua', 'Palatino Linotype', Garamond, Cambria, serif;
	font-size: 1.1em; 
	background: var(--page-bg); 
	color: var(--text); } 

/* Text Areas */

header {
	width: 100%; 
	background: var(--backing); 
	text-align: center; 
	padding: 1em; 
	box-sizing: border-box}

main {
	margin: 2em auto; 
	max-width: 1070px; 
	width: 90vw; 
	box-sizing: border-box;}
	
.preface {
	padding-left: 10px; 
	padding-right: 10px}
	
footer {
	text-align: center; 
	padding: 1em;}

.collection {
	display: flex; 
	flex-direction: row-reverse; 
	flex-wrap: wrap; 
	gap: 3%;}
.filters {width: 22%;}
.works {width: 75%; 
	margin-top: .75em;}

@media only screen and (width < 900px) {
	.filters, .works {width: 100%;}
} /* this part is essential for making the layout mobile-friendly */

/* Works & Tags */

.work {
	width: 100%; 
	background: none;
	border: 1px solid var(--backing);
	border-radius: 10px; 
	padding: 10px 20px; 
	margin: 10px 0 15px 0;
	box-sizing: border-box;
}
.works p:first-of-type {
	margin-top: .3em;
}
.works p:nth-of-type(2) {
	margin-bottom: 1.3em;
}
.work p.word-count {
	font-size: .8em;
	margin-bottom: .4em;
}

tag, fandom, pairing, warning {
	font-size: .9em;
	background: var(--tag); 
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 5px; 
}
warning::before {content: '❕ '}

/* Headers */

h1, h2 {
	font-family: 'Book Antiqua', 'Palatino Linotype', Garamond, Cambria, serif; }
h1 {
	font-size: 3em; 
}

.preface h2 {font-size: 1.2em}

.filters h2 {
	margin-top: .2em;}
.filters h3 {
	font-size: 1.1em; 
	margin: .5em 0 .5em .3em}
	
.work h2 {
	font-size: 1.5em; 
	margin: .5em
}

/* Links */

a {color: var(--accent)}
a:hover {color: var(--hover);}

/* Focus Outlines */

*:focus-visible {
	outline: 2px solid var(--accent); 
	outline-offset: .15em; }
	
input:focus-visible {
	outline: none}
	
label:has(input:focus-visible) {
	outline: 2px solid var(--accent); 
	outline-offset: .15em; 
	border-radius: .2em }
	
/* Details Toggle */

details {
	width: 100%; 
	text-align: left; 
	margin: 10px 0 20px 0;
	}
summary {
	background: var(--backing); 
	padding: .5em;
	}
summary:hover {
	background: var(--hover); 
	color: var(--page-bg); 
	cursor: pointer;
	}
.preface summary {
	width: 95%; 
	margin-left: auto;
	margin-right: auto;
}
.filters summary { 
	font-weight: bold; 
	font-size: 1.1em; }

/* --- Filtering Effects --- */

/* Filter For */

.collection:has(#no-warnings:checked) .work:not([warnings=""]) {display: none;} 
	/* This selector detects warnings that are left blank! If going by custom elements instead of custom attributes, replace .work:not([warnings=""]) with .work:has(warning) */
.collection:has(#watch-out:checked) .work:not([warnings~="watch-out"]) {display: none;}

.collection:has(#mega-man-classic:checked) .work:not([fandom="mega-man-classic"]) {display: none;}
.collection:has(#made-up-movie:checked) .work:not([fandom="made-up-movie"]) {display: none;}
.collection:has(#nonexistent-novel:checked) .work:not([fandom="nonexistent-novel"]) {display: none;}
.collection:has(#fabricated-fable:checked) .work:not([fandom="fabricated-fable"]) {display: none;}
.collection:has(#original-work:checked) .work:not([fandom="original-work"]) {display: none;}

.collection:has(#fxf:checked) .work:not([pairings~="fxf"]) {display: none;}
.collection:has(#mxm:checked) .work:not([pairings~="mxm"]) {display: none;}
.collection:has(#mxf:checked) .work:not([pairings~="mxf"]) {display: none;}
.collection:has(#nbxf:checked) .work:not([pairings~="nbxf"]) {display: none;}
.collection:has(#nbxm:checked) .work:not([pairings~="nbxm"]) {display: none;}
.collection:has(#nbxnb:checked) .work:not([pairings~="nbxnb"]) {display: none;}
.collection:has(#gen:checked) .work:not([pairings=""]) {display: none;} 
	/* This selector detects pairings that are left blank! If going by custom elements instead of custom attributes, replace .work:not([pairings=""]) with .work:not(:has(pairing.none)) */

.collection:has(#graphs:checked) .work:not([tags~="graphs"]) {display: none;}
.collection:has(#cake:checked) .work:not([tags~="cake"]) {display: none;}
.collection:has(#spades:checked) .work:not([tags~="spades"]) {display: none;}
.collection:has(#neologisms:checked) .work:not([tags~="neologisms"]) {display: none;}

.collection:has(#over-1000:checked) .work:not([words~="over-1000"]) {display: none;}
.collection:has(#over-10000:checked) .work:not([words~="over-10000"]) {display: none;}

/* Highlight Selected Tag */

.collection:has(#watch-out:checked) warning.watch-out, 
.collection:has(#mega-man-classic:checked) fandom.mega-man-classic, 
.collection:has(#made-up-movie:checked) fandom.made-up-movie, 
.collection:has(#nonexistent-novel:checked) fandom.nonexistent-novel,
.collection:has(#fabricated-fable:checked) fandom.fabricated-fable, 
.collection:has(#original-work:checked) fandom.original-work, 
.collection:has(#fxf:checked) pairing.fxf, 
.collection:has(#mxm:checked) pairing.mxm, 
.collection:has(#mxf:checked) pairing.mxf,
.collection:has(#nbxf:checked) pairing.nbxf,
.collection:has(#nbxm:checked) pairing.nbxm, 
.collection:has(#nbxnb:checked) pairing.nbxnb, 
.collection:has(#gen:checked) pairing.none, 
.collection:has(#graphs:checked) tag.graphs,
.collection:has(#spades:checked) tag.spades, 
.collection:has(#cake:checked) tag.cake, 
.collection:has(#neologisms:checked) tag.neologisms {
	border: 1px solid var(--text);
} /* These are multiple different selectors stacked together. They MUST end with a comma EXCEPT for the very last one. */

/* Exclude */

.collection:has(#yes-warnings:checked) .work:not(:has(warning)) {display: none;} 
	/* This selector detects warnings that are left blank! If going by custom elements instead of custom attributes, replace *[warnings=""] with .work:not(:has(warning)) */
.collection:has(#no-watch-out:checked) *[warnings~="watch-out"] {display: none;}

.collection:has(#no-mega-man-classic:checked) *[fandom="mega-man-classic"] {display: none;}
.collection:has(#no-made-up-movie:checked) *[fandom="made-up-movie"] {display: none;}
.collection:has(#no-nonexistent-novel:checked) *[fandom="nonexistent-novel"] {display: none;}
.collection:has(#no-fabricated-fable:checked) *[fandom="fabricated-fable"] {display: none;}
.collection:has(#no-original-work:checked) *[fandom="original-work"] {display: none;}

.collection:has(#no-fxf:checked) *[pairings~="fxf"] {display: none;}
.collection:has(#no-mxm:checked) *[pairings~="mxm"] {display: none;}
.collection:has(#no-mxf:checked) *[pairings~="mxf"] {display: none;}
.collection:has(#no-nbxf:checked) *[pairings~="nbxf"] {display: none;}
.collection:has(#no-nbxm:checked) *[pairings~="nbxm"] {display: none;}
.collection:has(#no-nbxnb:checked) *[pairings~="nbxnb"] {display: none;}
.collection:has(#yes-pairings:checked) *[pairings=""] {display: none;} 
	/* This selector detects pairings that are left blank! If going by custom elements instead of custom attributes, replace *[pairings=""] with .work:has(pairing.none) */

.collection:has(#no-graphs:checked) *[tags~="graphs"] {display: none;}
.collection:has(#no-cake:checked) *[tags~="cake"] {display: none;}
.collection:has(#no-spades:checked) *[tags~="spades"] {display: none;}
.collection:has(#no-neologisms:checked) *[tags~="neologisms"] {display: none;}

.collection:has(#no-over-1000:checked) *[words~="over-1000"] {display: none;}
.collection:has(#no-over-10000:checked) *[words~="over-10000"] {display: none;}

/* Attribute selectors: https://meyerweb.com/eric/articles/webrev/200008a.html 
https://meyerweb.com/eric/articles/webrev/200008b.html */

/* Filter Checkbox Inputs */

input {appearance: none;}
label {
	margin: .3em 0; 
	display: block;} 
label:hover {
	cursor: pointer; 
	color: var(--hover);}

label::before {
	font-weight: bold; 
	margin-left: .5em; 
	filter: opacity(.3);
}
label:has(input[name="require"])::before {content: '✓ ';}
label:has(input[name="exclude"])::before {content: '✖ ';}

label:has(input:checked) {font-weight: bold}
label:has(input:checked)::before {filter: opacity(1)}
label:has(input:checked[name="require"])::before {color: var(--green);}
label:has(input:checked[name="exclude"])::before {color: var(--red);}

/* Work Header Icons */

.work h2::before {
	display: inline-block; 
	margin-right: .5em; 
	margin-left: -.3em;
	transform: scale(1.3);
}
*[pairings~="fxf"] h2::before {content: url('../images/icons/fxf.svg');}
*[pairings~="mxm"] h2::before {content: url('../images/icons/mxm.svg');}
*[pairings~="mxf"] h2::before {content: url('../images/icons/mxf.svg');}
*[pairings~="nbxf"] h2::before {content: url('../images/icons/nbxf.svg');}
*[pairings~="nbxm"] h2::before {content: url('../images/icons/nbxm.svg');}
*[pairings~="nbxnb"] h2::before {content: url('../images/icons/nbxnb.svg');}
*[pairings=""] h2::before {content: url('../images/icons/gen.svg');}

@media (prefers-color-scheme: light) {
	.work h2::before {filter: brightness(0)}
}  /* This lets you flip the icon colors for light mode */

/* Code Text */
.code {display: inline-block; font-family: monospace; padding: .5em 1.5em; margin-left: 1em; background: var(--backing)}
.indent {padding-left: 2em}