: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); } 

#skip a {
	position: absolute;
	display: inline-block;
	left: 0px;
	top: -1000px;
	overflow: hidden;
	transition: top 0.5s ease;
	background: var(--background);
	color: var(--link);
	z-index: 1000;
	padding: 5px;
}

#skip a:focus {
	top: 0;
	transition: top 0.5s ease;
}

/* 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;
}

.works .thumbnail-header{
	display: flex;
	justify-content: space-between;
}

.work p.date {
	/* font-weight: bold; */
	align-content: center;
}

.work p.small {
	font-size: .8em;
	margin-bottom: .4em;
	display: inline;
}

tag, fandom, pairing, warning, rating {
	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;
	display: inline;
}

/* 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(#ssmy:checked) .work:not([fandom="ssmy"]) {display: none;}
.collection:has(#ina11:checked) .work:not([fandom="ina11"]) {display: none;}
.collection:has(#the-arcana-game:checked) .work:not([fandom="the-arcana-game"]) {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(#nbxnb:checked) .work:not([pairings~="nbxnb"]) {display: none;}
.collection:has(#multi:checked) .work:not([pairings~="multi"]) {display: none;}
.collection:has(#no-pairings:checked) .work:not([pairings="none"]) {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(#events:checked) .work:not([tags~="events"]) {display: none;}
.collection:has(#tey:checked) .work:not([tags~="tey"]) {display: none;}
.collection:has(#spades:checked) .work:not([tags~="spades"]) {display: none;}
.collection:has(#neologisms:checked) .work:not([tags~="neologisms"]) {display: none;}

.collection:has(#complete:checked) .work:not([status~="complete"]) {display: none;}
.collection:has(#wip:checked) .work:not([status~="wip"]) {display: none;}


.collection:has(#under-1000:checked) .work:not([words~="under-1000"]) {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(#ssmy:checked) fandom.ssmy,
.collection:has(#ina11:checked) fandom.ina11,
.collection:has(#the-arcana-game:checked) fandom.the-arcana-game, 
.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(#nbxnb:checked) pairing.nbxnb, 
.collection:has(#multi:checked) pairing.multi, 
.collection:has(#no-pairings:checked) pairing.none, 
.collection:has(#events:checked) tag.events,
.collection:has(#tey:checked) tag.tey, 
.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-ssmy:checked) *[fandom="ssmy"] {display: none;}
.collection:has(#no-ina11:checked) *[fandom="ina11"] {display: none;}
.collection:has(#no-the-arcana-game:checked) *[fandom="the-arcana-game"] {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-nbxnb:checked) *[pairings~="nbxnb"] {display: none;}
.collection:has(#no-multi:checked) *[pairings~="multi"] {display: none;}
.collection:has(#yes-pairings:checked) *[pairings="none"] {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-events:checked) *[tags~="events"] {display: none;}
.collection:has(#no-tey:checked) *[tags~="tey"] {display: none;}
.collection:has(#no-spades:checked) *[tags~="spades"] {display: none;}
.collection:has(#no-neologisms:checked) *[tags~="neologisms"] {display: none;}

.collection:has(#no-complete:checked) *[status~="complete"] {display: none;}
.collection:has(#no-wip:checked) *[status~="wip"] {display: none;}


.collection:has(#no-under-1000:checked) *[words~="under-1000"] {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);
}

 .work:has(status.complete) h2::after {content: ' ✅'}

*[pairings~="fxf"] h2::before {content: url('/assets/images/fxf.svg');}
*[pairings~="mxm"] h2::before {content: url('/assets/images/mxm.svg');}
*[pairings~="mxf"] h2::before {content: url('/assets/images/mxf.svg');}
*[pairings~="nbxnb"] h2::before {content: url('/assets/images/nbxnb.svg');}
*[pairings="none"] h2::before {content: url('/assets/images/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}