:root {
	--color-background:         rgba( 18,  15,  18, 1);
	--color-dark:               rgba(  9,   7,   9,	1);
	--color-text:               rgba(255, 255, 255, 1);
	--color-purple:             rgba(171,  90, 237, 1);
	--color-purple-translucent: rgba(171,  90, 237, 0.8);
	--color-purple-transparent: rgba(171,  90, 237, 0.3);
	--color-purple-hover:       rgba(194, 135, 242, 1);

	--content-width: 800px;
	--extra-width: 4em;
}

@font-face {
	font-family: "linja-pona-4";
	src: url('https://ajlee2006.github.io/linjaponasandbox/linja-pona-4.2.otf') format('opentype'); 
}

html {
	font-family: 'Inter', sans-serif;
	text-rendering: optimizeLegibility;
	font-size: 1.125rem;
	line-height: 1.25;

	color: var(--color-text);
	background: var(--color-background) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 3 1.7320508076"><path d="M0 0.8660254038h1L1.5 0h1L3 0.8660254038L2.5 1.7320508076h-1L1 0.8660254038" stroke="%232D3931" stroke-width="0.05" fill="none"/></svg>');
	background-position: 1.25em 0.5em;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden;

	& *::selection {
		background-color: var(--color-purple-transparent);
	}
}

body {
	background-color: var(--color-background);
	border: 1px solid var(--color-purple-translucent);
	border-radius: 8px;
	margin: 1em auto;
	padding: 0;
	max-width: var(--content-width);

	& > * {
		padding: 2em;

		& > :first-child {
			margin-top: 0;
		}
		& > :last-child {
			margin-bottom: 0;
		}
	}
	& > * + * {
		border-top: 1px solid var(--color-purple-translucent);
	}
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em 0;
	padding: 0;
}
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

sup {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
	font-size: 0.75em;
}

a {
	color: var(--color-purple);
	transition-property: color;
	transition-duration: 0.5s;
	text-underline-offset: 2.5px;
	text-underline-thickness: 1px;

	&:hover, &:focus, &:active {
		color: var(--color-purple-hover);
	}
}

span.t {
	font-family: linja-pona-4;
	white-space: nowrap;
}

code {
	font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
	font-size: 0.9em;
	font-size-adjust: from-font;
	font-weight: 400;
  	line-height: 1; 

	display: inline-block;
	color: var(--color-text);
	background: var(--color-dark);
	border-radius: 4px;
	padding: 0.05em 0.35em;
}

pre {
	background-color: transparent !important;

	& > code {
		display: block;
		overflow-x: scroll;

		background-color: transparent !important;
		border: 1px solid;
		border-color: var(--color-purple-translucent);
		border-radius: 0;
		padding: 1em 0.5em;
		line-height: 1.4;
	}
}

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1em;

	& li:before {
		content: "–";
		position: absolute;
		left: 0;
	}
}

dl {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 0.25em 2em;
	padding: 0;
	margin: 0;

	& > dd {
		margin: 0;
	}
}

img, video {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

header {
	display: flex;
	flex-direction: row;
	align-items: center;

	padding-top: 0.5em;
	padding-bottom: 0.5em;

	& > div {
		flex: 1;

		& > h1 {
			font-size: 1.5rem;
			margin-top: 1rem;
			line-height: 1.5rem;
		}
		& > p:last-child {
			margin-bottom: 1em;
		}
	}

	& > img {
		border-radius: 8px;
		aspect-ratio: 1/1;
		height: 5em;
	}
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	gap: 0.7ch;
	padding-top: 1rem;
	padding-bottom: 1rem;

	& a {
		text-decoration: none;
	}

	& > ul {
		display: inline-flex;
		flex-direction: row;

		font-size: smaller;
		gap: 0.25em;
		margin: 0;
		padding: 0.25em;

		list-style: none;

		background-color: var(--color-dark);
		border-radius: 2em;

		& > li {
			margin: 0;

			&::before {
				content: none;
			}

			& > a {
				display: inline-block;
				padding: 0.5em 1em;

				border-radius: 1.25em;
				text-decoration: none;

				color: var(--color-text);

				&.active {
					background-color: var(--color-purple);
					color: var(--color-dark);
				}
			}
		}
	}
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	padding-top: 1.5em;
	padding-bottom: 1.5em;

	& * {
		padding: 0;
		margin: 0;
	}
}

@media (min-width: 881px) {
	section {
		& > div {
			margin-left: calc(var(--extra-width) * -1);
			width: calc(var(--content-width) + var(--extra-width));

			position: relative;
			z-index: 2;

			&::before {
				content: "";
				position: absolute;
				border-radius: 6px;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-color: var(--color-background);
				border: 1px solid var(--color-purple-translucent);
				z-index: -1;

				clip-path: polygon(
					-1px -1px,
					calc(var(--extra-width) / 2) -1px,
					calc(var(--extra-width) / 2) 3px,
					calc(100% - 2px - var(--extra-width) / 2) 3px,
					calc(100% - 2px - var(--extra-width) / 2) -1px,
					calc(100% + 1px) -1px,
					calc(100% + 1px) calc(100% + 1px),
					calc(100% - 2px - var(--extra-width) / 2) calc(100% + 1px),
					calc(100% - 2px - var(--extra-width) / 2) calc(100% - 3px),
					calc(var(--extra-width) / 2) calc(100% - 3px),
					calc(var(--extra-width) / 2) calc(100% + 1px),
					-1px calc(100% + 1px)
				);
			}

			& > pre > code, & > img, & > video {
				padding: 1em 1.5em;
				padding-bottom: calc(0.85em);
				border: none;
			}

			& > img, & > video {
				width: calc(100% - 2.85em);
			}
		}
	}
}

@media (max-width: 880px) {
	pre > code, div > img, div > video {
		margin: 0 -2em;
		padding: 1.5em 2em;
		border-left: none;
		border-right: none;
	}
}
@media (max-width: 800px) {
	body {
		margin: 0;
		border: none;
		overflow-x: hidden;

		& > * {
			padding: 1em;
		}
	}

	pre > code, div > img, div > video {
		margin: 0 -1em;
		padding: 1.5em 1em;
	}
}

hr { display: none; }

ol {
	list-style: none;
	counter-reset: counter;
	padding-left: 2em;

	& > li {
		counter-increment: counter;
		position: relative;
		margin-top: 0.25em;

		&::before {
			content: "[" counter(counter) "]";
			position: absolute;
			left: -2em;
		}

		& > p {
			display: inline;
		}
	}
}