@charset "UTF-8";

/* variables */

:root {
	--color-blue: #0031a9;
	--color-purple: #8112A5;
	--color-cyan: #01827F;
	--color-link: var(--color-blue);
	--color-link-alt: var(--color-purple);
	--color-brand: var(--color-cyan);
	--color-bg: #fbfbfb;
	--color-bg-hl: #f0f0f0;
	--color-text: #3b3b3b;
	--color-ins: #BCFFBC;
	--color-del: #FFBCBC;
	--font-size-body: clamp(16px, calc(1.538vw + 8.615px), 20px);
	--font-size-code: 90%;
	--font-size-quote: 90%;
	--font-size-caption: 90%;
	--font-size-site-title: 110%;
	--font-size-h1: 150%;
	--font-size-h2: 110%;
	--font-size-footer: 80%;
	--font-size-post-header: 90%;
}

@media(prefers-color-scheme: dark) {
	:root {
		--color-blue: #7A90FF;
		--color-purple: #BE9CC9;
		--color-bg: black;
		--color-bg-hl: #232323;
		--color-text: whitesmoke;
		--color-ins: #006200;
		--color-del: #AB0000;
	}
}

@media (max-width: 480px) {
	:root {
		--font-size-body: 16px;
	}
}

/* general */

body {
	font-family: Verdana, sans-serif;
	font-size: var(--font-size-body);
	text-align: left;
	word-break: keep-all;
	overflow-wrap: normal;
	white-space: normal;
	line-height: 1.45;
	background-color: var(--color-bg);
	color: var(--color-text);
	margin: auto;
	max-width: 720px;
	padding: 0.5em;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: normal;
	margin-bottom: 1em;
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: bold;
	margin-top: 2em;
	margin-bottom: 1em;
}

/* links */

a {
	color: var(--color-link);
	text-decoration: none;
}

a:visited {
	color: var(--color-link-alt)
}

a:hover,
a:focus {
	text-decoration: underline
}

a[href]:where(

	/* only links that starts with http */
	[href^="http"],
):after {
	content: "🔗";
}

/* other elements */

ul {
	padding-left: 1em;
}

img {
	max-width: 100%;
}

code {
	padding: 0.12em 0.12em;
	background-color: var(--color-bg-hl);
	font-family: monospace;
	font-size: var(--font-size-code);
}

pre code {
	display: block;
	padding: 0.6em;
	overflow-x: auto;
	tab-size: 4;
}

blockquote {
	font-size: var(--font-size-quote);
	background-color: var(--color-bg-hl);
	padding: 0.6em;
	margin-left: 0;
	margin-right: 0;
}

blockquote> :first-of-type {
	margin-top: 0;
}

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

dt {
	font-style: italic;
}

/* header */

#site-header {
	margin-bottom: 2em;
}

#site-title {
	color: var(--color-brand);
	font-size: var(--font-size-site-title);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#site-title::after {
	content: url('/icon.svg');
	display: inline-block;
	width: 1.3em;
	vertical-align: middle;
	margin-left: 0.5em;
}

#site-menu a,
#site-menu a:visited {
	color: var(--color-brand);
}

#site-menu ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
}

#site-menu li {
	margin-bottom: 0.5em;
	margin-right: 1em;
	margin-bottom: 0;
	text-transform: lowercase;
}

#site-menu li:last-child {
	margin-right: 0;
}

/* footer */

#site-footer {
	text-align: center;
	font-size: var(--font-size-footer);
	margin-top: 2em;
}

/* figures */

figure {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

figure img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figcaption {
	font-size: var(--font-size-caption);
	margin-top: 0.5em;
}

#quick-access {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
}

#quick-access li {
	margin-right: 1em;
}

#portrait {
	border: 0.15em solid var(--color-brand);
	padding: 0.15em;
	float: right;
	margin: 0.5em;
	width: 20%;
}

@media (max-width: 480px) {
	#portrait {
		float: none;
		display: block;
		margin: auto
	}

	#quick-access {
		flex-direction: column;
	}

	#quick-access li {
		margin-right: 0;
	}
}

@media (max-width: 800px) {
	#quick-access {
		flex-direction: column;
	}

	#quick-access li {
		margin-right: 0;
	}
}

/* back link */

#back-link {
	font-size: var(--font-size-post-header);
}

#back-link::before {
	content: "↑ Back to ";
}

/* post header */

#post-header {
	margin-bottom: 2em;
}

#post-header h1 {
	margin-bottom: 0.25em;
}

#post-header p {
	font-size: var(--font-size-post-header);
	margin-top: 0;
}

/* note header */

#note-header {
	margin-bottom: 2em;
}

#note-header h1 {
	margin-bottom: 0.25em;
}

#note-header p {
	font-size: var(--font-size-post-header);
	margin: 0;
}

/* table of contents */

#TableOfContents ul,
#TableOfContents ol {
	list-style: none;
}

/* posts list */

.posts-list {
	list-style: none;
	padding: 0;
}

.posts-list li {
	display: flex;
}

.posts-list time {
	white-space: nowrap;
}

.posts-list a {
	padding-left: 1em;
	text-indent: -1em;
}

/* del, ins */

del {
	background-color: var(--color-del);
}

ins {
	background-color: var(--color-ins);
	text-decoration: none;
}


/* tables */

table {
	width: 100%;
	border-collapse: collapse;
}

thead th {
	border-top: 2px solid var(--color-text);
	border-bottom: 1px solid var(--color-text);
	padding: 8px;
}

tfoot td {
	padding: 8px;
}

tbody td {
	padding: 8px;
}

tbody tr:last-child td {
	border-bottom: 2px solid var(--color-text);
}

/* publication header */

#publication-header p,
#publication-header summary {
	font-size: var(--font-size-post-header);
}

#author-name {
	white-space: nowrap;
}

#publication-header aside {
	border: 2px solid var(--color-text);
	padding: 0.5em;
}

#publication-header aside :first-child,
#publication-header aside :last-child {
	margin: 0;
}

/* raw url */

.url {
	word-break: break-all;
}

/* back to top link */

#back-to-top {
	text-align: center;
}

#top-link {
	font-size: 2em;
}

#top-link {
	font-size: 2em;
}

/* forms */

form div {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

input {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	border-color: var(--color-text);
	background-color: var(--color-bg);
}

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	border-color: var(--color-text);
	background-color: var(--color-bg-hl);
}