/* Portfolio Images: Carousel */

.carousel {
	display: flex;
	list-style: none;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	background: var(--color-gray-90);
	padding-inline-start: 0;
}

.carousel li {
	flex-basis: auto;
	flex-shrink: 0;
	scroll-snap-align: center;
	width: 100%;
	text-align: center;
		& picture img {
		max-height: 36rem;
		max-width: 85%;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* Archive: Accordions */
.accordion-container {
	margin-block-end: 4rem;
}

details div {
	border-left: 1.5px solid var(--color-gray-90);
	border-right: 1.5px solid var(--color-gray-90);
	border-bottom: 1.5px solid var(--color-gray-90);
	padding-inline-start: 2.75rem;
	padding-inline-end: 0.5rem;
	padding-block: 1.5rem 2rem;
}

details div > * + * {
	margin-top: 1.5em;
}

details + details {
	margin-top: .75rem;
}

summary {
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary {
	border: 1.5px solid var(--color-gray-90);
	padding: .75rem 1rem;
	cursor: pointer;
	position: relative;
	padding-left: calc(1.75rem + .5rem + .5rem);
	font-family: var(--font-family-monospace);
	font-size: 0.875rem;
}

summary:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: .75rem;
	content: "+";
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-gray-90);
	color: var(--background-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-family: var(--font-family-monospace);
}

details[open] summary {
	background-color: var(--background-color);
}

details[open] summary:before {
	content: "-";
	font-family: var(--font-family-monospace);
}

summary:hover {
	background-color: var(--color-gray-20);
}

/* Colophon Rounded Website Screenshots */
.rounded picture img {
	border-radius: 0.5rem;
	border: 1px solid var(--color-gray-90);
	margin-top: 0.5rem;
}
.rounded {
	margin-bottom: 1rem;
}

/* Margins */
.postlist-excerpt {
	margin: 0;
}
.small-caps {
	font-weight: 700;
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing: 0.035em;
}

p:first-of-type
:not(.read-more, .read-moreBooks, .date) {
	margin-top: 0;
}

blockquote {
	border-left: var(--border);
	border-color: var(--text-color-link);
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-left: 1.5rem;
	line-height: 1.625;
	position: relative;
}

blockquote cite {
	text-transform: uppercase;
	font-family: var(--font-family-geo);
	font-size: 0.675em;
	letter-spacing: 0.125em;
	text-align: start;
	position: relative;
	left: 0;
	bottom: 0;
	&:before{
		content:"—\A";
		white-space: pre-wrap;
	}
}

ul li {
		line-height: 1.625;
}

.links-nextprev {
	margin-block-start: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}

.link-container {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	border-top: 1.5px solid var(--color-gray-90);
	border-bottom: 1.5px solid var(--color-gray-90);
	border-left: 1.5px solid var(--color-gray-90);
	padding-inline: 1rem;
	padding-block: .75rem 1rem;
}

.link-container:last-child {
	border-right: 1.5px solid var(--color-gray-90);
}

.link-container:hover {
	background-color: var(--color-gray-20);
}

.link-container span {
	font-family: var(--font-family-monospace);
	font-weight: 700;
	font-size: 0.875rem;
	margin-block-end: .5rem;
}

.link-container p {
	margin-block: 0;	
}

.prev, .prev + * {
	text-align: start;
}

.next, .next + * {
	text-align: end;
}

.prev::before, .next::after {
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-gray-90);
	color: var(--background-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-family: var(--font-family-monospace);
}

.prev.oops::before, .next.oops::after {
	content: "⊘";
}

.prev::before {
	content: "←";
	margin-inline-end: .5rem;
}

.next::after {
	content: "→";
	margin-inline-start: .5rem;
}

/* Book Highlights */
.highlights ul {
	list-style: none;
	padding: 0;
	& li {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
		& p {
			margin: 0;
			&:not(:first-child) {
				text-indent: 1.5rem;
			}
		}	
	}
}

/* In-line References & Footnotes */

sup {
	font-size: 0.675em;
	font-weight: 700;
}

hr {
	border: 0;
	border-top: var(--border);
	border-color: var(--text-color);
	margin-top: 2em;
	margin-bottom: 1rem;
}

.footnotes-sep:before {
	content: 'Footnotes';
	font-family: var(--font-family-geo);
	color: var(--text-color);
	font-size: 0.675em;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.footnotes {
	font-size: 0.875em;
	& p {
		line-height: 1.4;
	}
}

div.poem p:first-line {
	font-variant: small-caps;
	font-weight: 700;
  letter-spacing: 0.035em;
}

/* WARNING: Here there be dragons! Experimental styles */

/* Highlighting */
/* Previous implementation, but commented out because I may not
	 end up using <mark> anywhere in the site. */

/* mark {
	background: var(--text-color-link);
	opacity: 0.75;
	padding-bottom: 0.125em;
	padding-left: 0.125em;
	padding-right: 0.125em;
	z-index: 0;
	&:hover {
		background: var(--text-color-link-active);
		color: var(--background-color);
	}
} */

/* Excerpt styling */
/* Not implemented properly yet because it applies styling to
	 the posts on the index page posts as well. */

/* .right > p:first-of-type {
	font-style: italic;
	font-size: 1.675rem;
	line-height: 1.325;
	letter-spacing: -0.0125;
} */
.postlist { counter-reset: start-from 1 }
/* Default typography: h/t Modern Font Stacks */
:root {
	--font-family-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	--font-family-sans: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
	--font-family-geo: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	--font-family-monospace: Consolas, Menlo, 'Source Code Pro', 'Cascadia Code', 'DejaVu Sans Mono', ui-monospace, monospace;
	--font-family-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
}

/* Theme colors */
:root {
	--color-gray-20: hsl(0, 0%, 80%);
	--color-gray-50: hsl(0, 0%, 50%);
	--color-gray-90: hsl(0, 0%, 10%);

	--background-color: hsl(0, 0%, 95%);

	--text-color: var(--color-gray-90);
	--text-color-link: hsl(350, 50%, 35%);
	--text-color-link-active: hsl(350, 90%, 60%);
	--text-color-link-visited: var(--color-gray-90);

	--syntax-tab-size: 2;

	--border: 2px dotted var(--color-gray-20);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: hsl(0, 0%, 25%);
		--color-gray-50: hsl(0, 0%, 50%);
		--color-gray-90: hsl(0, 0%, 85%);

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: hsl(210, 100%, 85%);
		--text-color-link-active: hsl(210, 75%, 50%);
		--text-color-link-visited: var(--color-gray-90);

		--background-color: hsl(210, 15%, 10%);
	}
}
/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family-serif);
	color: var(--text-color);
	background-color: var(--background-color);
	text-rendering: optimizeLegibility;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 45rem;
}
html {
	overflow-y: scroll;
}
img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	&:hover {
		filter: unset;
		-webkit-filter: unset;
	}
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

ul, ol {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin: 0;
	padding-inline-start: 0;
}

/* Typography: Paragraphs and Headings */

p {
	line-height: 1.625;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-sans);
	line-height: 1.325;
	text-wrap: balance;
	margin-bottom: 0.5rem;
}

main ol, ul {
	padding-inline-start: 1.25rem;
	& li::marker {
		font-family: inherit;
	}
}

/* Links */
a[href] {
	color: var(--text-color-link);
	text-underline-position: from-font;
	text-underline-offset: 1px;
	text-decoration-thickness: 1px;
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

.jump-links {
		cursor: pointer;
	position: relative;
	padding-left: calc(1.75rem + .25rem);
	font-family: var(--font-family-monospace);
	font-size: 0.875rem;
	font-weight: 700;
}

.up:before, .down:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-gray-90);
	color: var(--background-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-family: var(--font-family-monospace);
}

.down:before {
	content: "↓";
}

.up:before {
	content: "↑";
}

a:not(
	[href^="#"],
	[href^="/"],
	[href*="localhost"],
	[href*="heyjunebug.com"]
)::after {
  content: "↗";
  margin-inline-start: 0.25ch;
	font-family: var(--font-family-monospace);
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

pre,
pre[class*="language-"], 
code, 
code[class*="language-"] {
	font-family: var(--font-family-monospace);
	font-size: 0.875em;
	letter-spacing: 0.025em;
	white-space: pre-wrap;
	overflow: auto;
	word-break: break-word;
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
}
code {
	word-break: break-all;
}

/* Header */
header {
	font-family: var(--font-family-monospace);
	font-size: 0.875rem;
	padding-top: 9rem;
	padding-bottom: 1.75rem;
	padding-right: 1rem;
	padding-left: 1rem;
	border-bottom: var(--border);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	& div p {
		margin-block-end: 0;
		margin-block-start: 0;
	}
	& div:nth-child(2) {
		min-width: 33%;
		text-align: end;
		margin-top: 0.75rem;
	}
	& div img {
		display: block;
		margin-bottom: 0.75rem;
	}
}
.logo {
	max-width: 60px;
	-webkit-filter: grayscale(100%) drop-shadow(0 0.125rem 0.25rem var(--color-gray-90)); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%) drop-shadow(0 0.125rem 0.25rem var(--color-gray-90));
	z-index: 1;
	&:hover {
		-webkit-filter: grayscale(0%) drop-shadow(0 0.125rem 0.5rem var(--color-gray-90));
		filter: grayscale(0%) drop-shadow(0 0.125rem 0.5rem var(--color-gray-90));
	}
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Main */
main {
	/* margin-top: 4rem; */
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 1.25rem;
	padding-left: 1rem;
	margin-left: auto;
	margin-right: auto;
}

/* Footer */
footer {
	border-top: var(--border);
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.75rem;
	padding-right: 1rem;
	padding-left: 1rem;
	padding-bottom: 4rem;
	margin-block-start: 4rem;
	font-size: 0.925rem;
	font-family: var(--font-family-monospace);
	& .copyright, & .jump-links {
		font-size: 0.875em;
	}
	.copyright {
		margin-block: 2rem;
	}
	& p:first-child {
		margin-top: 2rem;
		margin-bottom: 0;
		line-height: 1.675;
	}
	& nav {
		display: flex;
	}
	& nav div {
		display: block;
		min-width: 48.5%;
		font-size: 0.875rem;
		& li {
			padding-bottom: 0.125rem;
		}
	}
}
.footer-nav-list {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1.5;
}
.footer-nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.footer-nav-item a[href][aria-current="page"] {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
}
.postlist-item {
	counter-increment: start-from -1;
	margin-bottom: 2em;
}
.postlist-date,
.postlist-item:before,
p.metadata {
	font-size: 0.75rem; /* 12px /16 */
	color: var(--color-gray-90);
	font-family: var(--font-family-monospace);
	line-height: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 0;
	margin-block-end: 0;
}
.postlist-item:before {
	font-family: var(--font-family-sans);
	display: block;
	pointer-events: none;
	content: "#" counter(start-from, decimal-leading-zero) "\A";
	white-space: pre-wrap;
	font-size: 1.25em;
	font-weight: 700;
	margin-top: 1.5em;
	letter-spacing: 0.025em;
}
.postlist-category {
	padding-top: 0.25em;
	margin-bottom: -0.5em;
	border-top: var(--border);
	border-color: var(--text-color);
	text-align: right;
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-metadata {
	list-style-type: none;
	padding-left: 0;
	font-size: 0.75rem; /* 12px /16 */
	line-height: 1.25rem;
	color: var(--color-gray-90);
	font-family: var(--font-family-monospace);
	& li {
		display: inline-flex;
	}
}
.postlist-link {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
	flex-basis: calc(100% - 1.5rem);
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}
.portfolio-featuredImg {
	margin-top: 0.875rem;
	margin-bottom: 0.5rem;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tags-list {
	list-style-type: none;
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
	line-height: 1.675;
	column-count: 2;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}

/* Div containers for main-sidebar two-column layout */
.entry {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
}
.left {
	width: 20%;
	margin-right: 5%;
}
.right {
	width: 75%;
}

/* Adjustments for smaller screens */
@media (max-width: 480px) {
	body {
		font-size: 0.925rem;
	}
	header {
		padding-top: 6rem;
		display: block;
		& div:nth-child(2) {
			text-align: start;
		}
	}
	.logo {
		max-width: 48px;
	}
	.entry {
		display: block;
	}
	.right {
		width: 100%;
		margin-top: 0.5em;
		margin-bottom: 1em;
	}
	.left {
		width: 100%;
		margin-bottom: 1em;
	}
	.postlist-metadata {
		margin-top: 0;
	}
	.wayfinding {
		margin-block: 2rem;
	}
}
@media (max-width: 720px) {
	body {
		font-size: 0.975rem;
	}
}

/* Direct Links / Markdown Headers */
.header-anchor {
	text-decoration: none;
	font-style: normal;
	font-size: 1em;
	margin-left: .1em;
}
a[href].header-anchor {
	color: transparent;
}
a[href].header-anchor:visited {
	color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
	text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
	color: #aaa;
}

/* Home page class: styling text+link to archive */
.read-more {
	font-family: var(--font-family-sans);
	font-weight: 300;
	margin-top: 1.5rem;
}

.read-moreBooks {
	font-family: var(--font-family-sans);
	font-weight: 300;
	margin-top: 3.5rem;
}

table {
	width: 100%;
}

thead {
	text-align: left;
	text-transform: uppercase;
	font-family: var(--font-family-monospace);
	font-size: 0.75rem;
	letter-spacing: 0.125em;
	font-weight: 900;
	& tr th {
		padding: 0.325em;
	}
}

td, th {
	vertical-align: top;
}

tbody {
	font-family: var(--font-family-monospace);
	font-size: 0.875rem;
	letter-spacing: 0.025em;
  counter-reset: rowNumber;
}

tbody tr::before {
  display: table-cell;
	padding: 0.25em;
  counter-increment: rowNumber;
  content: counter(rowNumber);
}

td {
	padding: 0.25em;
}

thead tr, tr:nth-child(even) {
	background-color: hsla(350, 66%, 66%, 0.125);
	z-index: 10;
}
/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #282a36;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6272a4;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #ff79c6;
}

.token.boolean,
.token.number {
	color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #f1fa8c;
}

.token.keyword {
	color: #8be9fd;
}

.token.regex,
.token.important {
	color: #ffb86c;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}