/* Global color palette */
:root {
	--color-black: #0e0e0e;
	--color-dark-grey: #1e1e1e;
	--color-light-grey: #2e2e2e;

	--color-red: #885164;
	--color-green: #446c49;
	--color-yellow: #bf7558;
	--color-blue: #58688c;
	--color-magenta: #4d3066;
	--color-cyan: #588c89;
	--color-dark-white: #bcb9cb;

	--color-grey: #6d6978;
	--color-light-red: #c76f7f;
	--color-light-green: #569953;
	--color-light-yellow: #eaa16c;
	--color-light-blue: #82aac3;
	--color-light-magenta: #77498a;
	--color-light-cyan: #82c2c3;
	--color-white: #e2dff4;
}

/* Global font families */
@font-face {
	font-family: "Sans";
	font-weight: normal;
	src:
		local("Fira Sans"),
		local("FreeSans"),
		local("Adwaita Sans"),
		local("OpenSans"),
		local("Liberation Sans");
}

@font-face {
	font-family: "Bitter";
	font-weight: bold;
	src:
		local("Bitter Bold"),
		url("/Bitter-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Bitter";
	src:
		local("Bitter"),
		url("/Bitter-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Bitter";
	font-style: italic;
	src:
		local("Bitter Italic"),
		url("/Bitter-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "FiraMath";
	font-weight: normal;
	src:
		local("Fira Math"),
		url("/FiraMath-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Monospace";
	font-weight: normal;
	src:
		local("Fira Code"),
		local("Fira Mono"),
		local("FreeMono"),
		local("Liberation Mono");
}

/* Changing colorization by style */
.page-style-home {
	--background: url("/bg/gears.svg");
	--background-active: url("/bg/gears-active.svg");
	--color-main: var(--color-green);
	--color-light-main: var(--color-light-green);
}

.page-style-articles {
	--background: url("/bg/textlines.svg");
	--background-active: url("/bg/textlines-active.svg");
	--color-main: var(--color-blue);
	--color-light-main: var(--color-light-blue);
}

.page-style-projects {
	--background: url("/bg/circuit-board.svg");
	--background-active: url("/bg/circuit-board-active.svg");
	--color-main: var(--color-yellow);
	--color-light-main: var(--color-light-yellow);
}

.page-style-presentations {
	--color-main: var(--color-cyan);
	--color-light-main: var(--color-light-cyan);
}

.page-style-error {
	--color-main: var(--color-red);
	--color-light-main: var(--color-light-red);
}

/* Global common styles */
a {
	transition-property: color;
	transition-duration: 250ms;
	transition-timing-function: ease-out;
}

.author {
	color: var(--color-yellow);
}

/* Basic building blocks */
.columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 0.7em;
}

ul.horizontal {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

ul.horizontal.centered {
	justify-content: center;
}

/* Links with an icon prepended. */
a.iconed-url {
	display: flex;
	align-items: center;
}

a.iconed-url::before {
	content: "";
	width: 1.8em;
	height: 1.8em;
	background-size: 1.8em;
	margin-right: 0.6em;
	display: inline-block;
}

/* Styling the body */
body {
	overflow: hidden;

	height: 100vh;
	margin: 0;

	font-family: "Sans";

	display: flex;
	flex-direction: column;
}

/* Styling the top bar */
nav.topbar {
	background-color: var(--color-main);
	font-size: 1.2em;
}

nav.topbar a {
	color: var(--color-dark-grey);
	text-decoration-thickness: 0.1em;
}

nav.topbar ul {
	margin: 0.3em 0 0.3em 0;
	gap: 1em;
}

nav.topbar a:hover {
	color: var(--color-light-grey);
}

nav.topbar a.iconed-url.home::before {
	background-image: url('/header/home.svg');
}

nav.topbar a.iconed-url.articles::before {
	background-image: url('/header/articles.svg');
}

nav.topbar a.iconed-url.projects::before {
	background-image: url('/header/projects.svg');
}

nav.topbar a.iconed-url.contacts::before {
	background-image: url('/header/contacts.svg');
}

nav.topbar a.iconed-url.faq::before {
	background-image: url('/header/faq.svg');
}

/* Layout and style of content container */
body > div.scrollable {
	overflow-y: scroll;
	flex-grow: 1;
}

div.content-with-background {
	background-color: var(--color-black);
	min-height: 100%;
	display: flex;
}

div.content-with-background > div.background {
	flex-grow: 1;

	background-image: var(--background);
	background-color: var(--color-black);
	background-repeat: repeat-y;
	background-size: 100%;
}

div.content-with-background > div.background.inverse {
	transform: scaleX(-1);
}

div.content-with-background > div.background::before {
	content: "";
	width: 100%;
	height: 100%;
	display: inherit;

	background-image: var(--background-active);
	background-repeat: repeat-y;
	background-size: 100%;

	opacity: 0%;
	transition-duration: 500ms;
	transition-property: opacity;
	transition-timing-function: ease-out;
}

div.content-with-background > div.background:hover::before {
	opacity: 100%;
}

div.content-with-background > div.content {
	flex-grow: 1;

	max-width: 980px;
	width: 100%;

	color: var(--color-white);
	background-color: var(--color-dark-grey);

	display: flex;
	flex-direction: column;
}

div.content > main {
	flex-grow: 1;
}

/* Common style for all the content */
div.content ul.buttons {
	gap: 0.25em;
}

div.content a {
	color: var(--color-light-green);
}

div.content a:visited {
	color: var(--color-green);
}

div.content a:hover {
	color: var(--color-light-magenta);
}

div.content :where(a.projects, a.articles, a.external.icon)::before {
	content: '';
	display: inline-block;

	background-size: 100%;
	width: 1em;
	height: 1em;
	margin-right: 0.2em;
}

div.content a.external {
	color: var(--color-light-cyan);
}

div.content a.external.icon::before {
	background-image: url("/link/extern.svg");
}

div.content a.external:visited {
	color: var(--color-cyan);
}

div.content a.external:hover {
	color: var(--color-light-red);
}

div.content a.projects {
	color: var(--color-light-yellow);
}

div.content a.projects::before {
	background-image: url("/link/project.svg");
}

div.content a.projects:visited {
	color: var(--color-yellow);
}

div.content a.projects:hover {
	color: var(--color-light-blue);
}

div.content a.articles {
	color: var(--color-light-blue);
}

div.content a.articles::before {
	background-image: url("/link/article.svg");
}

div.content a.articles:visited {
	color: var(--color-blue);
}

div.content a.articles:hover {
	color: var(--color-light-yellow);
}

/* An URL wrapped in a rounded button. */
div.content a.button {
	display: inline-block;
	text-decoration: none;

	background-color: var(--color-main);
	color: var(--color-white);
	box-shadow: 0 0.2em var(--color-light-main);

	padding: 0.25em;

	transition-property: transform, box-shadow;
	transition-duration: 100ms;
	transition-timing-function: linear;
}

div.content a.button:hover {
	box-shadow: 0 0.0em var(--color-light-main);
	transform: translateY(0.2em);
}

/* Style for header */
header.page-wide {
	font-size: 1.35em;
	padding: 1em 3em;
}

header.page-wide hgroup {
	font-family: "Bitter";
	text-align: center;
	width: fit-content;
	margin: 0 auto;
}

header.page-wide hgroup::after {
	content: "";
	display: block;
	height: 0.25em;
	background-color: var(--color-light-main);
}

header.page-wide h1 {
	font-weight: bold;
	margin-bottom: 0;
}

header.page-wide hgroup p {
	margin-top: 0;
	color: var(--color-dark-white);
}

header.page-wide p {
	text-align: center;
	color: var(--color-main);
}

header.page-wide dl {
	font-family: "Bitter";
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

header.page-wide dt {
	font-weight: bold;
}

header.page-wide dd {
	margin-left: 0;
}

header.page-wide a.iconed-url.homepage::before {
	background-image: url('/projects/homepage.svg');
}

header.page-wide a.iconed-url.releases::before {
	background-image: url('/projects/releases.svg');
}

header.page-wide a.iconed-url.repository::before {
	background-image: url('/projects/repository.svg');
}

header.page-wide a.iconed-url.documentation::before {
	background-image: url('/projects/documentation.svg');
}

header.page-wide ul.project-links {
	gap: 1em;
}

header.page-wide ul.project-links a,
header.page-wide ul.project-links a:visited {
	color: var(--color-main);
}

header.page-wide ul.project-links a:hover {
	color: var(--color-light-main);
}

/* Style for main */
main.page-wide {
	padding: 1em 3em;
}

main.page-wide :where(h2, h3, h4, h5, h6) {
	font-family: "Bitter";
}

main.page-wide h2[id]::after {
	height: 0.2em;
	background-color: var(--color-light-main);
}

main.page-wide :where(h2, h3, h4, h5, h6)[id]::after {
	content: "";
	display: block;
}

main.page-wide :where(h3, h4, h5, h6)[id] {
	width: fit-content;
}

main.page-wide :where(h3, h4, h5, h6)[id]::after {
	height: 0.15em;
	background-color: var(--color-main);
}

main.page-wide :where(h2, h3, h4, h5, h6)[id] {
	position: relative;
}

main.page-wide :where(h2, h3, h4, h5, h6)[id] .anchor-link {
	padding-left: 0.25em;
	position: absolute;
}

main.page-wide :where(h2, h3, h4, h5, h6)[id]:not(:hover) .anchor-link {
	display: none;
}

main.page-wide blockquote {
	font-style: italic;
	font-family: "Bitter";
	color: var(--color-dark-white);
	background-image: linear-gradient(
		to right,
		var(--color-light-main),
		var(--color-light-main) .5em,
		var(--color-black) .5em
	);
	margin-left: 0;
	margin-right: 0;
	display: block;
	padding: 0.1px 1.5em 0.1px 2em;
}

main.page-wide ol.toc {
	font-family: "Bitter";
	counter-reset: index;
	list-style-type: none;
	padding-left: 0;
}

main.page-wide ol.toc li::before {
	counter-increment: index;
	content: counters(index, ".", decimal) ". ";
}

main.page-wide ol.toc a, main.page-wide ol.toc a:visited {
	color: var(--color-light-main);
}

main.page-wide ol.toc.h3 a, main.page-wide ol.toc.h3 a:visited {
	color: var(--color-main);
}

main.page-wide ol.toc a:hover, main.page-wide ol.toc.h3 a:hover {
	color: var(--color-white);
}

main.page-wide math {
	font-family: "FiraMath";
}

main.page-wide code {
	tab-size: 4;
	font-family: "Monospace";
}

main.page-wide pre {
	background-color: var(--color-black);
	padding: 1em;
	overflow-x: scroll;
}

/* Line numbering for code */
main.page-wide pre.z-code {
	counter-reset: line-number;
}

main.page-wide pre.z-code > code > span::before {
	counter-increment: line-number;
	width: 2.5em;
	display: inline-block;
	content: counter(line-number) " ";
	color: var(--color-light-main);
}

main.page-wide table {
	border-collapse: collapse;
}

main.page-wide table :where(th, td) {
	border: 0.15em solid var(--color-light-main);
	padding: 0.5rem 1rem;
}

main.page-wide table th[scope=col] {
	background-color: var(--color-main);
}

main.page-wide table th[scope=row] {
	background-color: var(--color-light-grey);
}

main.page-wide figure {
	margin-left: 0;
	margin-right: 0;
}

main.page-wide figcaption {
	color: var(--color-dark-white);
}

main.page-wide figure img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

main.page-wide figure pre {
	margin: 0;
}

main.page-wide figure:has(img) figcaption {
	text-align: center;
}

main.page-wide li::marker {
	color: var(--color-light-main);
}

sup.footnote-reference > a,
sup.footnote-reference > a:visited,
ol.footnotes-list a[href^="#fr-"] {
	color: var(--color-main);
}

sup.footnote-reference > a:hover, ol.footnotes-list a[href^="#fr-"]:hover {
	color: var(--color-light-main);
}

sup.footnote-reference > a::before {
	content: '[';
}

sup.footnote-reference > a::after {
	content: ']';
}

ol.footnotes-list li::marker {
	content: "[" counter(list-item) "] ";
}

/* Style for footer */
footer.page-wide {
	padding: 1em 3em;
	font-size: 1.1em;
	background-image: linear-gradient(
		var(--color-main) .5em,
		var(--color-light-grey) .5em,
		var(--color-light-grey)
	);
}

footer.page-wide .badges {
	gap: 0.5em;
	align-items: center;
}

/* Extra global elements */
article.page-widget {
	margin: 1em 0;
}

article.page-widget header {
	padding: 1em 1em 0 1em;
	background-color: var(--color-light-grey);
}

article.page-widget header {
	padding: 1em 1em 0 1em;
	background-color: var(--color-light-grey);
}

article.page-widget header aside {
	color: var(--color-dark-white);
	float: right;
}

article.page-widget header :where(h3, p) {
	margin: 0;
}

article.page-widget h3::after {
	content: "";
	display: block;
	height: 0.15em;
	background-color: var(--color-main);
}

article.page-widget h3 a,
article.page-widget h3 a:visited {
	color: inherit;
	text-decoration: none;
}

article.page-widget h3 a:hover {
	color: var(--color-light-main);
}

article.page-widget h3 a::after {
	content: "";
	display: inline-block;
	background-size: 100%;
	width: 1em;
	height: 1em;
	margin-left: .2em;
}

article.page-widget.project h3 a::after {
	background-image: url("/link/project-heading.svg");
}

article.page-widget.article h3 a::after {
	background-image: url("/link/article-heading.svg");
}

article.page-widget .about {
	padding: 0.1px 1em;
	background-color: var(--color-black);
}

article.page-widget .about .icons img {
	height: 2.5em;
}

article.page-widget .about ul.horizontal.icons {
	gap: 0.5em;
}

dl.contacts {
	display: grid;
	gap: 1em;
}

dl.contacts div.prepend-icon {
	position: relative;
}

dl.contacts div.prepend-icon::before {
	content: "";
	display: block;
	background-size: 100%;
	width: 3em;
	height: 3em;
	position: absolute;
}

dl.contacts div.prepend-icon.mail::before {
	background-image: url("/social/mail.svg");
}

dl.contacts div.prepend-icon.matrix::before {
	background-image: url("/social/matrix.svg");
}

dl.contacts div.prepend-icon.xmpp::before {
	background-image: url("/social/xmpp.svg");
}

dl.contacts div.prepend-icon.signal::before {
	background-image: url("/social/signal.svg");
}

dl.contacts div.prepend-icon.github::before {
	background-image: url("/repositories/github.svg");
}

dl.contacts div.prepend-icon.gitlab::before {
	background-image: url("/repositories/gitlab.svg");
}

dl.contacts div.prepend-icon.codeberg::before {
	background-image: url("/repositories/codeberg.svg");
}

dl.contacts div.prepend-icon.monero::before {
	background-image: url("/currency/monero.svg");
}

dl.contacts div.prepend-icon.bitcoin::before {
	background-image: url("/currency/bitcoin.svg");
}

dl.contacts div.prepend-icon.ethereum::before {
	background-image: url("/currency/ethereum.svg");
}

dl.contacts dt {
	margin-left: 4em;
	margin-top: 0.25em;
	font-family: "Bitter";
	font-weight: bold;
}

dl.contacts img.homepage {
	height: 1em;
}

dl.contacts dd {
	margin-left: 4em;
}

/* Zola syntax highlighting */
.z-storage.z-modifier {
	color: var(--color-light-yellow);
}
.z-keyword {
	color: var(--color-light-yellow);
}
.z-string {
	color: var(--color-green);
}
.z-comment {
	color: var(--color-grey);
}
.z-function, .z-attribute-name {
	color: var(--color-light-blue);
}
.z-type {
	color: var(--color-light-green);
}
.z-constant {
	color: var(--color-magenta);
}
.z-label, .z-import {
	color: var(--color-light-cyan);
}
.z-tag.z-name {
	color: var(--color-red);
}