:root {
	--bg-col: rgba(18,	15,	18,	1	);
	--co-col: rgba(9,	 7,	 9,	 1	);
	--tx-col: rgba(255, 255, 255, 1	);
	--hl-col: rgba(171, 90,	237, 0.3);
	--pr-col: rgba(171, 90,	237, 1	);
	--pt-col: rgba(171, 90,	237, 0.8);
	--hv-col: rgba(194, 135, 242, 1	);
	--gr-col: rgba(32,	40,	34,	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 {
	color-scheme: dark;

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

	color: var(--tx-col);
	background:
		repeating-linear-gradient(
			30deg,
			var(--gr-col) 0px,
			var(--gr-col) 1px,
			transparent 1px,
			transparent 19px,
			var(--gr-col) 19px,
			var(--gr-col) 20px
		) no-repeat,
		repeating-linear-gradient(
			-60deg,
			transparent 1px,
			transparent 19px,
			var(--gr-col) 19px,
			var(--gr-col) 20px
		) no-repeat;
	background-color: var(--bg-col);
		background-size: cover;
	min-height: 100vh;
}
@supports (font-variable-settings: normal) {
	html {
		font-family: 'InterVariable', sans-serif;
	}
}

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

::selection {
	background-color: var(--hl-col);
}

main {
	background-color: var(--bg-col);
	border: 1px solid var(--pt-col);
	border-radius: 8px;

	margin: 1em auto;
	max-width: var(--content-width);

	& > * {
		padding: 2em;

		& > :first-child {
			margin-top: 0;
		}
		& > :last-child {
			margin-bottom: 0;
		}
	}
	& > * + * {
		border-top: 1px solid var(--pt-col);
	}
}
@media (max-width: 800px) {
	html {
		background: var(--bg-col);
	}

	main {
		margin: 0;
		border: none;

		& > * {
			padding: 1em;
		}
	}
}

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

a {
	color: var(--pr-col);
	transition-property: color;
	transition-duration: 0.5s;

	&:hover, &:focus, &:active {
		color: var(--hv-col);
	}
}
span.n {
	text-decoration-line: underline;
}
a, span.n {
	text-underline-offset: 2.5px;
	text-underline-thickness: 1px;
}
i {
	font-family: linja-pona-4;
	font-style: normal;
	white-space: nowrap;

	&::before {
		content: "[_";
	}
	&::after {
		content: "]";
	}
}

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(--co-col);
		border-radius: 2em;

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

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

	color: var(--tx-col);

	&.active {
		background-color: var(--pr-col);
		color: var(--co-col);
	}
			}
		}
	}
}

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 {
		& pre, & 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(--bg-col);
				border: 1px solid var(--pt-col);
				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)
				);
			}

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

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

code, kbd {
	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;

	display: inline-block;
	padding: 0.05em 0.35em;
	background: var(--co-col);
	color: var(--tx-col);
	border-radius: 8px;
}
pre > code {
	overflow-x: scroll;

	display: block;

	border-radius: 0;
	padding: 1em 0.5em;

	line-height: 1.4;

	background-color: var(--co-col);

	border: 1px solid;
	border-color: var(--pt-col);
}

div > img, div > video {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}
@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) {
	pre > code, div > img, div > video {
		margin: 0 -2em;
	}
}

section ul {
	list-style: none;
	padding: 0;
	margin: 0;

	& li {
		margin: 0.25em 0;
	}

	&.l > li::before {
		content: "–";
		padding-right: 1rem;
	}
}

span.n {
	text-decoration-line: underline;
	text-underline-offset: 2.5px;
	text-underline-thickness: 1px;
}

ul.two-col {
	display: grid;
	column-gap: 2em;
	row-gap: 0.25em;
	grid-template-columns: 6em 1fr;
	grid-template-areas: "date headline";
	padding: 0;
	margin: 0;

	& > li {
		display: contents;
		padding: 0;
		margin: 0;

		& > time {
			grid-area: "date";
		}
		& > :not(time) {
			grid-area: "headline";
		}
		& > p {
			margin: 0;
			padding: 0;
		}
	}
}

ul.three-col {
	width: 100%;

	display: grid;
	column-gap: 2em;
	row-gap: 0.25em;
	grid-template-columns: 6em auto 8em;
	grid-template-areas: "date topic description";
	padding: 0;
	margin: 0;

	& > li {
		display: contents;
		padding: 0;
		margin: 0;

		& > time {
			grid-area: "date";
		}
		& > a {
			grid-area: "topic";
		}
		& > p {
			margin: 0;
			padding: 0;
			text-align: right;
			grid-area: "description";
		}
	}
}

ul.tags {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-start;

	font-size: smaller;
	gap: 0.7ch;
	margin: 0;
	padding: 0;
	border-radius: 2em;

	margin-top: -1em;
	margin-bottom: -1em;

	& > li {
		& > p {
			display: inline-block;
			background-color: var(--co-col);
			padding: 0.5em 1em;
			border-radius: 1.25em;
			text-decoration: none;

			color: var(--tx-col);

			margin: 0;

			&.active {
				background-color: var(--pr-col);
				color: var(--co-col);
			}
		}
	}

	& > li:hover {
		cursor: pointer;
	}
}