*{box-sizing: border-box} 
@font-face { font-family: Marcellus; src: url('Marcellus-Regular.ttf') }

/*! Colour Schemes */

@media (prefers-color-scheme: light) {
	:root {
		--background: rgb(230,230,230);
		--background_alt: rgb(220,220,220);
		--background_faded: rgba(230,230,230,0.3);
		--color: rgb(100,100,100);
		--subtle_color: rgb(150,150,150);
		--faint_color: rgba(150,150,150,0.5);
		--link_colour: rgb(80,120,140);
		--highlight_color: rgb(254,244,234); 
		--lighten: rgba(255,255,255,0.1); 
		--darken: rgba(0,0,0,0.1); 
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: rgb(33,33,33);
		--background_alt: rgb(25,25,25);
		--background_faded: rgba(33,33,33,0.3);
		--color: rgb(150,150,150);
		--subtle_color: rgba(140,140,140, 0.7);
		--faint_color: rgba(140,140,140,0.2);
		--link_colour: rgb(160,140,160);
		--highlight_color: rgb(200,190,160);
		--lighten: rgba(255,255,255,0.1); 
		--darken: rgba(0,0,0,0.1); 
	}
}

/*! Screen Sizes */

@media (max-width: 500px) {
	* {
	 font-size: 95%;
	}
}
@media (max-width: 1000px) {
	* .medium_up {
		display: none !important;
	}
}

/*! General Elements */

html, body {
	padding: 0;
	margin: 0;
	color: var(--color);
	background: var(--background);
	font-size: 11pt;
	font-family: Marcellus;
}

a {
	text-decoration: none;
	color: var(--link_colour)
}

h1, h2, h3, h4, h5 {
	color: var(--heading_color);
}

p {
	margin-bottom: .5em;
	margin-top:    .5em;
	text-indent: 1em;
}

svg path{
	fill: currentColor;
}

*{
	border-radius: 1pt;
}


/*! General Classes */

.hidden {
	display: none !important;
}
.together {
	display: inline-block;
 	break-inside: avoid; 
}

.image{
	border-radius: 4pt;
	box-shadow: 0 0 4pt black;
}

.button{
	display: inline-block;
	margin: 1em auto;
	font-size: 90%;
	line-height: 2em;
	padding: .5em 1em;
	outline: solid 1pt var(--darken);
	background: var(--background_alt);
}

.inline_icon{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	height: 1.3em;
}

.patron_badge {
	display: inline-block;
	position: relative;
	height: 1.7em; width: 1.7em;
	bottom: 0.1em;
	background-image: url("patron_star.svg");
	vertical-align: middle;
}

.patron_hat {
	position: relative;
	bottom: 65%;
	max-height: 120%;
}

.fadeout {
	display: inline-block;
	position: absolute;
	top:-5vh; z-index: 0;
	width: 100%;
	height: 90vh;
	overflow: hidden;
	background: linear-gradient(to bottom, transparent, var(--background) 100%);
	background-position: top center;
	background-size: cover;
	opacity: 0.5;
}

/*! Header Styling */

header {
	position: absolute;
	z-index: 100;
	padding: 0;
	width: 100%;
}

header .nav_link, footer .nav_link {
	outline: solid 1pt var(--darken);
}


header.nano .nav_link {
	height: 1.5em;
	line-height: 1.5em;
	padding: 0 .5em;
}


header nav {
	line-height: 3em;
	display: inline-block;
}



header .site {
	position: fixed;
	width: 100%;
	text-align: center;
	top: 5pt;
}


header h1 {
	 display: inline;
	 padding:0;
	 font-size: 100%;
	 font-weight: normal;
 }
header .nav_link {	
	display: inline-block;
	line-height: 2.4em;
	height: 2.4em;
	padding: 0 .7em;
}
@media (min-width: 1500px) {
	header .nav_link {
		line-height: 3em;
		height: 3em;
		padding: 0 1em;
	}
}
header .image_link {
	position: relative;
	top:-1pt;
	padding: 0;
}

header .image_link img {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}


header .book_link {
	padding: 0;
}

header .mastodon_link {
	color: rgba(220,220,220);
	background: rgba(99,100,246, 0.9);
}

header .tumblr_link {
	color: rgba(0,25,53, 0.9);
	background: rgb(150,150,150);
}

header .patron_link {
	background: var(--link_colour);
	break-inside: avoid;
	color: white;
}

header.mini {
	display: block;
	position: relative;
	text-align: center;
	padding: 1em 0;
	font-size: 80%;
}
header.mini img{
	opacity:0.4;
}
header.mini a{
	color: inherit;
}
#unit_page header.mini {
	filter: grayscale(1);
}

header.nano {
	position: fixed;
	top: 0; right: 0;
	text-align: right;
	margin: 0.5em;
	font-size: 50%;
	font-weight: bold;
	text-transform: uppercase;
	filter: grayscale(1);
}

/*! Main Styling */

main {
	min-height: 100vh;
	padding: 0 2.5%;
}

/*! Footer Styling */

footer {
	padding: 10pt;
	text-align: center;
	font-size: 90%;
	
}

footer::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 500px){
	footer {
		font-size: 80%;
	}
	footer .follow .label {
		display: none;
	}
}

footer .follow{
	float: right;
}

footer .nav_link {
	display: inline-block;
	line-height: 2em;
	height: 2em;
	padding: 0 .7em;
}

footer .mastodon_link {
	color: var(--color);
	background: rgba(150,150,150,0.1);
}

footer .tumblr_link {
	color: var(--color);
	background: rgba(150,150,150,0.05);
}

footer .patron_link {
	float: left;
	break-inside: avoid;
	background: rgba(150,150,150,0.2);
}

/*! Tessellation Stuff */

.nav_link {position: relative}
@media (prefers-color-scheme: light) {
	:root {
		position: relative;
		--bg_01: hsla(001,13%,88%,0.6);
		--bg_02: hsla(040,13%,78%,0.6);
		--bg_03: hsla(080,13%,83%,0.6);
		--bg_04: hsla(120,13%,82%,0.6);
		--bg_05: hsla(160,13%,85%,0.6);
		--bg_06: hsla(200,13%,80%,0.6);
		--bg_07: hsla(240,13%,82%,0.6);
		--bg_08: hsla(280,13%,85%,0.6);
		--bg_09: hsla(320,13%,70%,0.6);
	
		--fg_01: hsla(001,13%,33%,1);
		--fg_02: hsla(040,13%,36%,1);
		--fg_03: hsla(080,13%,30%,1);
		--fg_04: hsla(120,13%,28%,1);
		--fg_05: hsla(160,13%,34%,1);
		--fg_06: hsla(200,13%,29%,1);
		--fg_07: hsla(240,13%,27%,1);
		--fg_08: hsla(280,13%,34%,1);
		--fg_09: hsla(320,13%,33%,1);
	}
	#home_page header .nav_link .text_over_image { 
		position: relative; 
		z-index: 2; 
		filter: invert(100%) brightness(35%) saturate(900%);
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		position: relative;
		--bg_01: hsla(001,13%,33%,0.6);
		--bg_02: hsla(040,13%,36%,0.6);
		--bg_03: hsla(080,13%,30%,0.6);
		--bg_04: hsla(120,13%,28%,0.6);
		--bg_05: hsla(160,13%,34%,0.6);
		--bg_06: hsla(200,13%,29%,0.6);
		--bg_07: hsla(240,13%,27%,0.6);
		--bg_08: hsla(280,13%,34%,0.6);
		--bg_09: hsla(320,13%,33%,0.6);
		
		--fg_01: hsla(001,13%,88%,1);
		--fg_02: hsla(040,13%,78%,1);
		--fg_03: hsla(080,13%,83%,1);
		--fg_04: hsla(120,13%,82%,1);
		--fg_05: hsla(160,13%,85%,1);
		--fg_06: hsla(200,13%,80%,1);
		--fg_07: hsla(240,13%,82%,1);
		--fg_08: hsla(280,13%,85%,1);
		--fg_09: hsla(320,13%,70%,1);
	}
	#home_page header .nav_link .text_over_image { 
		position: relative; 
		z-index: 2; 
		filter: invert(95%) brightness(400%);
	}
}
.tessellated_1 { color: var(--fg_01); background: var(--bg_01) }
.tessellated_2 { color: var(--fg_02); background: var(--bg_02) }
.tessellated_3 { color: var(--fg_03); background: var(--bg_03) }
.tessellated_4 { color: var(--fg_04); background: var(--bg_04) }
.tessellated_5 { color: var(--fg_05); background: var(--bg_05) }
.tessellated_6 { color: var(--fg_06); background: var(--bg_06) }
.tessellated_7 { color: var(--fg_07); background: var(--bg_07) }
.tessellated_8 { color: var(--fg_08); background: var(--bg_08) }
.tessellated_9 { color: var(--fg_09); background: var(--bg_09) }

header.mini .nav_link::before {
	content: " ";
	position: absolute;
	z-index: -1;
	top: 0; left: 0;
	right: 0; bottom: 0;
	opacity: 0.9;
	background-image: linear-gradient(var(--background_alt), var(--background_alt));
}


/*! units Styling */

.units {
	column-count: auto;
	column-width: 150pt;
	gap: 0;
}

@media (max-width: 600px) {
	.units {
	column-width: 100pt;
	}
}


#search {
	display: block;
	position: relative;
	top: 20%;
	z-index: 3;
	margin: auto;
	padding: .5em 1em ;
	border: solid 1pt var(--darken);
	border-radius: 2pt;
	background: var(--background_alt);
	box-shadow: inset 2pt 2pt 2pt rgba(0,0,0,0.2);
	color: var(--link_colour);
	font-size: 14pt;
	text-align: center;
}

 #search::placeholder{
	color: var(--faint_color)
}



.cameo {
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 5pt;
	break-inside: avoid;

}

.cameo .patron_star {
	position: absolute;
	width: 1em; height: 1em;
	top: 10pt; right: 10pt; z-index: 3;
	filter: drop-shadow(0 0 4pt black);
}
.cameo .patron_star path  {
	fill: rgb(250,250,200);
}

.cameo img {
	width: 100%;
	margin: auto 0;
	box-shadow: 0 5pt 5pt rgba(0,0,0,0.3);
	max-height: 600pt;
	overflow: hidden;
	object-fit: cover;
}
.cameo img:first-of-type {
}
.cameo img:last-of-type {
}

.cameo h3 {
	margin: 0;
	font-size: 70%;
	font-style: italic;
	font-weight: normal;
	text-align: center;
	color: var(--color);
}

/*! Unit Styling */
#unit_page main {
	padding: 0;
}

#unit_page header.mini .site_links {
	display: none;	
}

.unit {
	opacity:0;
	animation: fadein 2s ease-in-out;
	animation-fill-mode: forwards;	
	text-align: center;
}
@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

.unit .info {
	word-wrap: break-word; 
	margin: 1em auto;
	max-width: 30em;
}
.unit .media_container {
	display: inline-block;
	text-align: right;
}
.unit #absolute_unit {
	overflow: hidden;
	display: block;
	margin: 0 auto 5pt auto;
	max-height: 90vh;
	max-width: 100%;
	transition: max-height 1s ease-in-out;
	box-shadow: 0 5pt 15pt rgba(0,0,0,0.3);
	border: none;
}

iframe#absolute_unit {
	height: 90vh;
}

.unit .download {
	margin-right: 1em;
	position: relative;
	padding: .0 1em;
}
.unit .download .patron_badge {
	font-size: 50%;
}
.unit .download .inline_icon {
	color:  var(--highlight_color);
	fill: var(--highlight_color);
}

.unit .title {
	font-style: italic;
	margin-bottom: 0;
}

.unit .description {
	margin-bottom: 1em;
	margin-top: 1em;
	text-wrap: balance;
	max-width: 100%;
	
}

.unit .date {
	font-size: 80%;
	color:var(--subtle_color);
	
}

.unit .tags {
	font-size: 80%;
	line-height: 3em;
	text-wrap: balance;
}

.unit .tag {
	outline: solid 1pt var(--darken);
	display: inline;
	padding: .5em 1em;
}

.unit .tag:before{
	content: "#"
}


/*! Tag Page Specials */

#tag_page h1 {
	text-align: center;
	opacity: 0.5
}