* {box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@700&family=Martian+Mono:wght@600&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html {scroll-behavior: smooth;}
body {
	margin: 0;
	font-family: 'Ubuntu', sans-serif;
	--accent: #f700af;
	--body-accent: #eb00a8;
	--blend: #ffd8e8;
	--border: #d4c2c8;
	--sidebar: #f9eaee;
	--sidebar-border: #eedfe3;
	background: var(--blend);
	background-image: url('/more/archive/blog/26/res/micro/bg/light.png');
	scrollbar-width: 8px;
	scrollbar-color: var(--accent) var(--blend);
}
/* post content area */
main {
	margin: 0 auto 0 auto;
	display: flex;
	flex-direction: column;
}
main article {
	--text-color: #21191d;
	color: var(--text-color);
	background-color: #fff8f8;
	max-width: 600px;
	font-size: 16px;
	padding: 20px;
	line-height: 30px;
}
img {max-width: 100%;}
header {text-transform: uppercase;}
.side-panel {
	background-color: var(--sidebar);
	border: 3px solid var(--sidebar-border);
	padding: 10px;
}
.side-panel ul {
	display: block;
	padding-left: 0px;
}
.side-panel ul li {
	margin-bottom: 5px;
}
.side-panel ul li a, .side-panel ul li p {
	color: var(--body-accent);
	font-weight: bold;
	margin-block-start: 0;
	margin-block-end: 0;
}
.side-panel ul li ul li a {
	color: var(--text-color);
	font-weight: unset;
	font-size: 1em;
	text-decoration: none;
}
.toc a {
	text-decoration: unset;
	color: var(--text-color);
}
h1 {
	font-size: 3em;
	letter-spacing: -0.1em;
	line-height: 0.8em;
	color: var(--accent);
	text-align: justify;
	padding-right: 3px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Kode Mono', monospace;
	color: var(--accent);
}
h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: unset;}
h2 {
	font-size: 2em;
	line-height: 1.1em;
}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1.15em;}
h6 {font-size: 1.10em;}
a {color: var(--body-accent);}
.footnote-ref a {text-decoration: none;}
ul {list-style: none;}
article ul li:before {
	content: "▪";
	margin-right: 10px;
	font-size: 18px;
	color: var(--accent);
}
pre {
	background-color: #043634;
	border: 2px solid #38726e;
	color: #c8f4f3;
	padding: 10px;
	border-radius: 5px;
	white-space: pre-line;
}
hr {
	border: unset;
	height: 2px;
	background-color: var(--accent);
}
blockquote {
	border-left: 2px solid #5f5f60;
	margin-inline-start: 0px;
	padding-left: 30px;
}
.footnotes-sep:before {
	content: "Footnotes";
	color: var(--accent);
	position: absolute;
	left: 30px;
	transform: translateY(-18px);
	background-color: #fffcfa;
	padding: 3px;
}
.footnotes-list a {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* navbar */
nav.site-nav {
	height: 60px;
	margin: auto;
	display: flex;
	justify-content: center;
	background: url(/resources/nav/spiky.png) repeat-x;
	image-rendering: pixelated;
}
.navbar-links {display: flex;}
.navbar-links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 10px;
	text-decoration: none !important;
	padding: 6px;
}
.navbar-links a:hover {text-decoration: underline !important;}
.nav-icon {
	width: 24px;
	height: 24px;
	margin-bottom: 3px;
	z-index: 50 !important;
	background-size: cover !important;
}
#n-a {color: #c5e7ff;}
#n-a .nav-icon {background: url(/resources/nav/navicons.png) 0 0;}
#n-c {color: #dce1ff;}
#n-c .nav-icon {background: url(/resources/nav/navicons.png) -24px 0;}
#n-b {color: #ffd6fe;}
#n-b .nav-icon {background: url(/resources/nav/navicons.png) -48px 0;}
#n-l {color: #ffdadb;}
#n-l .nav-icon {background: url(/resources/nav/navicons.png) -72px 0;}
#n-m {color: #ffdad6;}
#n-m .nav-icon {background: url(/resources/nav/navicons.png) -96px 0;}
#n-g {color: white;}
#n-g .nav-icon {background: url(/resources/nav/navicons.png) -120px 0;}
#fakeLogo {
	cursor: url(/media/pointer.svg), url(/media/pointer.png), pointer;
	pointer-events: all;
	transform: translateY(-5px);
	transition-duration: 0.3s;
}
#fakeLogo::before {
	content: '';
	width: 90px;
	height: 90px;
	background: url(/resources/nav/homehover.png);
	position: absolute;
	z-index: 0;
	transform: translate(-20px, -5px) scale(0);
	transform-origin: top;
	opacity: 0;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}
#fakeLogo img {
	position: relative;
	z-index: 2;
	width: 50px;
	height: 70px;
}
#fakeLogo:hover {transform: translateY(0px);}
#fakeLogo:hover::before {
	opacity: 0.7;
	transform: translate(-20px, 0px) scale(1);
}
#to-start {
	position: absolute;
	z-index: 1000;
	left: -500px;
	opacity: 0;
}
#to-start:focus {
	opacity: 1;
	left: 0;
}

/* dark theme */
@media (prefers-color-scheme: dark) {
	body {
		background-image: url('/more/archive/blog/26/res/micro/bg/dark.png');
		--border: #504348;
		--blend: #251d21;
		--body-accent: #ff5acf;
		scrollbar-color: var(--accent) var(--blend);
	}
	main article {
		--text-color: #eedfe3;
		background-color: #181114;
	}
	.side-panel {
		--sidebar: #251d21;
		--sidebar-border: #30282b;
		color: #eedfe3;
	}
	.footnotes-sep:before {background-color: #19120c;}
}

/* desktop layout */
@media only screen and (min-width: 900px) {
	#accessibility-button {top: -40px;}
	main {
		margin: 10px auto 10px auto;
		width: 900px;
		flex-direction: row;
	}
	/* these next 2 basically just apply the slanted corners */
	article {
		will-change: transform;
		--p: 2;
		--pixel: calc(var(--p) * 1px);
		--s: calc(var(--pixel) * 6);
		position: relative;
		clip-path: polygon(
			var(--s) 0%,
			calc(100% - var(--s)) 0%,
			100% var(--s), 100% calc(100% - var(--s)),
			calc(100% - var(--s)) 100%,
			var(--s) 100%,
			0% calc(100% - var(--s)),
			0% var(--s));
	}
	article:before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(45deg,var(--border),var(--border));
		--g1:#000 var(--pixel),#0000 0 calc(100% - var(--pixel)),#000 0;
		--g2:#0000   calc(0.707*var(--s)), 
				#000  0 calc(0.707*var(--s) + var(--pixel)),
				#0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
				#000  0 calc(100% - 0.707*var(--s)),
				#0000 0;
		-webkit-mask:
			linear-gradient(45deg ,var(--g2)),
			linear-gradient(-45deg,var(--g2)),
			linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
			linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
		mask:
			linear-gradient(45deg ,var(--g2)),
			linear-gradient(-45deg,var(--g2)),
			linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
			linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
	}

	.side-panel {
		margin: 30px 0 12px 0;
		width: 150px;
		height: 100%;
		/* i basically stole this bit where the sidebar sticks from the minecraft wiki (https://minecraft.wiki) */
		max-height: calc(100vh - 30px);
		position: sticky;
		top: 15px;
		bottom: 15px;
		overflow-y: scroll;
	}
	.side-panel ul li ul li a {font-size: 0.75em;}
	.toc-nav {
		border-right: 0px;
		width: 200px;
	}
	.mb-nav {
		border-left: 0px;
		width: 100px;
	}
}

/* mobile layout (probably shouldn't have this, but whatever) */
@media only screen and (max-width: 900px) {
	.side-panel {margin: 0 15px 0 15px;}
	.toc-nav {border-bottom: 0px;}
	.mb-nav {border-top: 0px;}
	.side-panel ul li {
		margin-bottom: 15px;
	}
}

/* reduced motion layout */
@media (prefers-reduced-motion) {
	#s1 {animation: unset;}
}