/*

Based on:

****** Baseblog | Kirby Theme ******
*** URL: http://baseblog.sashtown.de
*** Author: Sascha Lack
*** Author URL: http://sashtown.de
*** Made for Kirby CMS [http://getkirby.com]

*/


:root {
	color-scheme: light dark;
	--border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
	--primary-color: light-dark(#dd4a38, #dd4a38);
	--text-color: light-dark(#333, rgb(209, 213, 219));
	--background-color: light-dark(#fff, rgb(17, 24, 39));

	--hljs-bg: light-dark(#ffffff, #0d1117);
	--hljs-color: light-dark(#24292e, #c9d1d9);
	--hljs-keyword: light-dark(#d73a49, #ff7b72);
	--hljs-title: light-dark(#6f42c1, #d2a8ff);
	--hljs-attribute: light-dark(#005cc5, #79c0ff);
	--hljs-regex: light-dark(#032f62, #a5d6ff; );
	--hljs-symbol: light-dark(#e36209, #ffa657);
	--hljs-comment: light-dark(#6a737d, #8b949e);
	--hljs-name: light-dark(#22863a, #7ee787);

	--hljs-subst: light-dark(#24292e, #c9d1d9);
	--hljs-section: light-dark(#005cc5, #1f6feb);
	--hljs-bullet: light-dark(#735c0f, #f2cc60);
	--hljs-emphasis: light-dark(#24292e, #c9d1d9);
	--hljs-strong: light-dark(#24292e, #c9d1d9);
	--hljs-addition-color: light-dark(#22863a, #aff5b4);
	--hljs-addition-bg: light-dark(#f0fff4, #033a16);
	--hljs-deletion-color: light-dark(#b31d28, #ffdcd7);
	--hljs-deletion-bg: light-dark(#ffeef0, #67060c);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/*
 :::  Reset
-------------------------------------------------- */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-bottom: 1px solid var(--border-color);
}

code,
kbd,
samp,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/*
 :::  Global
-------------------------------------------------- */

html {
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background-color: var(--background-color);
}

body {
	margin: 0 auto;
	padding: 1em;
	max-width: 60em;
	color: var(--text-color);
	font-family: system-ui, sans-serif;
	line-height: 1;
	font-size: 90%;
}

@media only screen and (min-width: 40em) {
	body {
		font-size: 100%;
	}
}

main {
	line-height: 1.7;
}


/*
 :::  Links
-------------------------------------------------- */

a:link,
a:visited {
	color: var(--primary-color);
}

a:hover,
a:active {
	color: var(--text-color);
}


/*
 :::  Site header
-------------------------------------------------- */

.site-header {
	padding: 0 0 15px 0;
}

.site-logo {
	text-align: center;
}

.site-logo a {
	font-size: 1.75em;
	line-height: 1.3;
	text-decoration: none;
}

.site-logo p {
	margin-top: .25em;
	font-size: 1.2em;
	line-height: 1.3;
}

/* media query in em uses base medium (probably 1em == 16xp) */
@media screen and (min-width: 36em) {
	.site-header-inner {
		display: flex;
		justify-content: space-between;
	}

	.site-logo {
		text-align: left
	}
}

@media screen and (min-width: 60em) {
	.site-header {
		padding: 30px 0;
	}

	.site-logo a {
		font-size: 2.2em;
		line-height: 1.3;
	}
}


/*
 :::  Navigation
-------------------------------------------------- */

.menu ul {
	padding: 0;
	margin: 15px 0 0;
}

.menu li {
	display: inline-block;
}

.menu a {
	display: block;
	padding: 1em;
	color: var(--text-color);
	letter-spacing: 1px;
	text-transform: uppercase;
	position: relative;
	text-decoration: none;
}

.menu a:hover {
	background: var(--primary-color);
	color: #fff;
}

.menu a.active:not(:hover):after {
	position: absolute;
	content: '';
	bottom: .66em;
	left: 1em;
	right: 1em;
	border-bottom: 1px solid currentColor;
}

@media screen and (min-width: 36em) {
	.menu ul {
		margin: 0;
	}
}

@media screen and (max-width: 36em) {
	.menu ul {
		text-align: center
	}
}

/*
 :::  Article basics
-------------------------------------------------- */

article {
	margin-bottom: 5em;
}

article footer {
	margin-top: 3em;
}

article p {
	font-size: 1em;
	margin-bottom: 1.5em;
}


/*
 :::  Article meta
-------------------------------------------------- */

.m-postheader {
	margin: 0 0 1em;
}

.m-postheader-top {
	padding-bottom: .25em;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1rem;

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	/* align item to the bottom */
}

.m-postheader-meta {
	font-size: 0.8em;
}

.page-heading {
	margin-bottom: 0;
}


/*
 :::  Tags
-------------------------------------------------- */

.tags {
	display: inline-block;
	margin-bottom: 0;
	margin-top: 0;
	padding-left: 0;
}

.tags li {
	display: inline-block;
	margin-right: .25em;
	text-transform: lowercase;
}


/*
 :::  Headings
-------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	line-height: 1.3;
}

h1 {
	font-size: 2em;
	margin-bottom: .25em;
}

h2 {
	font-size: 1.75em;
	margin-top: 1.5em;
	margin-bottom: .5em;
}

h3 {
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: .5em;
	font-weight: 400;
}

h4 {
	font-size: 1.25em;
	margin-bottom: .5em;
}

h5 {
	font-size: 1.25em;
	margin-bottom: .5em;
	text-transform: uppercase;
}

h6 {
	font-size: 1.1em;
	margin-bottom: .5em;
}


/*
 :::  Blockquotes
-------------------------------------------------- */

blockquote {
	margin-bottom: 2em;
	padding: .5em 1em;
	font-style: italic;
	border-left: 10px solid #333;
}

blockquote p:last-of-type {
	margin-bottom: 0;
}

/*
 :::  Code
-------------------------------------------------- */

.content pre {
	margin-bottom: 2em;
	padding: 1em;
	border: 1px solid var(--border-color);
	background: rgba(0, 0, 0, 0.02);
	overflow: auto;
	border-radius: 0.33em;
}

.content p code {
	background-color: var(--border-color);
	padding: 0 0.2em;
}


/*
 :::  Unordered Lists
-------------------------------------------------- */

.content ul {
	margin-bottom: 1.5em;
	list-style: disc inside;
}

.content ul ul,
.content ul ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}


/*
 :::  Ordered Lists
-------------------------------------------------- */

.content ol {
	margin-bottom: 1.5em;
	list-style: decimal inside;
}

.content ol ul,
.content ol ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}


/*
 :::  Description Lists [Markdown extra feature]
-------------------------------------------------- */

.content dl {
	margin-bottom: 1.5em;
}

.content dt {
	margin-top: 1em;
	font-weight: 700;
	font-size: 1.1em;
}


/*
 :::  Media
-------------------------------------------------- */

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

article figure {
	margin: 0 2em 1.5em;
}

article .row figure {
	margin-left: 0;
	margin-right: 0;
}

article figcaption {
	padding-top: 0.25em;
	border-top: 1px solid #ccc;
	margin-top: .25em;
	font-size: 0.8em;
	color: #888;
}


/*
 :::  Fluid video ratio via Kirbytext
-------------------------------------------------- */

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: auto;
	overflow: hidden;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*
 :::  Site footer
-------------------------------------------------- */

.site-footer {
	padding: 1em 0 1em;
	margin: 2em 0 0;
	font-size: 0.8em;
	line-height: 1.5;
	border-top: 1px solid var(--border-color);
	color: #888;
}

.site-footer a:not(:hover) {
	color: currentColor;
}

.site-footer p {
	margin-top: 0;
}


/* media query in em uses base medium (probably 1em == 16xp) */
@media screen and (min-width: 36em) {
	.site-footer {
		display: flex;
		justify-content: space-between;
	}
}

.footer-madewithkirby a {
	text-decoration: none;
}

.footer-madewithkirby .made {
	text-decoration: underline;
}

.footer-madewithkirby .heart {
	color: var(--primary-color);
}


/*
 :::  Clearfix [cf]
-------------------------------------------------- */

.cf:after {
	content: '';
	display: table;
	clear: both;
}


/*
 :::  Visually hidden [vh]
-------------------------------------------------- */

.vh {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.m-postteaser {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.m-postteaser:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.m-postteaser-header {
	border: 0;
	margin: 0;
	padding: 0;
}

.m-postteaser-meta {
	font-size: 0.8em;
}

.m-postteaser-heading {
	font-size: 22px;
}

video {
	width: 100%;
	height: auto;
}

.m-showcase {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bug-row--normal {}

.bug-row--minor {}

.bug-row--high {
	background: rgba(255, 0, 0, .1);
}



.img-portrait {
	margin-left: 1em;
	float: right;
	max-width: 300px;
	min-width: 100px;
	width: 33%;
	height: auto;
}

kbd {
	font-size: 0.9em;
	background-color: color-mix(in srgb, Canvas 90%, CanvasText 10%);
	color: CanvasText;
	border: 1px solid color-mix(in srgb, CanvasText 30%, Canvas 70%);
	border-radius: 4px;
	padding: 2px 5px;
	box-shadow: 0 1px 1px color-mix(in srgb, CanvasText 15%, transparent);
	white-space: nowrap;
}


/*!
	Theme: GitHub
	Description: Light theme as seen on github.com
	Author: github.com
	Maintainer: @Hirse
	Updated: 2021-05-15

	Outdated base version: https://github.com/primer/github-syntax-light
	Current colors taken from GitHub's CSS
*/

.hljs {
	color: var(--hljs-color);
	/* background-color: var(--hljs-bg); */
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
	/* prettylights-syntax-keyword */
	color: var(--hljs-keyword);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
	/* prettylights-syntax-entity */
	color: var(--hljs-title);
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
	/* prettylights-syntax-constant */
	color: var(--hljs-attribute);
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
	/* prettylights-syntax-string */
	color: var(--hljs-regex);
}

.hljs-built_in,
.hljs-symbol {
	/* prettylights-syntax-variable */
	color: var(--hljs-symbol);
}

.hljs-comment,
.hljs-code,
.hljs-formula {
	/* prettylights-syntax-comment */
	color: var(--hljs-comment);
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
	/* prettylights-syntax-entity-tag */
	color: var(--hljs-name);
}

.hljs-subst {
	/* prettylights-syntax-storage-modifier-import */
	color: var(--hljs-subst);
}

.hljs-section {
	/* prettylights-syntax-markup-heading */
	color: var(--hljs-section);
	font-weight: bold;
}

.hljs-bullet {
	/* prettylights-syntax-markup-list */
	color: var(--hljs-bullet);
}

.hljs-emphasis {
	/* prettylights-syntax-markup-italic */
	color: var(--hljs-emphasis);
	font-style: italic;
}

.hljs-strong {
	/* prettylights-syntax-markup-bold */
	color: var(--hljs-strong);
	font-weight: bold;
}

.hljs-addition {
	/* prettylights-syntax-markup-inserted */
	color: var(--hljs-addition-color);
	background-color: var(--hljs-addition-bg);
}

.hljs-deletion {
	/* prettylights-syntax-markup-deleted */
	color: var(--hljs-deletion-color);
	background-color: var(--hljs-deletion-bg);
}

.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
	/* purposely ignored */
}


.c-icon {
	fill: currentcolor;
}

.notes-date {
	font-variant-numeric: tabular-nums;
}