:root {
	--border-radius: 10px;
	--opacity-faint: 40%;
	--opacity-focus: 70%;

	/* Dark Mode */
	@media (prefers-color-scheme: dark) {
		--background-colour: #1B0426;
		--foreground-colour: #D6BCDF;
	}

	/* Light Mode */
	@media (prefers-color-scheme: light) {
		--background-colour: #D6BCDF;
		--foreground-colour: #1B0426;
	}

	/* Big Screens */
	@media screen and (min-width: 761px) {
		--global-padding-left: 12.5%;
		--standard-width: 55%;

	}

	/* Small screens */
	@media screen and (max-width: 760px) {
		--global-padding-left: 4%;
		--standard-width: 100%;
	}
}

html {
	min-height: 100%;
	background-color: var(--background-colour);
	color: var(--foreground-colour);
	counter-reset: asides 0;
}

/* New best friend: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers */
body {
	display: flex;
	flex-direction: column;
	gap: 0px;
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;

	header,
	footer {
		flex-grow: 0;
		flex-shrink: 0;
	}

	#content-container {
		flex-grow: 1;
		width: 100%;
	}
}

h3 {
	margin-top: 50px;
}

/* Static links back to the current <h1> or <hX> */
.heading-anchor {
	text-decoration: none;
	font-size: medium;
	padding-left: 10px;
	color: transparent;
	text-shadow: 0 0 0 var(--foreground-colour);
	opacity: var(--opacity-faint);

	/* arrow-up-right-from-square */
	&:hover {
		opacity: var(--opacity-focus);
	}
}

/* Keep the main content items thin (ish)*/
p {
	width: var(--standard-width);
}

#content,
#about {
	max-width: 100%;
	padding-left: var(--global-padding-left);
}

a {
	color: var(--foreground-colour);

	/* External links get a little marker :) */
	&[href^="http"]:after {
		content: url("/external-arrow.svg");
		display: inline-block;
		width: 0.75rem;
		height: 0.75rem;
		margin-left: 5px;
		aspect-ratio: 1;
	}

	&.no-after::after {
		content: "" !important;
		display: none;
	}

	&:hover {
		text-decoration-style: wavy;
	}

	&:has(.inline) {
		border-bottom: 1px dashed var(--foreground-colour);

		&:hover {
			border-bottom: 1px dotted var(--foreground-colour);
		}

		/* TODO: funky border image?
		https://developer.mozilla.org/en-US/docs/Web/CSS/border-image*/
	}
}

#properties {
	font-size: 15px;
	width: fit-content;

	table {
		text-align: right;
	}

	td {
		vertical-align: middle;
	}

	th+td {
		padding-left: 5px;
		font-family: monospace, monospace;
	}

	th {
		font-weight: normal;
	}
}

.padded-second td+td {
	padding-left: 20px;
}

.padding-top {
	margin-top: 50px;
}

.slight-opacity {
	opacity: 60%;
}

p:has(+.no-gap) {
	margin-bottom: 0px;
}

ul {
	&.no-gap {
		margin-top: 0px;
	}

	&.no-label {
		list-style: none;
		padding-left: 0px;

		/* And any sub-lists too please */
		ul {
			list-style: none;
		}
	}

	li[marker]::marker {
		content: attr(marker)" ";
	}
}

#toc-details {
	padding-top: 20px;

	&[open] ul {
		animation: toc-entrance 0.3s ease-out;
	}

	summary {
		cursor: pointer;
	}
}

@keyframes toc-entrance {
	from {
		padding-left: 0px;
		opacity: 0;
	}

	/* to their default values :) */
	to {}
}

#TableOfContents {
	margin-top: -10px;
	padding-left: 10px;
	border-left: 2px solid;

	ul {
		list-style: none;
		padding-bottom: 5px;

		li>ul>li>a:not(:hover) {
			text-decoration: none;
		}
	}
}

pre:has(>code) {
	overflow: scroll;
	padding: 5px;
	border-radius: 8px;

	@media screen and (min-width: 761px) {
		code {
			text-wrap: wrap;
		}
	}

	@media screen and (max-width: 760px) {
		code {
			text-wrap: none;
		}
	}
}

p {

	/* Inline code */
	code {
		background: #272822;
		color: #B3B3B3;
		border-radius: 4px;
		padding: 0.1em 0.25em;
	}
}

/*
┓           ┏┓
┃ ┏┓┏┓┏┓┏┓  ┗┓┏┏┓┏┓┏┓┏┓┏
┗┛┗┻┛ ┗┫┗   ┗┛┗┛ ┗ ┗ ┛┗┛
       ┛
L a r g e   S c r e e n s
*/

@media screen and (min-width: 761px) {
	pre {
		max-width: var(--standard-width);
	}
}



/*
┏┓     ┓┓  ┏┓
┗┓┏┳┓┏┓┃┃  ┗┓┏┏┓┏┓┏┓┏┓┏
┗┛┛┗┗┗┻┗┗  ┗┛┗┛ ┗ ┗ ┛┗┛
S m a l l   S c r e e n s
*/

@media screen and (max-width: 760px) {

	#article-body,
	about {
		width: 92%;
		padding-left: 4%;
		padding-right: 4%;
	}

	p p {
		margin: 0px;
	}

	hr,
	section>p,
	section>footer,
	section>table {
		width: 100%;
	}

	section>dl,
	section>ol,
	section>ul {
		width: 90%;
	}

	figure {
		max-width: 90%;
	}

	figcaption,
	figure.fullwidth figcaption {
		margin-right: 0%;
		max-width: none;
	}

	blockquote {
		margin-left: 1.5em;
		margin-right: 0em;
	}

	blockquote p,
	blockquote footer {
		width: 100%;
	}
}


/* ~ ~ ~ ~ Utility Classes ~ ~ ~ ~ */
.opacity {
	@media (prefers-reduced-transparency) {
		opacity: 1;
	}

	/* Else: */
	opacity: var(--opacity-faint);

	&:hover {
		opacity: var(--opacity-focus);
	}
}

.opacity-static {
	opacity: var(--opacity-faint);

	@media (prefers-reduced-transparency) {
		opacity: 1;
	}
}

.bold {
	font-weight: bold;
}

.italics,
.italic {
	font-style: italic;
}

.super {
	vertical-align: super;
	font-size: small;
}

.mono {
	font-family: monospace;
}

.inline {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	vertical-align: text-bottom;
}

/* TODO: Use attr() to make this variable */
.cell-padding {
	tr td {
		padding-right: 15px;
	}
}

.center {
	text-align: center;
}

.line {
	height: 1px;
	width: var(--standard-width);
	border-bottom: 1px solid var(--foreground-colour);
}