/* Defaults */
/* style */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif
}

ol, ul {
  list-style: none;
}

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

:root {
	--font-family: 'Roboto', Inter, Avenir, Helvetica, Arial, -apple-system, system-ui, sans-serif;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;

/* Theme colors */
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-60: #A0A0A0;
	--color-gray-90: #333;

	--background-color: #fff;
	--background-transclusion-color: #fbfbfb;

	--text-color-light: var(--color-gray-50);
	--text-color: var(--color-gray-90);
	--text-color-link: #082840;
	--text-color-link-active: #5f2b48;
	--text-color-link-visited: #17050F;

	--syntax-tab-size: 2;
	--font-weight: 400;
	--font-size: 20px;
	--line-height: 1.5rem;
	--p-margin-top: 1.25rem;
	--margin-bottom: 1.5rem;
	--heading-margin-bottom: 0.5rem;
	--heading-line-height: 2.5rem;
	font-size: var(--font-size);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #e0e0e0;
		--color-gray-50: #C0C0C0;
		--color-gray-90: #dad8d8;

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: #1493fb;
		--text-color-link-active: #6969f7;
		--text-color-link-visited: #a6a6f8;

		--background-color: #15202b;
		--background-transclusion-color: #15202b;
	}
}


/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-size: var(--font-size);
	line-height: var(--line-height);
	color: var(--text-color);
	background-color: var(--background-color);
}
html {
	overflow-y: scroll;
}
body {
	/*max-width: 40em;*/
}

.post, article, .home, .backlinks, .tag-page {
  margin: 0 auto;
  padding: 1em 0;
  max-width: 40em;
}

article.wide, .post.wide, .home.wide, .tag-page.wide {
  max-width: 100%;
	margin: 0;
	width: 100%;
	max-width: 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;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	margin-bottom: var(--heading-margin-bottom);
	line-height: var(--heading-line-height);
}

h1 {
	/*  */
	font-size: 2.25rem;
}

h3 {
	/*  */

	line-height: calc(var(--heading-line-height) * 0.8);
	margin-bottom: calc(var(--heading-margin-bottom) * 0.8);
}

ul {
	margin-left: 24px;
	list-style: disc;
	margin-bottom: var(--margin-bottom);
	line-height: var(--line-height);
}

p:last-child {
	margin-bottom: 0;
}
p {
	/* margin-top: var(--p-margin-top); */
	line-height: calc(var(--line-height) * 0.9);
	margin-bottom: calc(var(--margin-bottom) * 0.7);
}

li {
	line-height: calc(var(--line-height) * 0.9);
	margin-bottom: calc(var(--margin-bottom) * 0.25);
}

a[href] {
	color: var(--text-color-link);
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

main {
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
/* margin-top: 1.5em; */
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
	content: "";
	display: table;
	clear: both;
}

.links-nextprev {
	list-style: none;
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}

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

pre,
code {
	font-family: var(--font-family-monospace);
}
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 {
	display: flex;
	gap: 1em .5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
}
.home-link {
	font-size: 1em; /* 16px /16 */
	font-weight: 700;
	margin-right: auto;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Nav */
.nav {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
	margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav a[href][aria-current="page"] {
	text-decoration: underline;
}

/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1rem;
}
/* .postlist-item:before { */
/* 	display: inline-block; */
/* 	pointer-events: none; */
/* 	/1* content: "" counter(start-from, decimal-leading-zero) ". "; *1/ */
/* 	line-height: 100%; */
/* 	text-align: right; */
/* 	margin-left: -1.5rem; */
/* } */
.postlist-date,
.postlist-item:before {
	font-size: 0.8125em; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: var(--margin-bottom);
	font-size: calc(var(--font-size) * 0.8);
}
.post-metadata time {
	margin-right: 1em;
}

/* Direct Links / Markdown Headers */
.header-anchor {
	text-decoration: none;
	font-style: normal;
	font-size: 1em;
	margin-left: .1em;
}
a[href].header-anchor,
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;
}
a[href].external {
	/* content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); */    
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A");
	background-position: right 33%;
	background-repeat: no-repeat;
	background-size: 0.7em;
	padding-right: 0.75em;
}

h2 + .header-anchor {
	font-size: 1.5em;
}

/**
 * Site footer.
 */
.site-footer {
   height:100px;   /* Height of the footer */
  /* position: fixed; */
  /* left: 0; */
  /* bottom: 0; */
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  min-height: 100px;
  padding: 25px 50px 0 50px;
  /* Full width */
  /* background-color: var(--bg-color-footer); */
  border-top: 1px solid var(--grey-100);
  /* border-bottom: solid 1px #
   * b5b5b5; */
  font-size: 12.8px;
  color: var(--text-color-footer);
  /* margin: 0 25px 0 25px; */
}

.site-footer__item {
  margin: 0px 15px 0px 0px;
}
.site-footer__item:first-child {
  margin-right: 0px;
}

#gdpr-widget {
  position: fixed;
  bottom: 0;
  right: 25px;
  width: 100%;
  background: white;
  max-width: 500px;
  margin: 25px auto;
  margin: 25px auto;
  border: 1px solid #ccc;
  padding: 25px;
}

#gdpr-widget button {
  background: #ccc;
  border: 0;
  padding: 10px 15px;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.hide {
	/*  */
	display: none;
}

.transclusion-container {
	/*  */
	border-left: 5px solid var(--color-gray-60);
	/* border-radius: 10px; */
	padding: 1em;
	margin: 1em 0;
	transition: all 0.2s ease-in-out;
	background-color: var(--background-transclusion-color);
	color: var(--color-gray-20);
}
.transclusion-link {
	opacity: 1;
	/* margin-bottom: var(--margin-bottom); */
	color: var(--color-gray-60);
	/* font-weight: 600; */
	font-size: 0.75em;
	text-align: left;
	transition: all 0.2s ease-in-out;
	margin-bottom: 1em;
}

.transclusion-container:hover .transclusion-link {
	font-size: 0.79em;
}

.footnotes {
	border-top: 1px solid var(--color-gray-50);
	margin-top: 1em;
	padding-top: 1em;
	font-size: 0.875em;
}

.footnotes ol {
	padding-left: 1.5em;
	list-style: none;
	list-style: decimal;
}

.footnotes ol li :target {
  background: yellow;
}

/**
 * Code formatting
 */
pre,
code {
  color: grey;
  background-color: beige;
  font-size: 15px;
  border-radius: 3px;
  font-family: "Lucida Console", "Monaco", monospace;
}

.code-plain {
  border: 1px solid #b5b5b5;
  background-color: #eee8d5;
  color: #586e75;
}

code {
  padding: 1px 5px;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;
}
pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
}

.index-card {
  padding: 55px;
  max-width: 600px;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
  margin: 0 auto;
  /* 5px rounded corners */
}
.index-card em {
  font-style: italic;
  color: #444444;
}
.index-card strong {
  font-weight: bold;
  color: black;
}

.index-card button {
	padding: 10px 20px;
	border: none;
	background-color: #b5b5b5;
	color: #444;
	font-weight: 600;
	cursor: pointer;
}

.audio-player {
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #b5b5b5;
  border-radius: 5px;
  /*max-width: 600px;*/
}

.audio-player button {
  padding: 10px 20px;
  border: none;
  background-color: transparent;
  color: #444;
  font-weight: 600;
  cursor: pointer;
}

.audio-player__visualization {
  width: 100%;
  height: 100px;
  background-color: #b5b5b5;
  margin: 10px 0;
}

.audio-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.audio-player__progress {
    height: 10px;
    width: 100%;
    display: block;
    background-color: #ccc;
    margin-top: 10px;
}

.audio-player__progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
}

.audio-player__current-time, .audio-player__total-time {
    margin-top: 10px;
}