/* FONTS */

/* eb-garamond-regular - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/eb-garamond-v30-latin-ext-regular.woff2') format('woff2');
}

/* eb-garamond-italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/eb-garamond-v30-latin-ext-italic.woff2') format('woff2');
}

/* eb-garamond-500 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/eb-garamond-v30-latin-ext-500.woff2') format('woff2');
}

/* eb-garamond-500italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 500;
	src: url('fonts/eb-garamond-v30-latin-ext-500italic.woff2') format('woff2');
}

/* eb-garamond-600 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/eb-garamond-v30-latin-ext-600.woff2') format('woff2');
}

/* eb-garamond-600italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 600;
	src: url('fonts/eb-garamond-v30-latin-ext-600italic.woff2') format('woff2');
}

/* eb-garamond-700 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/eb-garamond-v30-latin-ext-700.woff2') format('woff2');
}

/* eb-garamond-700italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 700;
	src: url('fonts/eb-garamond-v30-latin-ext-700italic.woff2') format('woff2');
}

/* eb-garamond-800 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/eb-garamond-v30-latin-ext-800.woff2') format('woff2');
}

/* eb-garamond-800italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 800;
	src: url('fonts/eb-garamond-v30-latin-ext-800italic.woff2') format('woff2');
}



/* crimson-pro-200 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 200;
	src: url('fonts/crimson-pro-v24-latin-ext-200.woff2') format('woff2');
}

/* crimson-pro-200italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 200;
	src: url('fonts/crimson-pro-v24-latin-ext-200italic.woff2') format('woff2');
}

/* crimson-pro-300 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/crimson-pro-v24-latin-ext-300.woff2') format('woff2');
}

/* crimson-pro-300italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 300;
	src: url('fonts/crimson-pro-v24-latin-ext-300italic.woff2') format('woff2');
}

/* crimson-pro-regular - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/crimson-pro-v24-latin-ext-regular.woff2') format('woff2');
}

/* crimson-pro-italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/crimson-pro-v24-latin-ext-italic.woff2') format('woff2');
}

/* crimson-pro-500 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/crimson-pro-v24-latin-ext-500.woff2') format('woff2');
}

/* crimson-pro-500italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 500;
	src: url('fonts/crimson-pro-v24-latin-ext-500italic.woff2') format('woff2');
}

/* crimson-pro-600 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/crimson-pro-v24-latin-ext-600.woff2') format('woff2');
}

/* crimson-pro-600italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 600;
	src: url('fonts/crimson-pro-v24-latin-ext-600italic.woff2') format('woff2');
}

/* crimson-pro-700 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/crimson-pro-v24-latin-ext-700.woff2') format('woff2');
}

/* crimson-pro-700italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 700;
	src: url('fonts/crimson-pro-v24-latin-ext-700italic.woff2') format('woff2');
}

/* crimson-pro-800 - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/crimson-pro-v24-latin-ext-800.woff2') format('woff2');
}

/* crimson-pro-800italic - latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 800;
	src: url('fonts/crimson-pro-v24-latin-ext-800italic.woff2') format('woff2');
}


/* noto-sans-runic-regular - runic */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans Runic';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/noto-sans-runic-v17-runic-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Noto Emoji';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/noto-emoji-v53-emoji-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Xenon';
	src: url('fonts/Monaspace_Xenon_Variable.woff2') format('woff2');
	font-weight: 100 900;  /* Weight range */
	font-stretch: 75% 125%;  /* Width range */
	font-style: normal;
}


:root {
	--bg-color: #f4f4f4;
	--content-bg: #f8f8f8;
	--text-color: #000000;
	--text-divider: #00000020;
	--menu-bg: #f8f8f8;
	--menu-border: #00000010;
	--underline-hover: #000000a0;
	--underline-idle:  #00000030;
	--bright-color: #ffffff;
	--aurora: 0%;
	--img-sepia: 0;
}

/* Theme definitions */
[data-theme="light"] {
	--bg-color: #f4f4f4;
	--content-bg: #f8f8f8;
	--text-color: #000000;
	--text-divider: #00000020;
	--menu-bg: #f8f8f8;
	--menu-border: #00000010;
	--underline-hover: #000000a0;
	--underline-idle:  #00000030;
	--bright-color: #ffffff;
	--aurora: 0%;
	--img-sepia: 0;
}

[data-theme="dark"] {
	--bg-color: #161616;
	--content-bg: #1a1a1a;
	--text-color: #ffffff;
	--text-divider: #ffffff30;
	--menu-bg: #1a1a1aff;
	--menu-border: #ffffff11;
	--underline-hover: #ffffffa0;
	--underline-idle:  #ffffff30;
	--bright-color: #ffffff;
	--aurora: 60%;
	--img-sepia: 0;
}

[data-theme="paper"] {
	--bg-color: #ead7b3;
	--content-bg: #eedcb8;
	--text-color: #2c1810;
	--text-divider: #2c181020;
	--menu-bg: #eedcb8;
	--menu-border: #2c181010;
	--underline-hover: #2c1810a0;
	--underline-idle:  #2c181030;
	--bright-color: #eedcb8;
	--aurora: 0%;
	--img-sepia: 0.9;
}

.theme-switcher {
	margin-top: auto;
	margin-bottom: auto;
	cursor: pointer;
	font-size: 16px;
	padding: 10px;
	transition: all 0.3s ease;
	opacity: 70%;
	font-family: "Noto Emoji", sans-serif;
}

.theme-switcher:hover {
	opacity: 100%;
}

html {
	overscroll-behavior: none;
}
body {
	background: var(--content-bg);
	color: var(--text-color);
	margin: 0;
	min-height: 100vh;
	font-family: 'Crimson Pro', 'EB Garamond', 'Cormorant Garamond', 'Times', 'Times New Roman', 'Segoe UI Historic', 'Noto Sans Runic', serif;
	font-size: 20px;
}
p {
}
a {
	color: var(--text-color);
	text-decoration: underline solid 1px var(--underline-idle);
	transition-duration: 0.2s;
}
a:hover {
	text-decoration: underline solid 1px var(--underline-hover);
}
h1 {
	font-family: 'EB Garamond', 'Crimson Pro', serif;
	font-size: 38px;
	border-bottom: var(--text-divider) dashed 1px;
}
h2 {
	font-family: 'EB Garamond', 'Crimson Pro', serif;
}
h3 {
	font-family: 'EB Garamond', 'Crimson Pro', serif;
}
h4 {
	font-family: 'EB Garamond', 'Crimson Pro', serif;
}
h5 {
	font-family: 'EB Garamond', 'Crimson Pro', serif;
}
::selection {
	background: var(--text-color);
	color: var(--content-bg);
}
blockquote {
	margin-left: 0;
	padding-left: 40px;
	border-left: solid 1px var(--text-color);
}
code {
	font-family: "Xenon", monospace;
	font-size: 16px;
}
code:not(pre code) {
	border: solid 1px var(--text-divider);
	background: var(--bg-color);
	border-radius: 4px;
	padding: 2px 3px;
	margin: 0 -1px;
}
pre {
	padding: 25.9px;
	border: 1px solid var(--text-divider);
	border-radius: 5px;
	background: var(--bg-color);
	overflow-x: auto;
}
hr {
	border: solid 0.5px var(--text-divider);
	border-bottom: 0;
}
.flourish-table {
}
.flourish {
	opacity: 40%;
	width: 150px;
	max-width: 33vw;
	height: max-content;
	line-height: 0;
}
spoiler:hover {
	opacity: 100%;
	filter: blur(0px);
	background: none;
}
spoiler {
	filter: blur(3px);
	transition-duration: 7s;
	opacity: 100%;
}
strong {
	font-weight: 600;
}


.top-bar {
	border-bottom: var(--menu-border) solid 1px;
	backdrop-filter: blur(10px);
	margin: 0px;
	padding: 0;
	width: auto;
	background: var(--menu-bg);
}
.top-menu {
	padding: 0 20px;
	display: flex;
	max-width: 1000px;
	margin:auto;
}
.menu-title {
	font-family: 'EB Garamond';
	font-size: 24px;
	margin: 14px 0;
	text-decoration: none;
	font-weight: 600;
}
.menu-title:hover {
	text-decoration: none;            
}
.menu-item {
	font-size: 18px;
	transition-duration: 0.1s;
	text-decoration: underline var(--underline-idle) solid 1px;
	margin-right: 25px;
}
.menu-item:hover {
	padding-bottom: 1px;
	margin-top: -1px;
	text-decoration: underline var(--underline-hover) solid 1px;
}
.menu-buttons-div {
	display: flex;
	margin-left: auto;
	margin-top: auto;
	margin-bottom: auto;
	padding-bottom: 1px;
}

.content-section {
	background: var(--content-bg);
	overflow: hidden;
	border-top: var(--menu-border) solid 1px;
	padding-bottom: 40px;
	min-height: 50vh;
}
.content-container {
	max-width: 1000px;
	margin: auto;
	padding: 20px;
	font-weight: 300;
}
.article-link {
	font-size: 20px;
	margin: 0;
	display: flex;
}

noto {
	font-family: 'Noto Emoji', 'Crimson Pro', sans-serif;
	font-weight: 1000;
	font-size: 0.8em;
	margin-top: 2.5px;
	margin-right: 2px;
	min-width: 23px;
	text-align: center;
}

body {
	/transition-duration: 0.2s;
}

.article-heading {
	min-height: max-content;
	width: 1000px;
}


#frontpage-quote {
	margin: 20px 30px;
}

.title-section {
	background: var(--bg-color);
}
.title-container {
	height: auto;
	max-width: 1200px;
	margin: auto;
	padding: 30px;
	padding-top: 35vh;
}
.title-background {
	color: var(--bright-color);
}

.article-title {
	font-size: 48px;
	border: 0;
	margin-bottom: 5px;
}
.date {
	margin-top: 0;
}
.tag-block {
	display: inline-block;
	width: max-content;
	padding: 2px 5px 3px 5px;
	margin-right: 3px;
	border-radius: 3px;
	text-decoration: none;
	outline: solid 1px var(--text-divider);
	background: #8880;
	backdrop-filter: blur(5px);
}
.tag-block:hover {
	text-decoration: none;
	background: var(--content-bg);
}
.title-background .tag-block {
	outline: solid 1px #fff3;
	background: #fff1;
	color: var(--bright-color);
}
.title-background .tag-block:hover {
	background: #fff2;
}

.audio-reading {
	width: 100%;
	border-radius: 5px;
	filter: sepia(var(--img-sepia));
}

.mini-lists {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 45px;
}
.mini-list-block {
	flex: 1 1 calc(33.333% - 14px);
	min-width: 300px;	
}
.view-all {
	display: block;
	margin-top: 10px;
}
.tag-list-title {
	margin-bottom: 6px;
}

.heading-anchor {
	opacity: 20%;
	transition-duration: 0.2s;
	display: inline-block;
	text-decoration: none;
	font-size: 0.7em;
}
.heading-anchor:hover {
	text-decoration: none;
	opacity: 70%;
}
.link-icon {
	margin-bottom: -1px;
	width: 16px;
	display: block;
	vertical-align: middle;
}

.webbutton {
	margin: 5px;
	height: 31px;
	width: 88px;
	image-rendering: pixelated;
}

sup {
  margin-top: -10px;
  display: inline-block;
}
.footnote-ref {
	opacity: 60%;
}
.footnote-backref {
	font-size: 0.8em;
	opacity: 70%;
	text-decoration: none;
}
.footnote-backref:hover {
	opacity: 100%;
	text-decoration: none;
}
.footnote-tooltip {
	max-width: 400px;
	background-color: 8881;
	backdrop-filter: blur(5px);
	color: var(--text-color);
	border: 1px solid var(--text-divider);
	border-radius: 4px;
	box-shadow: 0 0px 8px rgba(0,0,0,0.15);
	padding: 8px 8px;
	z-index: 1000;
	overflow-wrap: break-word;
}
.footnote-tooltip p {
	margin: 0;
}

.post-snippet {
	text-decoration: none;	
}
.post-snippet:hover {
	text-decoration: none;
}
.post-snippet .musing-item-title {
	margin-top: 10px;
	color: var(--text-color);
	text-decoration: underline solid 1px var(--underline-idle);
	transition-duration: 0.2s;
}
.post-snippet:hover .musing-item-title {
	text-decoration: underline solid 1px var(--underline-hover);
}
.musing-item-date {
	font-family: 'Crimson Pro', 'EB Garamond', 'Cormorant Garamond', 'Times', 'Times New Roman', serif;
	font-size: 19px;
	opacity: 80%;
}
.musing-item-date:hover {
}
.deemphasis {
	opacity: 60%;
}

img {
	width: 100%;
}
.default-img {
	width: calc(100% + 40px);
	max-width: calc(100% + 40px);
	margin: 0 -20px;
	border-radius: 4px;
}
img {
	filter: sepia(var(--img-sepia));
	transition-duration: 0.4s;
}
img:hover {
	filter: sepia(0);
}

@media only screen and (max-width: 659px) {
	.mini-list-block {
		flex: 1 1 calc(100%);
		min-width: 0px;
}
}
@media only screen and (max-width: 1045px) {
	.default-img {
		border-radius: 0px;
	}
	.content-container {
		max-width: 100%;
	}
}