/************************************************
	Rebellion
	Author: Justin Cox
	Website: https://justincox.com/
	Acknowledgments:
		Attila by Peter Amende (https://peteramende.de)
		Royce by Just Good Themes (https://justgoodthemes.com/)
		ChatGPT
************************************************/

/************************************************
	Fonts
************************************************/

/** Font: Womprat ******************************/

@font-face {
	font-family: 'Womprat';
	src: url('../fonts/Womprat.woff2') format('woff2'),
		 url('../fonts/Womprat.woff') format('woff'),
		 url('../assets/fonts/Womprat.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Womprat Aurebesh';
	src: url('../fonts/Womprat-Aurebesh.woff2') format('woff2'),
		 url('../fonts/Womprat-Aurebesh.woff') format('woff'),
		 url('../fonts/Womprat-Aurebesh.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/** Font: Kanit ********************************/

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-100italic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-200italic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/kanit-v15-latin-900italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/** Font: Kode Mono ****************************/

@font-face {
  font-family: 'Kode Mono';
  src: url('../fonts/kode-mono-v1-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kode Mono';
  src: url('../fonts/kode-mono-v1-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kode Mono';
  src: url('../fonts/kode-mono-v1-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kode Mono';
  src: url('../fonts/kode-mono-v1-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/** Spectral ***********************************/

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-200.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-200italic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-300italic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-500italic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-600italic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-700italic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Spectral';
	src: url('../fonts/spectral-v13-latin-800italic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
}


/************************************************
	Root Variables
************************************************/

:root {
	
	/** Colors **********************************/
	--color-ghost-primary: var(--ghost-accent-color);
	
	--color-email: #2997EE;
	--color-mastodon: #6364FF;
	--color-RSS: #EE802f;
	--color-search: #E1398F;
	--color-paid: #EE802f;
	--color-member: #6364FF;
	--color-free: #4B9843;
	
	/** Theme Specific Colors *******************/
	
	--color-background: #222426;
	--color-background-alt: #1D1F20;
	--color-background-contrast: #3B3D40;
	--color-background-overlay: rgba(9, 10, 13, 0.9);
	--color-content-heading: #FFFFFF;
	--color-content-body: #E1E3E6;
	--color-content-alt: #909499;
	--color-highlight: #FFC336;
	
	[data-theme="light"] {
		--color-background: #FFFFFF;
		--color-background-alt: #F4F4F5;
		--color-background-contrast: #E1E1E2;
		--color-background-overlay: rgba(255, 255, 255, 0.9);
		--color-content-heading: #222426;
		--color-content-body: #333333;
		--color-content-alt: #57595D;
		--color-highlight: #FFA233;
	}
	
	/** Fonts ***********************************/
	--font-site-title: 'Womprat', sans-serif;
	--font-site-title-alt: 'Womprat Aurebesh', sans-serif;
	--font-mono: 'Kode Mono', monospaced;
	
	/** Sizes ***********************************/
	--size-300: 3rem;
	--size-250: 2.5rem;
	--size-200: 2rem;
	--size-175: 1.75rem;
	--size-150: 1.5rem;
	--size-125: 1.25rem;
	--size-110: 1.1rem;
	--size-100: 1rem;
	--size-90: .9rem;
	--size-80: .8rem;
	
	/** Font Weights ****************************/
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
	--font-weight-heavy: 900;
}

::selection {
	background-color: var(--color-ghost-primary);
}

/************************************************
	Universal Styles
************************************************/

html {
	font-size: 100%;
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	font-size: var(--size-100);
	line-height: var(--size-175);
	font-weight: var(--font-weight-regular);
	color: var(--color-content-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background: var(--color-background);
	margin: 0;
	padding: 0;
}

button,
input,
select,
textarea {
	transition: all ease-out 0.2s;
}

hr {
	border: none;
	height: .5px;
	background-color: var(--color-ghost-primary);
	width: 10%;
	margin: 4rem auto;
}

a:not([class]),
.subscribe-box p a {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
	box-shadow: inset 0 -2px 0 var(--color-ghost-primary);
	transition: all ease-out 0.1s;
}

a:not([class]):focus,
a:not([class]):hover,
.subscribe-box p a:focus,
.subscribe-box p a:hover {
	box-shadow: inset 0 -3px 0 var(--color-ghost-primary);
	color: var(--color-ghost-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-headline);
}

h1 {
	font-size: var(--size-300);
	line-height: var(--size-300);
}

h2 {
	font-size: var(--size-250);
	margin-top: 4rem;
	position: relative; 
	padding-top: 1rem; 
	line-height: var(--size-250);
}

h3 {
	font-size: var(--size-200);
	margin-top: 4rem;
}

h4 {
	font-size: var(--size-175);	
}

h5 {
	font-size: var(--size-150);
}

h6 {
	font-size: var(--size-125);
}

table {
	width: 100%;
}

input,
select,
textarea {
	transition: all ease-out 0.2s;
}

.post h2::before {
	content: ""; 
	display: block;
	width: 10%; 
	height: 5px; 
	background-color: var(--color-ghost-primary); 
	position: absolute;
	top: 0; 
	left: 0; 
}

.featured h2::before {
	background-color: var(--color-highlight); 
}

.dopetext {
	text-shadow: 
		-1px -1px 0 #000000,
		 1px -1px 0 #000000,
		-1px  1px 0 #000000,
		 1px  1px 0 #000000,
		1px 1px 1px var(--color-content-body),
		1px 2px 1px var(--color-content-body),
		1px 3px 1px var(--color-content-body),
		1px 4px 1px var(--color-content-body),
		1px 5px 1px var(--color-content-body),
		1px 6px 1px var(--color-content-body);
}

.hidden {
	display: none;
}

/************************************************
	Site Header and Main Navigation
************************************************/

.site-header {
	margin: 0;
	padding: 0;
	display: block;
}

.header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
}

.logo, .main-nav {
	flex: 1 1 auto;
}


/** Logo *************************************/

.logo {
	flex: 0 0 auto;
	font-family: var(--font-site-title);
	font-size: var(--size-300);
	white-space: nowrap;
}

.logo a {
	text-decoration: none;
	color: var(--color-highlight);
}

.logo a:hover,
.logo a:focus {
	color: var(--color-ghost-primary);
}

.logo.aurebesh {
	font-family: var(--font-site-title-alt);
}

/** Main Navigation **************************/

.main-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	list-style: none;
	margin-left: auto; 
	margin-right: 10px;
	padding-right: 5px;
}

.main-nav li {
	margin-left: 10px; 
	font-family: var(--font-headline);
	display: flex; 
	align-items: center; 
}

.main-nav li a {
	text-decoration: none;
	color: var(--color-content-heading);
	display: flex; 
	align-items: center; 
}

.main-nav li a span {
	margin-left: 5px;
}

.main-nav li a svg {
	fill: var(--color-content-body);
	vertical-align: middle; 
	width: 1em; 
	height: 1em; 
}

.main-nav li.nav-search {
	cursor: pointer;
}

.nav-mastodon a.navigation-link {
	color: var(--color-mastodon);
}

.nav-mastodon a.navigation-link svg {
	fill: var(--color-mastodon);
}

.nav-rss a.navigation-link {
	color: var(--color-RSS);
}

.nav-rss a.navigation-link svg {
	fill: var(--color-RSS);
}

.nav-search a.navigation-link {
	color: var(--color-search);
}

.nav-search a.navigation-link svg {
	fill: var(--color-search);
}

.main-nav li a:hover,
.main-nav li a:focus {
	color: var(--color-ghost-primary);
}

.main-nav li:hover svg,
.main-nav li:focus svg {
	fill: var(--color-ghost-primary);
}

/** Dropdown ***********************************/

.nav-menu-button {
	position: relative;
	cursor: pointer;
}

.dropdown-content {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: var(--color-background-alt);
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	width: 150px;
	padding: 0;
	margin: 0;
	text-align: left;
}

.nav-menu-button:hover .dropdown-content {
	display: block;
}

.dropdown-content, .dropdown-content li {
	padding: 0;
	margin: 0;
}

.dropdown-content li {
	width: 100%;
	margin: 0;
	padding: 0;
}

.dropdown-content a {
	text-decoration: none;
	padding: 8px;
	background-color: var(--color-background-contrast);
	color: var(--color-content-body);
	display: block;
	width: 100%;
}

.dropdown-content a:hover {
	background-color: var(--color-background-alt);
	color: var(--color-ghost-primary);
}

.dropdown-content li .dropdown-link svg {
	fill: var(--color-content-body);
}

.dropdown-content li:hover .dropdown-link svg {
	fill: var(--color-ghost-primary);
}

/** Theme Toggle *****************************/

#theme-toggle {
	font-family: "Womprat", sans-serif;
	font-size: var(--size-150);
}

@media (max-width: 768px) {

	#theme-toggle {
		font-size: var(--size-200);
	}
	
}

/** Responsive Adjustments *******************/

@media (max-width: 768px) {
	
	.header-wrapper {
		flex-direction: column;
		align-items: center;
		padding: 0;
		margin: 20px 0;
	}
	
	.logo, .main-nav {
		width: 100%;
		text-align: center;
		padding: 0; 
		margin: 0 auto;
	}
	
	.logo {
		order: -1;
		align-self: center; 
		margin-bottom: 20px;
	}
	
	.main-nav {
		justify-content: center; 
		padding: 0; 
		margin: 0; 
		font-size: var(--size-150);
	}
	
	.main-nav li {
		margin-right: 20px;
	}
	
	.main-nav li:last-child {
		margin-right: 0;
	}

	.navigation-link span,
	.nav-theme {
		display: none;
	}
	
	.dropdown-content {
		width: 200px;
	}
	
}

/************************************************
	Site Content
************************************************/

.site-content {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
}

.post-teaser {
	position: relative;
}

.post-teaser:before {
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--color-background) 100%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, var(--color-background) 100%);
	bottom: 0;
	content: "";
	height: 90%;
	left: 0;
	position: absolute;
	right: 0;
}

.subscribe-box {
	background: var(--color-background-contrast);
	border: 1px solid var(--color-ghost-primary);
	padding: 2em;
}

.subscribe-box h2 {
	margin-top: 1rem;
}


/************************************************
	Site Footer and Secondary Navigation
************************************************/

.site-footer {
	margin: 6em 0 0 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: var(--size-80);
	color: var(--color-content-alt);
	font-family: var(--font-headline);
}

.nav-copy {
	font-weight: var(--font-weight-bold);
	display: block;
}

/** Secondary Navigation *********************/

.alt-nav {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.alt-nav li {
	margin-right: 20px;
}

.alt-nav li:last-child {
	margin-right: 0;
}

.alt-nav li a {
	text-decoration: none;
	color: var(--color-content-alt);
	display: flex; 
	align-items: center; 
}

.alt-nav li a:hover,
.alt-nav li a:focus {
	color: var(--color-ghost-primary);
}

/** Responsive Adjustments *******************/

@media (max-width: 768px) {
	.alt-nav {
		justify-content: center;
		order: 1;
	}
	
	.alt-nav li {
		margin-right: 10px;
		margin-bottom: 0.5rem;
	}

	.alt-nav li:last-child {
		margin-bottom: 0;
	}
	
	.nav-copy {
		order: 2;
		margin-bottom: 1rem;
	}
}

.ghost-credit {
	
}


/************************************************
	Post Loop
************************************************/

.post-box {
	display: flex;
	align-items: flex-start;
	margin-top: 4rem;
	position: relative;
	align-items: center;
	gap: 20px;
}

.post-image-container {
	flex: 0 0 100px; 
	height: 100px; 
	overflow: hidden;
	border-radius: 5px; 
}

.post-featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.post-box:hover .post-featured-image {
	filter: none;
}

@media (max-width: 640px) {
	
	.post-image-container {
		display: none;
	}
	
}

.post-loop-content {
	flex: 1; 
}

.post-box:last-of-type {
	margin-bottom: 4rem;
}

.post-box .post-title {
	margin-bottom: .5rem;
}

.post-box .post-title a {
	text-decoration: none;
}

@media (min-width: 1000px) {

	.featured .post-box::before {
		content: "✪";
		position: absolute;
		left: -35px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-highlight);
		font-size: var(--size-200);
		font-family: var(--font-site-title);
	}
	
}

.post-box span.post-meta {
	font-family: var(--font-headline);
	color: var(--color-content-alt);
	font-size: var(--size-90);
}

.post-box span.post-meta time {
	
}

.post-box span.post-meta a.post-meta-tag {
	color: var(--color-content-alt);
	text-decoration: none;
}

.post-box span.post-meta a.post-meta-tag-featured,
.featured .post-box .post-title a:hover,
.featured .post-box .post-title a:focus {
	color: var(--color-highlight);
	text-decoration: none;
}

.post-box span.post-meta a.post-meta-tag:hover,
.post-box span.post-meta a.post-meta-tag:focus,
.post-box span.post-meta a.post-meta-tag-featured:hover,
.post-box span.post-meta a.post-meta-tag-featured:focus {
	color: var(--color-ghost-primary);
	text-decoration: none;
}

.post-label {
}

.post-label.free {
	color: var(--color-free);
}

.post-label.member {
	color: var(--color-member);
}

.post-label.paid {
	color: var(--color-paid);
}

.post-label::before {
	font-family: var(--font-site-title); 
	content: "󼀃 ";
}

.post-label::after {
	font-family: var(--font-site-title);
	content: " 󼀄";
}

.post-box p.post-excerpt {
	margin-top: 0;
}


/************************************************
	Pagination
************************************************/

.pagination {
	position: relative;
	margin: 0;
	font-family: var(--font-headline);
}

.pagination .pagination-box {
	padding-top: calc(2rem + 1vw);
	padding-bottom: calc(2rem + 1vw);
}

.pagination .pagination-box:after {
	clear: both;
	content: '';
	display: table;
}

.pagination a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	margin: -1px 0;
	padding: 0.5rem 2rem;
	z-index: 100;
	border: 1px solid var(--color-background-contrast);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: var(--color-content-alt);
	transition: all ease 0.2s;
	box-sizing: border-box;
}

.pagination-next:before {
	content: "󰀭";
	margin-right: 10px;
	font-family: var(--font-site-title);
	font-size: var(--size-200);
}

.pagination-prev:after {
	content: "󰀮";
	margin-left: 10px;
	font-family: var(--font-site-title);
	font-size: var(--size-200);
}

.pagination a:focus,
.pagination a:hover,
.pagination a:focus:after,
.pagination a:hover:before {
	color: var(--color-content-body);
	border-color: var(--color-ghost-primary);
}

.pagination a:hover svg {
	fill: var(--color-content-body);
}

.pagination .pagination-prev {
	float: right;
	padding-right: 1.5rem;
}

.pagination .pagination-next {
	float: left;
	padding-left: 1.5rem;
}

.pagination .pagination-label {
	position: relative;
	top: -1px;
	display: inline-block;
}

.pagination .pagination-info {
	position: absolute;
	width: 100%;
	height: 4rem;
	left: 0;
	z-index: 50;
	display: block;
	text-align: center;
	color: var(--color-content-alt);
}

.extra-pagination {
	display: none;
}

.paged .extra-pagination {
	display: block;
}

@media (max-width: 640px) {
	
	.pagination-label {
		display: none !important;
	}
	
	.pagination a {
		border: 0 !important;
	}
	
}


/************************************************
	Post and Page Content
************************************************/

/** Header and Title **************************/

.post-header {
	margin-top: 20px;
}

.post-kicker {
	font-family: var(--font-headline);
}

.post-kicker a {
	color: var(--color-ghost-primary);
	text-decoration: none;
}

.post-kicker.featured a {
	color: var(--color-highlight);
	text-decoration: none;
}

.post-kicker a:hover,
.post-kicker a:focus,
.post-kicker.featured a:hover,
.post-kicker.featured a:focus {
	color: var(--color-content-body);
}

.post-title {
	margin: .5rem 0 2rem 0;
}

.post-title,
.post-title a {
	color: var(--color-content-heading);
	text-decoration: none;
}

.post-title a:hover,
.post-title a:focus {
	color: var(--color-ghost-primary);
}

/** Post Meta Details ************************/

.post-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: var(--font-headline);
}

@media only screen and (max-width: 640px) {
	
	.post-meta {
		margin-bottom: .5rem;
	}
	
}

.post-meta-author-avatar {
	margin: 0;
	padding: 0;
	flex: 0 0 auto; 
	display: flex;
	align-items: center;
	justify-content: center; 
}

.post-meta-author-avatar figure,
.post-meta-author-avatar figure img {
	margin: 0;
	padding: 0;
	width: auto;
	height: 48px;
	display: block;
}

.avatar img {
	width: auto;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-content-alt);
	margin: 0;
}

.post-meta-text {
	display: flex;
	flex-direction: column; 
}

.date-reading-time {
	display: flex;
	align-items: center;
	gap: 5px;
}

.post-meta-text a {
	white-space: nowrap;
}

.post-meta-author, 
.post-meta-publish-date {
	margin-top: auto;
	margin-bottom: auto;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.post-meta-author {
	font-weight: var(--font-weight-bold);
	padding-bottom: 0;
}

.post-meta-author,
.post-meta-author a,
.post-meta-publish-date,
.post-meta-publish-date a,
.reading-time {
	color: var(--color-content-alt);
	text-decoration: none;
}

.post-meta-author a:hover,
.post-meta-author a:focus,
.post-meta-publish-date a:hover,
.post-meta-publish-date a:focus {
	color: var(--color-ghost-primary);
}

.post-meta-publish-date,
.reading-time {
	font-size: var(--size-90); 
	color: var(--color-content-alt);
}

/** Post Progress Bar ************************/

.reading-progress {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 5px;
  background: var(--color-background-alt);
  -webkit-appearance: none;
	 -moz-appearance: none;
		  appearance: none;
}

.reading-progress::-webkit-progress-bar {
  background-color: transparent;
}

.reading-progress::-webkit-progress-value {
  background: var(--color-ghost-primary);
}

/** Post Share Buttons *************************/

.post-share {
	position: relative;
	max-width: 33.33333%;
	float: right;
	display: flex;
	font-family: var(--font-headline);
}

@media only screen and (max-width: 640px) {
	.post-share {
		max-width: none;
		float: none;
		margin-bottom: 2rem;
	}
}

.post-share a {
	position: relative;
	display: inline-block;
	width: var(--size-200);
	height: var(--size-200);
	margin-right: 0.5em;
	text-align: center;
	text-decoration: none;
	border-radius: 50%;
	transition: all ease 0.2s;
	overflow: hidden;
}

.post-share a:first-of-type {
	margin-left: 15px;
}

.post-share a:focus,
.post-share a:hover {
	opacity: 0.92;
}

.post-share a:last-child {
	margin-right: 0;
}

.post-share a svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: auto;
	fill: var(--color-content-heading);
}

.post-share a svg:before {
	width: auto;
	height: auto;
}

.post-share a svg:hover {
	fill: var(--color-background-alt);
}

.post-share .twitter {
	background-color: #3EA9DD;
}

.post-share .facebook {
	background-color: #3C5A98;
}

.post-share .linkedin {
	background-color: #0E76A8;
}

.post-share .mastodon {
	background-color: var(--color-mastodon);
	cursor: pointer;
}

.post-share .email {
	background-color: var(--color-email);
}

/** Post Tags **********************************/

.post-tags {
	position: relative;
	max-width: 66.66666%;
	float: left;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-headline);
	margin-right: 5px;
}

@media only screen and (max-width: 640px) {
	.post-tags {
		max-width: none;
		float: none;
		margin-bottom: 2rem;
	}
}

.post-tags a {
	display: inline-block;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	padding: 0 1.5rem;
	background-color: var(--color-background-alt);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: var(--color-content-heading);
	border: 2px solid var(--color-ghost-primary);
	transition: all ease 0.2s;
	box-sizing: border-box;
	white-space: nowrap;
}

.post-tags a:first-of-type {
	margin-left: 0.5em;
}

.post-tags a:focus,
.post-tags a:hover {
	color: var(--color-background-alt);
	background-color: var(--color-ghost-primary);
}

/** Post Comments ******************************/

.post-comments div#ghost-comments-root {
	margin-top: 8rem;
	position: relative
}

/** Related Posts ******************************/

.related-posts {
	margin-top: 8rem;
	position: relative
}

/** Post Navigation ****************************/

.post-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 8rem;
	position: relative; 
}

.post-nav a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	width: 49%; 
}

.post-nav a:hover h3,
.post-nav a:focus h3,
.post-nav-next:hover:before,
.post-nav-prev:hover:after {
	color: var(--color-ghost-primary);
}

.post-nav-next {
	justify-content: flex-end; 
	padding-right: 1rem;
}

.post-nav-prev {
	justify-content: flex-start;
	padding-left: 1rem;
}

@media (min-width: 640px) {

	.post-nav-next:before {
		content: "󰀭";
		margin-right: 10px;
		font-family: var(--font-site-title);
		font-size: var(--size-300);
	}
	
	.post-nav-prev:after {
		content: "󰀮";
		margin-left: 10px;
		font-family: var(--font-site-title);
		font-size: var(--size-300);
	}
	
}

.post-nav-next .post-nav-teaser, 
.post-nav-prev .post-nav-teaser {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.post-nav-next .post-nav-teaser {
	text-align: right;
}

.post-nav-prev .post-nav-teaser {
	text-align: left;
}

.post-nav-title, .post-nav-excerpt, 
.post-nav-meta {
	margin: 0;
}

.post-nav-meta {
	font-size: var(--size-90);
	font-family: var(--font-headline);
	color: var(--color-content-alt);
}

.post-nav::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0.5px;
	background-color: var(--color-content-alt); /* Adjust color as needed */
}

.clear {
	clear: both;
}





/** Post Footer ********************************/

.post-footer {
	margin: 2rem 0;
}


/************************************************
	Ghost Card and Content Styles
************************************************/

.kg-width-wide, .kg-width-full {
	left: 50%;
	right: 50%; 
	transform: translateX(-50%);
	position: relative;
}

.kg-width-wide {
	width: calc(100vw - 100px);
	max-width: 1000px !important;
	margin-left: auto;
	margin-right: auto;
}

.kg-width-full {
	width: 100vw;
	max-width: 1750px !important;
	margin-left: auto;
	margin-right: auto;
}

/** Blockquotes ********************************/

blockquote {
	font-family: var(--font-body);
	margin: 2rem 0;
	padding: 0.25em 1em;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-left: 0.25em solid var(--color-ghost-primary);
	font-style: italic;
	font-weight: var(--font-weight-regular);
}

.kg-blockquote-alt {
	border: 0;
	font-size: var(--size-175) !important;
	margin: 6rem 4rem !important;
	padding: 4rem 0 0;
	position: relative;
	text-align: center;
	font-family: var(--font-headline);
	color: var(--color-content-alt);
	font-weight: var(--font-weight-bold);
}

.kg-blockquote-alt::before {
	color: var(--ghost-accent-color);
	font-family: var(--font-site-title);
	content: "❝";
	font-size: var(--size-300);
	left: 50%;
	line-height: 1;
	position: absolute;
	top: -2rem;
	transform: translateX(-50%);
}

@media (max-width: 748px) {
	.kg-blockquote-alt {
		font-size: 2rem;
		margin-right: 30px !important;
		margin-left: 30px !important;
	}
}

/** Bookmarks ********************************/

.kg-bookmark-card {
	width: 100%;
	margin: 2rem auto;
}

.kg-bookmark-container {
	border: 1px solid var(--color-background-contrast);
	color: var(--color-content-body);
	display: flex;
	flex-direction: column-reverse;
	min-height: 140px;
	overflow: hidden;
	text-decoration: none;
	width: 100%;
	border-radius: 15px;
	background-color: var(--color-background-alt);
}

.kg-bookmark-thumbnail {
	position: relative;
	flex-grow: 1;
	min-height: 160px;
	min-width: 33%;
}

.kg-bookmark-thumbnail img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.kg-bookmark-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: start;
	padding: 1rem;
}

.kg-bookmark-title {
	color: var(--color-content-heading);
	font-family: var(--font-headline);
	font-size: var(--size-175) !important;
	font-weight: var(--font-weight-bold);
	margin: 0;
}

.kg-bookmark-description {
	display: -webkit-box;
	font-size: var(--size-100) !important;
	font-weight: normal;
	line-height: 1.5;
	max-height: 4.5em;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.kg-bookmark-metadata {
	font-family: var(--font-headline);
	color: var(--color-content-alt);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--size-90) !important;
	line-height: 1.5;
	margin-top: 1rem;
	width: 100%;
}

.kg-bookmark-icon {
	height: 1rem;
	margin-right: 0.75em;
	width: 1rem;
}

.kg-bookmark-author {
	color: inherit;
}

.kg-bookmark-publisher:before {
	content: "\00b7";
	margin: 0 0.5em;
}

@media (min-width: 481px) {
	.kg-bookmark-container {
		flex-direction: row;
	}
	
	.kg-bookmark-content {
		padding: 2rem 1.5rem;
	}
	
	.kg-bookmark-thumbnail {
		min-height: 0;
	}
}

/** Buttons **********************************/

input[type="reset"],
input[type="submit"],
input[type="button"],
a.kg-btn,
.kg-button-card a,
.button,
.kg-btn,
.kg-product-card-button,
.kg-header-card-button,
.kg-signup-card-button {
	display: flex !important; 
	justify-content: center !important; 
	align-items: center !important; 
	background: var(--color-background-alt) !important;
	border: 5px solid var(--color-ghost-primary) !important;
	border-radius: 0px !important;
	color: var(--color-content-heading) !important;
	font-family: var(--font-headline) !important;
	font-size: var(--size-100) !important;
	font-weight: var(--font-weight-bold) !important;
	padding: 0.75em 2.25em !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: transform .25s ease !important;
	margin: 0 auto !important;
	width: fit-content !important;
}

input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
a.kg-btn:hover,
a.kg-btn:focus,
.kg-button-card a:hover,
.kg-button-card a:focus,
.button:hover,
.button:focus,
.kg-btn:hover,
.kg-btn:focus,
.kg-btn:active,
.kg-product-card-button:hover,
.kg-product-card-button:focus,
.kg-product-card-button:active,
.kg-header-card-button:hover,
.kg-header-card-button:focus,
.kg-header-card-button:active,
.kg-signup-card-button:hover,
.kg-signup-card-button:focus,
.kg-signup-card-button:active {
	transform: translateY(-3px);
	background: var(--color-ghost-primary) !important;
	border-color: var(--color-ghost-primary) !important;
	color: var(--color-background-alt) !important;
}

input[type="reset"],
input[type="submit"],
input[type="button"],
a.kg-btn,
.kg-button-card a,
.button {
	cursor: pointer;
}

/** Callout Cards ****************************/

.kg-callout-card {
	border-radius: 15px !important;
	padding: 1rem;
	font-size: var(--size-110);
	font-family: var(--font-headline);
	margin: 2rem 0;
}

.kg-callout-card-white {
	box-shadow: inset 0 0 0 1px var(--color-background-alt);
}

.kg-callout-card-accent a:hover,
.kg-callout-card-accent a:focus {
	text-decoration: none;
}

/** Code Blocks ******************************/

pre,
code {
	background-color: black;
	color: white;
	padding: 5px;
	font-size: var(--size-100);
	font-family: var(--font-mono);
}

.kg-code-card {
	overflow-x: auto;
	width: 100%;
	box-sizing: border-box;
}

.kg-code-card pre {
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	overflow-wrap: normal;
}


/** Embeds ***********************************/


/** Files ************************************/


/** Forms ************************************/

form p {
	margin: 0 0 2rem;
}

form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-headline);
	font-weight: var(--font-weight-regular);
	color: var(--color-content-body);
}

select,
textarea,
input[type="url"],
input[type="tel"],
input[type="text"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="password"] {
	width: 100%;
	height: auto;
	padding: 1rem;
	box-sizing: border-box;
	transition: all ease-out 0.1s;
	outline: none;
	box-shadow: none;
	color: var(--color-content-body);
	border: 1px solid var(--color-background-contrast);
	background: var(--color-background-alt);
	font-family: var(--font-body);
	font-size: var(--size-100);
}

.checkbox-container {
	display: flex;
	align-items: center;
}

.checkbox-container input[type="checkbox"] {
	margin-right: 0.5rem;
}

select:hover,
textarea:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="password"]:hover {
	border-color: var(--color-ghost-primary);
}

select:focus,
textarea:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
	box-shadow: inset 0 0 0 1px var(--color-ghost-primary);
	border-color: var(--color-ghost-primary);
}

/** Headers **********************************/

.kg-header-card.kg-style-dark {
	--color-bg: var(--color-gray-900);
	--color-heading: var(--color-white);
	--color-text: var(--color-gray-200);
}

.kg-header-card.kg-style-light {
  --color-bg: var(--color-gray-100);
  --color-heading: var(--color-gray-900);
  --color-text: var(--color-gray-600);
}

.kg-header-card.kg-style-accent {
  --color-bg: var(--color-ghost-primary);
  --color-heading: var(--color-content-heading);
  --color-text: var(--color-content-body);
  --color-btn-bg: var(--color-content-body);
  --color-btn-text: var(--color-background-alt);
}

.kg-header-card:not(.kg-layout-split) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.kg-header-card-header {
	font-size: var(--size-200);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	letter-spacing: normal;
	max-width: 720px;
}

.kg-header-card-subheader {
	font-family: var(--font-headline);
	font-size: 1rem;
	font-weight: var(--font-weight-regular);
	max-width: 720px;
}

.kg-header-card-subheader:not(:first-child) {
	margin-top: 0.83333rem;
}

.kg-header-card-button:not(:first-child) {
	margin-top: 1.66667rem;
}

@media (min-width: 481px) {
	.kg-header-card:not(.kg-layout-split) {
		padding-left: 1.66667rem;
		padding-right: 1.66667rem;
	}
}

@media (min-width: 641px) {
	.kg-header-card-header {
		font-size: var(--size-250);
	}

	.kg-header-card-subheader {
		font-size: var(--size-125);
	}
}


/** Images ***********************************/

article img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

figcaption,
figcaption p span {
	color: var(--color-content-alt);
	font-family: var(--font-headline);
	font-size: var(--size-90);
}

figcaption a {
	box-shadow: inset 0 -1px 0 var(--color-background-contrast);
}

figcaption a:focus,
figcaption a:hover {
	box-shadow: inset 0 -2px 0 var(--color-background-contrast);
}

.kg-image-card {
	border-radius: 15px;
}

.kg-width-full img {
	border-radius: 0;
}

@media (max-width: 640px) {

	.kg-width-wide {
		margin: 0 auto;
		width: 95vw;
	}
	
}

/** Image Gallery ****************************/

.kg-gallery-container {
	display: flex;
	flex-direction: column;
	width: calc(100vw - 100px);
	max-width: 1000px !important;
	margin-left: auto;
	margin-right: auto;
}

.kg-gallery-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.kg-gallery-row:not(:first-of-type) {
	margin: 5px 0 0;
}

.kg-gallery-image:not(:first-of-type) {
	margin: 0 0 0 5px;
}

.kg-gallery-image img {
	border-radius: 0;
	display: block;
	height: 100%;
	margin: 0;
	width: 100%;
}

/** Lists **************************************/

.post-content ol li,
.post-content ul li {
	margin-bottom: .75rem;
}

/** Products ***********************************/

.kg-product-card-container {
	border-radius: 0;
	padding: 1rem;
	box-shadow: inset 0 0 0 1px var(--color-background-contrast);
	background-color: var(--color-background-alt);
	border-radius: 15px;
}

.kg-product-card-image {
	border-radius: 0;
}

.kg-product-card-title {
	font-family: var(--font-headline);
	font-size: var(--size-175);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.kg-product-card-description p,
.kg-product-card-description ol,
.kg-product-card-description ul {
	
}

.kg-product-card-rating {
	color: var(--color-content-heading);
	font-size: var(--size-80);
	line-height: 1.5;
}

/** Tables ***********************************/

table {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 4rem;
	border: 1px solid var(--color-background-contrast);
	background: var(--color-background-alt);
}

@media (max-width: 640px) {
	table {
		display: block;
		border: none;
		overflow-x: auto;
		box-shadow: inset 0 0 0 1px var(--color-background-contrast);
	}
}

table td,
table th {
	position: relative;
	padding: 1.5rem;
	border: 1px solid var(--color-background-contrast);
}

table th {
	text-align: left;
	font-weight: var(--font-weight-bold);
	letter-spacing: 1px;
	color: var(--color-content-heading);
	font-family: var(--font-headline);
}

/** Toggle Buttons ***************************/

.kg-toggle-card {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--color-background-contrast);
	padding: 1rem;
	background-color: var(--color-background-alt) !important;
	border-radius: 15px;
}

.kg-toggle-heading-text {
	color: var(--color-content-heading);
	font-family: var(--font-headline);
	font-size: var(--size-175);
	font-weight: var(--font-weight-bold);
}

.kg-toggle-card-icon svg {
	color: var(--color-content-body) !important;
}