@charset "UTF-8";

/* Let's get it started in here */
:root {
	
	/* Light, Dark, Default */
	--color-a-L: #3800FF;
	--color-a-D: #ffdc90;
	--color-a:   var(--color-a-L);

	--color-bg-L: linear-gradient(to left, #000 12.5%, #784f1677 0 25%, #e4030377 0 37.5%, #ff8c0077 0 50%, #ffed0077 0 62.5%, #00802677 0 75%, #004dff77 0 87.5%, #75078777 0);
	--color-bg-D: #171616;
	--color-bg:   var(--color-bg-L);

	--color-bg-secondary-L: #E9E9E9;
	--color-bg-secondary-D: #171616;
	--color-bg-secondary:   var(--color-bg-secondary-L);
	
	--color-box-L: #FFEEBF;
	--color-box-D: #171616;
	--color-box:   var(--color-box);

	--color-text-L: #000;
	--color-text-D: #FAFFD2;
	--color-text:   var(--color-text-L);

	--color-input-L: #FFF;
	--color-input-D: #000;
	--color-input:   var(--color-input-L);

	--color-text-secondary-L: #585757;
	--color-text-secondary-D: #585757;
	--color-text-secondary: var(--color-text-secondary-L);

	--color-table-L: #C2C2FF;
	--color-table-D: #212177;
	--color-table: var(--color-table-L);


	--filter-saturate-L: saturate(1);
	--filter-saturate-D: saturate(.66);
	--filter-saturate-E: saturate(0);
	--filter-saturate: var(--filter-saturate-L);

	--filter-invert-L: 0;
	--filter-invert-D: 1;
	--filter-invert:   var(--filter-invert-L);
	
	/* Colours */
	--color-accent: #118BEE30;
	--color-block:  #FF000015;
	--color-brighten: #FFFFFF50;
	--color-outline: #c8a30c80;
	--color-pre-background: #090505;
	--color-pre: #5bec5b;
	--color-fleuron: #ff0000;
	--color-stars: #FFFF00;
	--color-mark: #2E8B57;

	/* Text */
	--font-family-mono:"commit", monospace;
	--font-family-sans:"hyper2025", "stars", sans-serif;
	--font-family:var(--font-family-sans);
	--justify-important: center;
	--line-height: 1.25em;
	--width-content: min(75ch, 100%);

	/* Borders */
	--border-radius-none: 0;
	--border-radius-default: .5em;
	--border-radius: 0 1em 1em 1em;
}

/* Colour Schemes */
@media (prefers-color-scheme: light) {
	:root {
		--color-a:     var(--color-a-L);
		--color-bg:    var(--color-bg-L);
		--color-bg-secondary: var(--color-bg-secondary-L);
		--color-box:   var(--color-box-L);
		--color-text:  var(--color-text-L);
		--color-input: var(--color-input-L);
		--color-table: var(--color-table-L);
		filter: var(--filter-saturate);
		--filter-invert: var(--filter-invert-L);
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-a:     var(--color-a-D);
		--color-bg:    var(--color-bg-D);
		--color-bg-secondary: var(--color-bg-secondary-D);
		--color-box:   var(--color-box-D);
		--color-text:  var(--color-text-D);
		--color-input: var(--color-input-D);
		--color-table: var(--color-table-D);
		filter: saturate(--filter-saturate-D);
		--filter-invert: var(--filter-invert-D);
	}
}

/* Colour Scheme Radio Buttons */
:root:has( input#dark:checked ) {
	--color-a:     var(--color-a-D);
	--color-bg:    var(--color-bg-D);
	--color-bg-secondary: var(--color-bg-secondary-D);
	--color-box:   var(--color-box-D);
	--color-text:  var(--color-text-D);
	--color-input: var(--color-input-D);
	--color-table: var(--color-table-D);
	--color-text-secondary: var(--color-text-secondary-D);
	--font-family:var(--font-family-sans);
	filter: var(--filter-saturate-D);
	--filter-invert: var(--filter-invert-D);
}

:root:has( input#light:checked ) {
	--color-a:     var(--color-a-L);
	--color-bg:    var(--color-bg-L);
	--color-bg-secondary: var(--color-bg-secondary-L);
	--color-box:   var(--color-box-L);
	--color-text:  var(--color-text-L);
	--color-input: var(--color-input-L);
	--color-table: var(--color-table-L);
	--color-text-secondary: var(--color-text-secondary-L);
	--font-family:var(--font-family-sans);
	filter: var(--filter-saturate-L);
	--filter-invert: var(--filter-invert-L);
}

:root:has( input#eink:checked ) {
	--color-a:     var(--color-a-L);
	--color-bg:    #FFF;
	--color-bg-secondary: var(--color-bg-secondary-L);
	--color-box:   var(--color-box-L);
	--color-text:  var(--color-text-L);
	--color-input: var(--color-input-L);
	--color-table: var(--color-table-L);
	--color-text-secondary: var(--color-text-secondary-L);
	--font-family:var(--font-family-sans);
	filter: var(--filter-saturate-E);
	--filter-invert: var(--filter-invert-L);
}

:root:has( input#xterm:checked ) {
	--color-a:     lime;
	--color-bg:    black;
	--color-bg-secondary: black;
	--color-box:   black;
	--color-text:  lime;
	--color-input: black;
	--color-table: black;
	--color-text-secondary: lime;
	--font-family:var(--font-family-mono);
	filter: var(--filter-saturate-L);
	--filter-invert: var(--filter-invert-D);
}
/* Drunk */
@font-face {
	font-family: "Drunk";
	src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
	/* Lower-Case Vowels */
	unicode-range: U+61, U+65, U+69, U+6F, U+75 ;
	size-adjust: 105%;
}
:root:has(input#drunk:checked) *:nth-child(3n) {
	transform: rotate(2deg);
}
:root:has(input#drunk:checked) *:nth-child(5n) {
	transform: skew(5deg, 5deg);
}
:root:has(input#drunk:checked) *:nth-child(7n) {
	transform: rotate(-3deg);
}
:root:has(input#drunk:checked) p::first-letter {
	font-size: .5em;
}
:root:has(input#drunk:checked) * {
	font-family: "Drunk", cursive;
	font-style: oblique -12deg;
	text-align: end;
}
:root:has(input#drunk:checked) body {
	filter: blur(.1ch) saturate(2.5);
}
:root:has(input#drunk:checked) a  {
	animation-name: bounce;
	animation-duration: 4s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes bounce {
	0%   { margin-top:  0ch; }
	25%  { margin-top: -1ch; }
	50%  { margin-top:  0ch; }
	75%  { margin-top:  1ch; }
	100% { margin-top:  0ch; }
}

/* Nice focus outline */
*:focus, .edent-calendar-entry:focus {
	outline: var(--color-outline) solid .5rem;
}

/* Give everything the same border radius. Except specific elements where it looks rubbish! */
*:not(.no-border-radius) {
	border-radius: var(--border-radius);
}
.pingback-favicon, 
#review-list img {
	border-radius: revert;
}

/* Some things just deserve to be hidden. */
[hidden] {
	display: none;
}

/* Why do people print HTML?! */
@media print{
	body::before{content:"Please consider the environment before printing"; font: x-large sans-serif;}
}

/* Smooth scrolling unless the user prefers no animation */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Fonts */
@font-face {
	font-family:"hyper2025";
	src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2-variations");
	src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2") tech("variations");
	font-weight: 100 1000;
	font-display: swap;
}
@font-face {
	font-family:"commit";
	src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family:"stars";
	src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAA0AAAAABzAAAAKEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCUhEICoMEgmULDgABNgIkAxQEIAWDYAdXGx0GyJ4FdsN1EQJFSeRMmGqzvn9gPP+x3//WPle+O+oZT6qpMDRCFyuZVvCulp8Pv7/3fECj7x/gxIcJD6MaxLpQFsriSlOW2wr8v56p5/+ah+kJeO/ToRxh9oJms1kkSLS10XhUxSUwGniD+cBog+7GBH7g1VYIvLyMVAPvQ9lr5dTBOBZBiehEi0JT8lBHLkkEwFlw6/95LFK6EQA4HQQA14RSDgURitjHyKH8DSAA2EKCBg3WScAlyATr5I6AYcMKdvWxj4Owq2P/4Xn73xcSANITQAoFAAjt6hlUoAfj6HAf8ALQAiBK7dCG6ILFWTtFw8o61K4vMhTlHEvmllhmBfZkw0HTR10sw1AUTbE0W7MCpjzCh5GG04wPSxqO+pQYwnUyi+PopUw5JXCubYVqW5hCfnemSJ91TK7cEaKSZWlb5Hplut8P7PlzTeYmXvAmfGAeWGraktqvC0oaS9mn+jJgfO62fa+mMWYR7rWyjDeGzMY12dSN8WYuaZttmOVJDldKn9CsA6lyZ7KH4a9FRF599VVkBABB+OpbNdFmyvkZ1pXNtdy0xLznDwwrEOLuIQL/aqT9HG0BCsUsKzMJegdIQSGC0wBg3HMBMWULCSi9kySgsc+FgNaUDwjojGVSQG8qRyGTdkRsAgWUcUdA4xZKQWuTG9BZ9HtMb1N8MIFBjKMH4+gHDw6EgKF0LpEI9wYPsAhHDu8xJBElmoifkd1HMgoRPIIk8UoQJEvQAEp5KgmRbjJJEiz8F4XuNCryQUnehKCsoGmIqWQSSSdPi+5iBeadGuwoxtCTCJI4URdfwn4nevvrpA6yKT2iUmnSjlw4FrkUfZNvk5uuzhiXbig=) format("woff2");
	unicode-range: U+2605, U+2606, U+2BEA;
}

/* Wide-screens, float the main image */
@media screen and (min-width: 35em) {
	.alignleft {
		float: left;
		margin-right: 1.5em !important;
	}
}

/* Links */
a {
	color: var(--color-a);
	text-decoration: underline;
}

/* Notification for archive links */
a[href^="https://web.archive.org"]::after {
	content: " (archived)";
	vertical-align: super;
	font-size: .9em;
	color: var(--color-text);
}

/* Headings which self-link to their ID. */
:is(h2, h3, h4, h5, h6) > a[href^="#"] {
	color: var(--color-text);
	text-decoration: none;
}
:is(h2, h3, h4, h5, h6) > a[href^="#"]:hover::after {
	content: "¶";
}

/* Fix empty a from Twitter indieweb things */
a:empty + br {
	display: none
}

/* Mouse decorations */
abbr,
acronym {
	cursor: help;
}

/* Headers */
article header,
div header,
main header {
	padding-top: 0;
}

/* Articles */
article {
	display: flow-root;
}

article, section, #posts-navigation {
	border: solid var(--color-text-secondary);
	margin-bottom: 1em;
	padding: .5em;
	background: var(--color-box);
	box-shadow: .5em .5em var(--color-text-secondary);
}

/* Widgets and others */
aside {
	margin: 0 auto;
	max-width: var(--width-content);
	padding: 0;
	text-align: var(--justify-important);
}

/* Embedded Audio */
audio {
	background-color: var(--color-text);
	width: 100%;
}

/* Quotes */
/* The `:not(:has(iframe))` prevents the style being applied to embeds like TikTok etc. */
blockquote:not(:has(iframe)) {
	font-family: serif;
	border-left: 1em var(--color-text-secondary) solid;
	padding: calc( var(--line-height) / 2) calc( var(--line-height) * 1 ) 0 calc( var(--line-height) * 1 );
	font-size: .9em;
	margin: 1em 0;
	background: var(--color-block);
	overflow: auto;
	width: auto;
}

/* Add speech mark before first paragraph of bq */
blockquote:not(:has(iframe)):before {
	content: "❝";
	float: inline-start;
	width: 100%
}
/* Add speech mark to end of bq */
blockquote:not(:has(iframe)):after {
	content: "❞";
	float: inline-end;
}

/* Reduce margins to make things neater */
blockquote p {
	margin: 0;
}

/* Bit of spacing between paragraphs */
blockquote p:not(:last-child) {
	margin-bottom: .75em;
}

/* General styles for the body */
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family:var(--font-family);
	line-height: var(--line-height);
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	font-size: 1.2em;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

/* Silly Easter Egg at the page end */
body::after {
	content: "␃␄";
	float: right;
	font-size: 3em;
	background: black;
	color: lime;
	line-height: 1em;
}

/* All types of buttons */
button {
	font-family:var(--font-family);
}

button, #theme label, [type="submit"] {
	font-size: 1em;
	font-weight: bold;
	border: .1em solid var(--color-text);
	box-shadow: var(--color-text-secondary) .3em .3em;
	cursor: pointer;
	display: inline-block;
	padding: .1em 1em;
	line-height: 3em;
	text-align: center;
	text-decoration: none;
	user-select: none;
	touch-action: manipulation;
	margin: .5em 0 .5em 0;
	max-width: fit-content;
	background: var(--color-bg-secondary);
	color: var(--color-a);
}

button:active, #theme label:active, [type="submit"]:active {
	box-shadow: none;
	translate: .3em .3em;
}

/* Forms */
button:disabled,
input:disabled {
	background: var(--color-bg-secondary);
	border-color: var(--color-bg-secondary);
	color: var(--color-text-secondary);
	cursor: not-allowed;
}

button:hover {
	cursor: pointer;
}

button[disabled]:hover {
	filter: none;
}

/* Typography */
code,
samp {
	background-color: var(--color-accent);
	/* https://twitter.com/simevidas/status/1592180018234691584 */
	color: var(--color-text);
	display: inline-block;
	margin: 0.1em;
	padding: 0 0.5em;
	overflow-wrap: anywhere;
	text-align: initial;
	font-family:var(--font-family-mono);
	white-space: preserve-spaces;
	font-size: smaller;
}

output {
	font-family:var(--font-family-mono);
}

details summary {
	font-weight: bold;
	cursor: pointer;
}

details {
	border: .1em solid var(--color-text-secondary);
	padding: .5em;
	width: fit-content;
}
/* details[open] {
	max-width: 98%;
	margin: auto;
} */

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
video,
object {
	max-width: 100%;
	margin: 0 auto;
	display: block;
	padding-bottom: 1em;
}

video, .wp-video {
	margin-left: auto;
	margin-right: auto;
	display: block;
	height: auto;
}

figure img {
	max-width: 100%;
	height: auto;
}

img {
	max-width: 100%;
	display: block;
}

/* Alt Text */
img {
	font-family:var(--font-family-mono);
	color: var(--color-text);
}
img::before {
	font-family:var(--font-family-mono);
	color: var(--color-text);
	border: .25em dotted red;
	background: yellow;
	padding: .25em;
}
img::after {
	content: " ❌" / "";
}

/* Images */
figure {
	border: .1em var(--color-text-secondary) solid;
	margin: 0;
	padding: .25em;
	width: max-content;
	max-width: 100%;
}

main {
	margin: 0 auto;
	max-width: var(--width-content);
	text-align: start;
}

#single > header {
	max-width: var(--width-content);
	margin: .5em auto;
}

/* Grid posts */
main:not([itemprop="blogPost"]) {
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
}
main:not([itemprop="blogPost"]) > article {
	display: inherit;
	margin-right: .5em;
}

p[itemprop="abstract"] {
	display: flex;
	/* Fade out teaser text */
	mask-image: linear-gradient(to bottom, var(--color-text) 50%, transparent 100%);
	clear: both;
}

/* Continue reading link. */
p[itemprop="abstract"] + a {
	place-self: end;
}

form {
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: var(--line-height);
	margin-bottom: 0;
	margin-top: 0;
	text-wrap: balance;
}

h1 {
	font-size: 1.5em;
}

hr {
	padding: 0;
	border: none;
	text-align: var(--justify-important);
	height: .2em;
	overflow: visible;
	background-image: linear-gradient(to left, var(--color-box), var(--color-text), var(--color-box));
	margin-bottom: 1em;
	margin-top: 1em;
	clear: both;
}

header > hr::after {
	content: "✍️";
	font-size: 2em;
	top: -.2em;
	background-color: var(--color-box);
	position: relative;
	line-height: .5em;
	border-radius: 100%;
	color: var(--color-text);
}

input,
label,
select,
textarea {
	display: block;
	font-size: inherit;
	font-family:inherit;
	margin-top: .5em;
	background: var(--color-input);
	color: var(--color-text);
}

label {
	max-width: fit-content;
	background: var(--color-box);
}

input,
select,
textarea {
	padding: 1em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1em;
}

input[readonly],
textarea[readonly] {
	background-color: var(--color-bg-secondary);
}

input[type="checkbox"]+label,
input[type="radio"]+label {
	display: inline-block;
	font-weight: normal !important;
	position: relative;
	top: 1px;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	width: 1.5em;
}

/* Keyboard Keys */
kbd {
	border: .1em solid #aaa;
	border-radius: 15% !important;
	display: inline-block;
	padding: .1em .5em;
	background: linear-gradient(180deg, #fff, #fff, #fff, #ddd);
	user-select: none;
	cursor: pointer;
	color: #000;
	font-weight: bold;
}
kbd:hover {
	background: linear-gradient(0deg, #fff, #fff, #fff, #ddd);
}

mark,
ins {
	background: var(--color-bg-secondary);
	text-decoration: none;
	border-radius: var(--border-radius-none) !important;
	padding: .1em 0;
	filter: invert(1);
}

mark img,
ins img {
	/* Remove invert from images inside a mark or insert */
	filter: inherit;
}

/* Nav */
nav ul li {
	display: inline-block;
	position: relative;
	text-align: left;
}

nav ul {
	list-style: none;
	padding: 0;
	text-wrap: balance;
}

nav {
	text-align: var(--justify-important);
	margin: 0 auto;
	display: flow-root;
	font-size: 1.1em;
}

ul {
	padding-inline-start: 1em;
	list-style-type: "➫ ";
	display: block;
}

li {
	padding-bottom: .25em;
}

/* Byline Calendar */
time > img {
	height: 4rem;
	width: 4rem;
	border-radius: 0 !important;
	float: right;
	margin-left: .5rem;
}

ol {
	list-style: decimal-leading-zero;
	display: flow-root;
}

p {
	margin: 0.5em 0;
	padding: 0;
}

pre {
	background: var(--color-pre-background);
	color: var(--color-pre);
	margin: 0 0 1em 0;
	max-width: fit-content;
	overflow: auto;
	padding: .25em;
	border: .1em solid var(--color-text);
	font-family:var(--font-family-mono);
}

pre code {
	/* Fix for inconsistent background with plain <code> */
	background: revert;
	color: revert;
}

section header {
	padding-top: 0;
	width: 100%;
}

section img,
article img {
	max-width: 100%;
	height: auto;
}

small {
	font-size: .75em;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}
sub {
	bottom: -0.5em;
}

table {
	border-collapse: collapse;
	overflow-x: auto;
	margin: 0 0 1em;
	display: table;
	width: fit-content;
	table-layout: auto;
	word-wrap: normal;
	border-radius: var(--border-radius-none) !important;
}

thead th {
	/* Sticky header */
	position: sticky;
	top: 0;
	z-index: 1;
}

td,
th {
	border: .1ch black solid;
	padding:.5ch;
	border-radius: var(--border-radius-none) !important;
	min-width: 5em;
	word-break: break-word;
}

td {
	background-color: var(--color-brighten);
}

thead th, tfoot th {
	background: var(--color-table) !important
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.aligncenter {
	clear: both;
	display: block;
	margin: 1em auto 1em auto;
	border: solid .1em var(--color-text-secondary);
}

.alignleft {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1ex;
	max-width: 100%;
	height: auto;
	display: block;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	max-width: 50%;
}

/*Thumbnail images*/
.attachment-full {
	max-width: 100%;
	height: auto;
	max-height: 12em;
	aspect-ratio: initial;
	object-fit: cover;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.avatar {
	float: left;
	width: 4.5em;
	height: 4.5em;
	object-fit: cover;
	border: .1em solid var(--color-text-secondary);
}

/* Reset the comment CSS */
li[itemtype="https://schema.org/Comment"] > article, #comment-mastodon > article {
	border: none;
	border-radius: 0 1em 1em 0 !important;
	padding: .25em;
	box-shadow: none;
	border: .1em solid;
	background: var(--color-bg-secondary);
	margin-bottom: 0;
}

/* Comment Author */
li[itemtype="https://schema.org/Comment"] > article > div[itemprop="author"] {
	margin-bottom: 0;
}

#comments ol {
	list-style: none;
	padding: 0;
}

#comments > h2, #comments > h3 {
	text-align: var(--justify-important);
}

/* Gap between top level comments */
#comments > ol > li {
	margin-bottom: .75em;
}

/* Prevent the "Bob says:" from wrapping when it overlaps with the time element on comments */
#comments h3 {
	display: inline-block;
}

.children > li {
	padding-left: .5em;
	padding-bottom: 0;
}

/* Padding for the comment author's avatar */
#comments .avatar {
	margin-right: 1em;
}

/* Lines for the comments */
.children {
	border-left: .05em solid var(--color-text);
	border-radius: 0;
}

.pingback-favicon {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	display: inline;
}

/* Add a bit of spacing to the "Cancel Reply" link */
#cancel-comment-reply-link {
	padding-left: 1em;
}

#edent-rating-table {
	margin: auto;
	display: table;
	margin-top: .5rem;
	text-align: center;
	clear: both;
}

.edent-rating-stars {
	font-family:'stars';
	font-size: 2em;
	color: var(--color-stars);
	-webkit-text-stroke: .04em var(--color-text);
	line-height: var(--line-height);
	display: block;
}

/* Keywords / hashtags */
a[rel="tag"]::before {
	content: "#";
}

/* Newer and Older links */
a[rel="next"]{
	float: right;
}

a[rel="prev"] {
	float: left;
}

#share-the-love {
	/* Headers of sections */
	font-size: 1.25em;
	text-align: center;
}

p:has(input#submit) {	/* Comment Button */
	text-align: center;
}

#webmention-form #webmention-submit {
	/* Directly target the webmention button */
	display: block;
	margin: auto;
}
/* Remove label */
label[for="webmention-source"] {
	display: none;
}

.grid-posts  {
	list-style: none;
	padding: 0;
	display: inline-flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.grid-posts > * {
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis#combining_flex-grow_and_flex-basis */
	flex: 1 1 0;
}

	.grid-post {
		min-width: 10em;
		text-align: center;
		margin: .25em;
		border: .1em var(--color-text);
		border-style: solid;
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100%;
		overflow: clip;
		justify-content: space-between; 
	}

		.grid-post h3 {
			font-size: 1em;
			padding-top: .5em;
		}

		.grid-post img {
			object-fit: cover;
			height: 9em;
			width: 100%;
			border-radius: 0 1em 0 0;
			display: inline-block;
			outline: solid;
		}
		.grid-post p {
			margin: 0 .25em;
		}
		.grid-post time {
			font-size: .75em;
			margin-top: auto;
		}

.grid-posts-small .grid-post {
	min-width: 8em;
	max-width: 9em;
}

.grid-posts-small img {
	height: auto;
}
.grid-posts-small .edent-rating-stars {
	font-size: 1.5em;
}

#reply-title {
	text-align: var(--justify-important);
}

#searchsubmit {
	margin-top: 0.75em;
}

#subscribe-email input {
	width:100% !important;
}

body > header {
	margin-bottom: .5rem;
	margin-top: .5rem;
	display: grid;
	gap: 0;
	grid-template-areas:
	"icon headline" 
	"icon social";
	grid-auto-flow: row dense;
	grid-auto-columns: 1fr;
	grid-template-columns: auto;
	grid-template-rows: 1fr 1fr;
}

body > header a,
body > header a:visited,
footer a,
footer a:visited {
	display: inline;
	box-sizing: border-box;
	border: none;
	color: var(--color-text);
	text-align: var(--justify-important);
	white-space: normal;
	font-weight: bold;
	text-decoration: none;
}

body > header a:hover,
footer a:hover {
	filter: brightness(125%);
}

body > header [itemprop="headline"] {
	line-height: 1rem;
	font-size: min(max(.75rem, 6vw), 3rem);
	grid-area: headline;
	margin: 0;
	text-align: start;
}

body > header [itemprop="headline"] a {
	vertical-align: text-bottom;
}

#header-avatar {
	grid-area: icon;
	margin-right: 1em;
}

#header-avatar img {
	height: auto;
	width: 6rem;
}

/* Footnotes */
#footnotes > hr::after {
	content: "🐾 Footnotes 🐾";
	color: var(--color-text);
	top: -.8em;
	position: relative;
	background: var(--color-box);
	padding: .5em;
	border: .1em solid var(--color-text);
	border-radius: var(--border-radius);
}

#footnotes {
	background: var(--color-bg-secondary);
	margin-top: 2em;
}

/* WordPress Specific */
.wp-caption-text {
	font-size: .9em;
	padding: .5em;
}
.wp-caption {
	max-width: 100%;
	margin-bottom: 1em;
}

/* Sharing Box */
#hr-share::before {
	content: "❦";
	font-size: 2.5em;
	color: var(--color-fleuron);
	top: -.5em;
	background-color: var(--color-box);
	position: relative;
	line-height: 1em;
	border-radius: 100%;
}
#hr-share{
	margin-top: 1.5em;
}

/* Slideshow Overrides */
.slideshow-window {
	border: none !important;
}

time {
	font-variant-numeric: tabular-nums;
}

#comments time {
	float: right;
}

body > header > aside {
	height: 3rem;
	margin: 0;
	text-align: left;
	grid-area: social;
	width: max-content;
	align-items: flex-end;
	display: flex;
}

body > header > aside > a {
	line-height: 1rem;
	margin-right: .5em;
}

body > header > aside > a > img {
	width: 3rem;
	max-width: 11vw;
	outline: .1rem solid var(--color-text);
}

/* Theme Switcher */
#theme {
	border: solid var(--color-text-secondary);
	padding: .5em;
	background: var(--color-box);
	box-shadow: .5em .5em var(--color-text-secondary);
	text-wrap: nowrap;
	box-sizing: border-box;
	text-align: center;
	max-width: fit-content;
	margin: 0 .5em 1em 0;
	overflow-x: auto;
	min-width: inherit;
}

#single #theme {
	max-width: var(--width-content);
	margin: 0 auto 1em auto;
}

#theme legend {
	border: solid var(--color-text-secondary);
	background: var(--color-box);
	padding: 0 .5em;
	text-align: left;
}

#theme label {
	line-height: initial;
	min-width: 5em;
	font-weight: normal;
	margin-right: .25em;
}

#theme input[name="theme"] {
	width: 0;
	margin: 0;
	padding: 0;
}

/* Bottom Nav Menu */
footer li {
	background: var(--color-text);
	padding: .5em;
	margin: .25em;
	outline: .2ch solid var(--color-bg-secondary);
}
footer li > a {
	color: var(--color-bg-secondary) !important;
}

/* Sharing Buttons */
#edent-share {
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

#edent-share ul {
	padding: 0;
	text-align: center;
	text-wrap: balance;
}
#edent-share li {
	display: inline-block;
}
#edent-share a {
	display: block;
	margin: .5em;
}
#edent-share img {
	width: 3em;
	outline: .2em solid var(--color-text);
	background: var(--color-text);
}

/* Fix Media Buttons */
.mejs-button > button {
	max-width: initial !important;
}

figure.audio {
	padding: 0;
	background: var(--color-bg-secondary);
	margin: 0 auto .5em auto;
	min-width: 15em;
	overflow: clip;
}
figure.audio > figcaption {
	padding: .5em 1em .5em 1em;
	text-align: center;
}
figure.audio > img {
	width: 100%;
	display: block;
	object-fit: cover;
	height: 15em;
	border-radius: 0 1em 0 0 !important;
	border: none;
}
figure.audio > audio {
	border-radius: 0 0 .9em .9em !important;
	border: none;
	margin: 0 auto;
	display: block;
	background: var(--color-bg-secondary);
}

#RomanYear {
	display: block;
	font-weight: bold;
	font-family: serif;
	margin: 1em;
}

/* Calendar Widget */
#edent-calendar-details, #edent-calendar-summary {
	display: inline; 	/* Removes triangle from summary element */
	border: none;
	padding: 0;
	width: auto;
}

#edent-calendars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 0;
	list-style: none;
}

.edent-calendar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 .5em .5em .5em;
	font-size: .9em;
	outline: .2ch solid black;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: 0 0 1em 1em !important;
}

#edent-calendars time {
	outline: .1ch black solid;
	border-radius: 0 1em 0 0 !important;
	background: linear-gradient(to bottom right, #D66 0%, #A00 100%);
	color: white;
	display: block;
	margin-right: .4em;
	margin-left: .4em;
	text-align: center;
}

#edent-calendars ul {
	padding: 0;
}

.edent-calendar > a, .edent-calendar > p {
	text-align: center;
	padding: 1ch .5ex;
	outline: .1ch black solid;
	border-radius: 0 !important;
	background-color: var(--color-brighten);
	margin: 0;
	white-space: pre;
}

/* Fix broken ActivityPub plugin */
.activitypub-remote-reply {
	display: none;
}

/* Social Embeds */
.social-embed {
	all: unset;
	display: block;
}

.social-embed * {
	all: unset;
	display: revert;
}

.social-embed::after {
	all: unset;
}

.social-embed::before {
	all: unset;
}

blockquote:not(*) {
	all: unset;
}

.social-embed a {
	cursor: pointer;
}

blockquote.social-embed {
	box-sizing: border-box;
	border: .5px solid;
	width: 550px;
	max-width: 100%;
	font-family: sans-serif;
	margin: auto;
	margin-bottom: .5em;
	padding: 1em;
	border-radius: .5em;
	background-color: #FFF;
	color: #000;
	display: block;
	white-space: normal;
	overflow: auto;
}

.social-embed-header {
	display: flex;
	justify-content: space-between;
}

.social-embed-user {
	display: flex;
	position: relative;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.social-embed-avatar {
	width: 3em;
	height: 3em;
	margin-right: .5em;
}

.social-embed-avatar-circle {
	border-radius: 50%;
}

.social-embed-avatar-square {
	border-radius: 5%;
}

.social-embed-user-names-name {
	display: flex;
	align-items: center;
	font-weight: bold;
	margin: 0;
}

.social-embed-text {
	margin-top: .5em;
}

.social-embed-footer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.social-embed-logo {
	width: 3em;
}

.social-embed-hr {
	border: .1px solid;
	margin: .5em 0 .5em 0;
}

.social-embed-meta {
	text-decoration: none !important;
	color: unset !important;
}

.social-embed-reply {
	display: block;
}

.social-embed-text a, .social-embed-footer time {
	color: blue;
	text-decoration: underline;
}

.social-embed-media-link {
	flex-grow: 1;
	width: 50%;
}

.social-embed-media, .social-embed-video {
	padding: .1em;
	width: 100%;
	border-radius: .5em;
	max-width: 100%;
	object-fit: cover;
}

.social-embed-reply {
	font-size: .75em;
	display: block;
}

.social-embed-meter {
	width: 100%;
	background: #0005;
}

.social-embed-card {
	text-decoration: none !important;
	color: unset !important;
	border: .5px solid;
	display: block;
	font-size: .85em;
	padding: .5em;
	border-radius: .5em;
}

.social-embed-badge {
	height: 1em;
	vertical-align: text-top;
}

.social-embed-text p {
	margin-bottom: 1em;
}

.social-embed-emoji {
	display: inline;
	width: 1em;
}

/* Text meant only for screen readers. */
/* https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Table of Contents nav */
nav[role="doc-toc"] {
	text-align: left;
	font-size: 1em;
}
nav[role="doc-toc"] > * {
	list-style: none;
	padding-inline: 0;
}

/* Reviews */
#review-links {
	clear:both;
}

#review-list {
	clear: both;
	list-style: none;
	padding-inline-start: 0;
}

#review-list img {
	width: 1.5em;
	display: inline;
	vertical-align: middle;
	padding-right: .5em;
}

/* Page Transition Animations */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(page) {
		animation-duration: 0s;
	}
}

@view-transition {
	navigation: auto;
}

@keyframes slide-in {
	from {
		translate: 100vw 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes rotate-out {
	0% {
		transform: rotateY(0deg)
	}
	100% {
		transform: rotateY(90deg)
	}
}

@keyframes rotate-in {
	0% {
		transform: rotateY(-90deg)
	}
	50% {
		transform: rotateY(-90deg)
	}
	100% {
		transform: rotateY(0deg)
	}
}

html {
	view-transition-name: page;
}

::view-transition-old(page) {
    animation-name: rotate-out;
    animation-duration: 1s;
}

::view-transition-new(page) {
    animation-name: rotate-in;
	animation-duration: 1s;
}

::view-transition {
	background: black;
}