@charset "utf-8";
/* @import "debug.css"; */

:root {
	--font-head: "novelaregular", system-ui, sans-serif;
	--font-base: "novelaregular", system-ui, sans-serif;

	/* colors for light and dark color schemes */
	--color-purple: #b16286;
	--color-purple-accent: #d3869b;
	--color-gray: #928374;
	--color-yellow: #d79921;

	/* gurvbox color scheme */
	/* https://github.com/morhetz/gruvbox */
	--color-bg0_h: light-dark(#f9f5d7, #1d2021);
	--color-bg0_s: light-dark(#f2e5bc, #32302f);
	/* --color-bg: var(--color-bg0_h); */
	/* --color-fg: #3c3836; */
	--color-green: light-dark(#79740e, #b8bb26);
	--color-orange: light-dark(#d65d0e, #fe8019);
	--color-red: light-dark(#cc241d, #fb4934);
	--color-blue: light-dark(#458588, #83a598);

	--color-primary: var(--color-purple);

	--cursor-size: 24px;

	--pagefind-ui-primary: var(--color-primary);
	--pagefind-ui-text: var(--color-fg);
	--pagefind-ui-background: var(--color-bg);
	--pagefind-ui-border: var(--color-primary);
	--pagefind-ui-tag: var(--color-primary);

	/* scrollbar-color-thumb scrollbar-color-track */
	scrollbar-color: var(--color-primary) var(--color-gray);
	/* scrollbar-width: 0.25rem; */
}

/* same as [prefers-color-scheme: dark] */
/* .dark-theme { */
/*   --color-bg0_h: #1d2021; */
/*   --color-bg0_s: #32302f; */
/*   --color-bg: var(--color-bg0_h); */
/*   --color-fg: #ebdbb2; */
/*   --fg-accent: #ebdbb2b3; */
/*   --color-green: #b8bb26; */
/*   --color-orange: #fe8019; */
/*   --color-red: #fb4934; */
/*   --color-blue: #83a598; */
/* } */

/* same as [prefers-color-scheme: light] */
/* .light-theme { */
/*   --color-bg0_h: #f9f5d7; */
/*   --color-bg0_s: #f2e5bc; */
/*   --color-bg: var(--color-bg0_h); */
/*   --color-fg: #3c3836; */
/*   --fg-accent: #3c3836b3; */
/*   --color-green: #79740e; */
/*   --color-orange: #d65d0e; */
/*   --color-red: #cc241d; */
/*   --color-blue: #458588; */
/* } */

html {
	border-left: 0.25rem solid var(--color-primary);
	animation: changingborderleft 600s infinite;
}

/* header > nav { */
/*   font-family: novelaregular; */
/*   font-size: 1.12rem; */
/* } */

header > nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header > nav > ul {
	padding-inline-start: 0 !important;
}

header > nav ul li svg {
	display: inline-block;
	/* padding: 0.1rem 1rem; */
	vertical-align: middle;
}

footer {
	> details > summary {
		text-align: center;
		font-size: smaller;
		font-style: italic;
	}

	> details > summary {
		list-style-type: "⋆⭒˚.⋆ ";
	}

	> details[open] > summary {
		list-style-type: "⋆⭒˚.⋆ ";
	}
}

@media only screen and (max-width: 600px) {
	header > nav > ul {
		flex-direction: column;
		text-align: right;
	}
}

svg {
	max-width: var(--max-width);
}

.svg-sun-btn {
	cursor: pointer;
	display: inline-block;
}

.columns {
	display: grid;
	grid-template-columns: calc(var(--max-width) / 2) calc(var(--max-width) / 2);
}

.btn-transparent {
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
}

/* h1, */
/* h2, */
/* h3, */
/* h4, */
/* h5 { */
/*   font-family: "ab-selectric-century-bold"; */
/* } */


main p
{
  margin-inline: var(--vspace--1);
}


h1 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

main ul:not(li > ul),
main ol:not(li > ol) {
	padding-inline-start: var(--vspace--1);
}

main ul:not(li > ul) {
	list-style-type: "• ";
}

main li > ul {
	list-style-type: "• ";
}

/* Heading of link/tech posts */
.heading__post {
	text-align: left;
}

/* Author of link/tech posts */
.author {
	font-family: "LibreBaskervilleItalic", serif;
	/*font-weight: 600;*/
}

a,
a:visited {
	/*color: var(--color-primary);*/
	animation: changingcolor 600s infinite;
}

a:hover {
	color: var(--color-yellow);
}

dd:last-child {
	margin-bottom: none;
}

pre {
	color: var(--color-fg);
	background-color: var(--color-bg0_s);
}

blockquote {
	border: var(--stroke-dashed);
	border-radius: var(--radius-s);
	border-color: var(--color-primary);

	/* Reset tal.css style */
	max-width: var(--measure);
	margin-inline: 0;
}

blockquote > * + * {
  margin-block-start: var(--flow-space)
}

blockquote::before {
	content: url(/images/quote.svg);
	fill: var(--color-primary);
	padding-inline: var(--vspace--2);
}

blockquote::after {
	content: url(/images/quote-flipped.svg);
	fill: var(--color-primary);
	padding-inline: var(--vspace--2);

	display: flex;
	justify-content: right;
}

.category {
	/* overwrite color of .tag class */
	color: light-dark(var(--color-green), var(--color-green));
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.pagefind-ui__result-area,
.pagefind-ui__form {
	--flow-space: var(--vspace--1, 1em);
}

.pagefind-ui__result-area,
.pagefind-ui__form > * {
	/* ↓ Any extant vertical margins are removed */
	margin-block: 0;
}

/* .parent > direct children + direct childrens siblings */
.pagefind-ui__result-area,
.pagefind-ui__form,
.pagefind-ui__result-area > * + *,
.pagefind-ui__form > * + * {
	/* ↓ Top margin is only applied to successive elements */
	margin-block-start: var(--flow-space);
}

.space-47 {
	text-align: center;
	animation-name: spin;
	animation-duration: 8000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	/* animation-delay: 2s; */
}

#space-45 {
	text-align: center;
}

.bubble {
	cursor: pointer;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.post__footer {
	display: grid;
	column-gap: var(--vspace-0);
	place-content: center;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "tags date";
}

.post__footer > .post__footer__date {
	justify-self: end;
	/* if text wraps align to end (right) */
	text-align: end;
	/* TODO: add ellipses so text will not flow out of container */
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
}

/* a:not( */
/* 	[href^="#"], */
/* 	[href^="/"], */
/* 	[href*="localhost"], */
/* 	[href*="127.0.0.1"], */
/* 	[href*="talfus-laddus.de"] */
/* 	[href*="matthias-schaub.de"] */
/* )::after { */
/*   content: " ↗"; */
/* } */


/* TODO */
/* :where(a:not([class])) { */
/*   &[href]:not( */
/* 		[href^="/"], */
/* 		[href^="#"], */
/* 		[href*="localhost"], */
/* 		[href*="127.0.0.1"], */
/* 		[href*="talfus-laddus.de"], */
/* 		[href*="matthias-schaub.de"] */
/* 	)::after { */
		/*   content: " ↗"; */
		/* vertical-align: middle; */
		/* width: 0.5cap; */
		/* height: 0.5cap; */
		/* content: url("data:image/svg+xml, %3Csvg width='1cap' height='1cap' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E%0A"); */
/*   } */
/* } */