/* Justify text (it should be default everywhere!): */
* {
	text-align: justify;
}

[data-theme=dark] pre, [data-theme=dark] code {
	/* Set darker background for code blocks */
	background-color: #111 !important;
}

[data-theme=light] pre, [data-theme=light] code {
	/* Set darker background for code blocks */
	color: #111 !important;
}

/* Code blocks: */
pre, pre code {
	/* Disable line and letters spacing: */
	font-family: "MesloLGS NF", monospace;
	line-height: normal;
	letter-spacing: 0;
	font-size: 0.9rem;
	
	/* Disable line wraps on small screens: */
	white-space: pre;
}

pre {
	/* Increase padding on large screens: */
	@media not (max-width: 900px) {
		padding: 20px;
	}
}

/* Center mermaid charts: */
pre.mermaid {
	text-align: center;
}

code {
	padding: 0;
}

/* Font faces for optimal code blocks render: */
@font-face {
	font-family: "MesloLGS NF";
	src: url("/fonts/MesloLGS%20NF%20Regular.ttf");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "MesloLGS NF";
	src: url("/fonts/MesloLGS%20NF%20Bold.ttf");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "MesloLGS NF";
	src: url("/fonts/MesloLGS%20NF%20Italic.ttf");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "MesloLGS NF";
	src: url("/fonts/MesloLGS%20NF%20Bold%20Italic.ttf");
	font-weight: bold;
	font-style: italic;
}

/* Header, text & blog posts: */
.post {
	/* Increase post width on large screens for full-page: */
	@media not (max-width: 900px) {
		max-width: 80%;
	}
}

.header__inner {
	/* Align header width on large screens for full-page: */
	@media not (max-width: 900px) {
		width: 80%;
	}
}

em {
	/* Reset the white color from italic text to default text color */
	color: inherit !important;
}


/* Images & captions: */
img {
	border-radius: 5px;
	@media not (max-width: 900px) {
		max-width: 80%;
		max-height: 1000px;
		margin: auto;
	}
}

figure {
	width: 100%;
}

figcaption {
	text-align: center;
	font-style: italic;
	max-width: 80%;
	margin: 15px auto;
}

/* For links, move underline a bit lower to un-hide underscores: */
* {
	text-underline-offset: 3px;
}

.post-content a {
	color: #4a94bb;
}