/* magick.css was used as reference for this file, and some parts are copy-pasted.
* https://github.com/wintermute-cell/magick.css/blob/master/magick.css
* Credit to winterveil.
*/

h1 {
	margin: 0;
	font-size: 2.0rem;
	color: var(--accent-color);
}

h2 {
	margin: 0;
	font-size: 20px;
	color: var(--accent-color);
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;

	font-size: 17px;
	/* Reset the counter for sidenotes to count properly. */
	counter-reset: sidenote-counter;
}

main > header, main > section, main > footer {
	padding: 20px 20px;
	margin-bottom: 15px;
}

main > section {
	margin-bottom: 10px;
}

header > .subtitle {
	font-style: italic;
	font-size: var(--minor-header-font-size);
}

header > .header-date-container {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	column-gap: 50px;
	justify-content: space-between;
}

main > section > p {}

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

/* For figures that are in a section, they are floated to the right like a sidenote. */
section > figure:not(:has(code)) {
	display: inline-block;
	padding: 16px 32px;

	max-width: 30%;
	margin: 0px auto;
	margin-bottom: 10px;
	float: right;
}

section .hr {
	background-color: var(--pane-border-color);
	padding: 0 0;
	margin: 100px 10px;
	height: 3px;
	text-align: center;
	font-size: 20px;
}

section .hr-inside {
	position: relative;
	top: -12px;
	background-color: var(--pane-bg-color);
	padding: 0 20px;
}

/* For figures on tiny screens, they take up the full width. */
@media (max-width: 800px) {
	section > figure:not(:has(code)) {
		padding: 0px 20px;
	}
}
@media (max-width: 600px) {
	section > figure:not(:has(code)) {
		max-width: 100%;
	}
}

/* Figures that are their own will get a nice border. */
main > figure {
	display: inline-block;
	border: 1px solid var(--pane-border-color);
	background-color: var(--pane-bg-color);
	padding: 20px 40px;

	max-width: 100%;
	margin: 0px auto;
	margin-bottom: 10px;
	text-align: center;
}

main > figure figcaption {
	margin-top: 10px;
}

/* Center align any element that is part of a figure */
figure * {
    margin-left: auto;
    margin-right: auto;
}

/* We don't want to center prealigned text or code in figures */
figure code,
figure pre {

    text-align: left;
}

figure:has(code) {
	padding: 0 0;
	margin: 0 0;
}

/* Set the typography for the figure captions */
figcaption {
	margin: 0 0;
	text-align: center;
}

/*
    1) Set custom padding.
    2) Hide the vertical scroll bar.
    3) Set a custom monospace font.
    4) Add a top and bottom border line.
*/
pre:has(code) {
	color: #EFF2EC;
	background-color: #2E3436;
	padding: 16px 1.6rem;
	margin: 16px 0;
	overflow-y: hidden;
	border: 1px solid var(--pane-border-color);
}

p > code {
	color: #EFF2EC;
	background-color: #2E3436;
	padding: 2px 4px;
}


/* ============================================================================================================================ */
/*   Sidenotes & Asides  ====================================================================================================== */
/* ============================================================================================================================ */

/*
    1) On mobile devices, sidenotes behave the same as asides.
    2) Float the sidenotes to the right.
    3) Make sure the sidenotes don't clash.
    4) Set the width of the sidenotes to 40% of the main column.
    5) Add padding, margins and a border for better visual separation.
    6) Adjust typography to be more compact.
*/
.sidenote, aside {
	float: right; /* 2 */
	clear: right; /* 3 */
	width: 30%; /* 4 */
	margin: 16px 0px 16px 32px; /* 5 */
	padding: 8px 8px 8px 16px; /* 5 */
	border-left: 3px solid var(--off-white); /* 5 */
	font-size: 16px; /* 6 */
	/* line-height: 1.2; /1* 6 *1/ */
}

/* On tiny screens, sidenotes take up the entire width. */
@media (max-width: 790px) {
	.sidenote, aside {
		width: 90%;
	}
}

/* Prevent double top margins */
aside h1, aside h2, aside h3, aside h4 {
	margin-top: 0;
}

/*
    1) Set the distance from the main column.
    2) Set the width of the element to a little less than the remaining space on one side, limited to 40% of the main column.
    3) Remove any values set for the mobile version of the sidenotes.
    4) Set the width to the variable defined above.
    5) Set a negative right margin to (self-width + distance-from-main) to pull the sidenote to the right.
*/
/* Sadly, CSS does not support var() and rem in media queries, so we have to hardcode pixels. */
/* This will break if the main column width is changed without adjusting this media query.    */
@media (min-width: calc(1700px)) {
	.sidenote {
		--distance-from-main: 80px; /* 1 */
		--self-width: min(calc((100vw - 1000px)/2 - (var(--distance-from-main))), 40%); /* 2 */
		margin: 0; /* 3 */
		padding: 0; /* 3 */
		border: none; /* 3 */
		width: var(--self-width);
		margin-right: calc(calc(var(--self-width) + var(--distance-from-main)) * -1);
	}
}

/* Each time a sidenote anchor is encountered, increment the counter */
.sidenote-anchor {
	counter-increment: note-counter;
}

/* Use a custom font for the sidenote numbers */
.sidenote-anchor:after,
.sidenote:before {
	font-size: 16px;
	position: relative;
	/* font-family: "Spectral", serif; */
}

/* Fine-adjust the number position for the sidenote anchor */
.sidenote-anchor:after {
	content: counter(note-counter);
	top: -8px;
	left: 1.6px;
}

/* Fine-adjust the number position for the sidenote */
.sidenote:before {
	content: counter(note-counter) " ";
	top: -8px;
}