html, body {margin: 0;}

body {
	font-size: 1.7em; 
	background: var(--bg-color); 
	color: var(--text-color);
	text-align:justify; } 
	
/* Fonts */
body {
  font-family: 'Atkinson Hyperlegible';
}
h1, h2, h3, h4, .filters {
  font-family: 'Atkinson Hyperlegible';
}

/* Text Areas */

header {
	width: 100%; 
	font-size: 3.4rem; 
	background: var(--box-color); 
	text-align: center; 
	padding: 1em; 
	box-sizing: border-box}

main {
	margin: 0em auto; 
	max-width: 1000px; 
	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: var(--box-color);
	border: 1px solid var(--box-color);
	border-radius: none; 
	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(--bg-color); 
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 5px; 
}
warning::before {content: '❕ '}

/* Headers */

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(--fic-color)}
a:hover {color: var(--text-color);}

/* Focus Outlines */

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

details {
	width: 100%; 
	text-align: left; 
	margin: 10px 0 20px 0;
	}
summary {
	background: var(--box-color); 
	padding: .5em;
	}
summary:hover {
	background: var(--box-color); 
	color: var(--text-color); 
	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(#r-18:checked) .work:not([warnings="r-18"]) {display: none;}
.collection:has(#pg-15:checked) .work:not([warnings="pg-15"]) {display: none;}

.collection:has(#honkai-star-rail:checked) .work:not([fandom="honkai-star-rail"]) {display: none;}
.collection:has(#the-walking-dead:checked) .work:not([fandom="the-walking-dead"]) {display: none;}
.collection:has(#spider-verse:checked) .work:not([fandom="spider-verse"]) {display: none;}
.collection:has(#hazbin-hotel:checked) .work:not([fandom="hazbin-hotel"]) {display: none;}

.collection:has(#phaidei:checked) .work:not([pairings~="phaidei"]) {display: none;}
.collection:has(#cegan:checked) .work:not([pairings~="cegan"]) {display: none;}
.collection:has(#migmi:checked) .work:not([pairings~="migmi"]) {display: none;}
.collection:has(#radiodust:checked) .work:not([pairings~="radiodust"]) {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;}
.collection:has(#over-20000:checked) .work:not([words~="over-20000"]) {display: none;}
.collection:has(#over-30000:checked) .work:not([words~="over-30000"]) {display: none;}

.collection:has(#finalizado:checked) .work:not([status~="finalizado"]) {display: none;}
.collection:has(#en-emision:checked) .work:not([status~="en-emision"]) {display: none;}

/* Highlight Selected Tag */

.collection:has(#r-18:checked) warning.r-18, 
.collection:has(#pg-15:checked) warning.pg-15, 
.collection:has(#honkai-star-rail:checked) fandom.honkai-star-rail, 
.collection:has(#the-walking-dead:checked) fandom.the-walking-dead,
.collection:has(#spider-verse:checked) fandom.spider-verse,
.collection:has(#hazbin-hotel:checked) fandom.hazbin-hotel,
.collection:has(#phaidei:checked) pairing.phaidei, 
.collection:has(#cegan:checked) pairing.cegan, 
.collection:has(#migmi:checked) pairing.migmi,
.collection:has(#radiodust:checked) pairing.radiodust,
.collection:has(#finalizado:checked) status.finalizado, 
.collection:has(#en-emision:checked) status.en-emision {
	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;}
.collection:has(#no-watch-out:checked) *[warnings~="watch-out"] {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-nbxnb:checked) *[pairings~="nbxnb"] {display: none;}
.collection:has(#yes-pairings:checked) *[pairings=""] {display: 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('/projects/icons/gender/fxf.svg');}
*[pairings~="mxm"] h2::before {content: url('/projects/icons/gender/mxm.svg');}
*[pairings~="mxf"] h2::before {content: url('/projects/icons/gender/mxf.svg');}
*[pairings~="nbxnb"] h2::before {content: url('/projects/icons/gender/nbxnb.svg');}
*[pairings=""] h2::before {content: url('/projects/icons/gender/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(--bg-color)}
.indent {padding-left: 2em}