html {
	--pink: #ff0a52;
	--blue: #b7ebff;

	--pink0: #ff0a52;
	--pink1: #eb0043;
	--pink2: #ffeef3;

	--blue0: #b7ebff;
	--blue1: #1779c4;
	--blue2: #f0f8ff;

	--primary: #000;
	--secondary: #fff;
	--bright: #000;
	--dark: #d1cdc9;
	--background: #eee;
}

html:has(body.dark) {
	--background: #242424;
}

body.dark {
	--pink0: #ea104e;
	--pink1: #ff0a52;
	--pink2: #400113;

	--blue0: #4eaee9;
	--blue1: #4eaee9;
	--blue2: #002340;

	--primary: #c8c3bc;
	--secondary: #131516;

	--bright: #eee;
	--dark: #66615a;
	--background: #000;
}

@media (color-gamut: p3) {
	html {
		--pink: oklch(0.657 0.294 16.698);
		--blue: oklch(0.907 0.074 218.641);

		--pink0: oklch(0.657 0.294 16.698);
		--pink1: oklch(0.615 0.278 18.568);
		--pink2: oklch(0.966 0.024 358.907);

		--blue0: oklch(90.7% 0.073 218.6);
		--blue1: oklch(0.56 0.163 241.961);
		--blue2: oklch(0.975 0.015 239.425);

		--primary: #000;
		--secondary: #fff;
		--bright: #000;
		--dark: #d1cdc9;
		--background: #eee;
	}

	html:has(body.dark) {
		--background: #242424;
	}

	body.dark {
		--pink0: oklch(0.618 0.274 15.973);
		--pink1: oklch(0.657 0.294 16.698);
		--pink2: oklch(0.246 0.109 12.066);

		--blue0: oklch(0.714 0.147 232.544);
		--blue1: oklch(0.714 0.147 232.544);
		--blue2: oklch(0.249 0.077 241.818);

		--primary: #c8c3bc;
		--secondary: #131516;

		--bright: #eee;
		--dark: #66615a;
		--background: #000;
	}
}

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

body {
	color: var(--primary);
	background-color: var(--background);
	font-family: sans-serif;
	font-size: 18px;
}

article {
	display: flex;
	margin: auto;
	justify-content: center;
	flex-wrap: wrap;
	width: 1030px;
}

@font-face {
	font-family: Mont;
	src: url('/assets/fonts/mont/Mont-HeavyDEMO.otf');
	font-display: swap;
}

h1,
h2 {
	width: 100%;
	font-family: Mont;
	margin-block-end: 0.6em;
	font-weight: normal;
}

#darkModeIcon {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
	background-image: url('data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFJElEQVRoQ+2ZW6gWVRTHzzG1NMtuFAZaWNrNWxKooBhGlBKhKdZD9BBZERVBVBKYRx+8awia2oUoXwSjsoguFD1YUklhpkklCkl5v4ulkvb/wQwuFjOz98yc74MDZ8Gfb/aetddea8/ee12+1pYOTq0dXP+WTgOSL9hTv2OEscJQYYBwlXCJcFrYK+xJfpfod317ffm6X2CUFHlSeEDoFanUm+KbFskbZKtqwEhJnpeseHASw7Baz88KR8oMKuItawCrvChZwS4llDgu3oeFj0qMiWItY8BtkviecHOU5PNMf+txgvBzyXFR7LEGjJa0j4XLcqTuUH9XoZ97f1RtDvcvUdpUYIoxAOU/F7hpPG1Xx3Rhs7BF6G4Yzun5XuGLCnpFDwkZcKskfZux8mfVt1iYKfwjcDjZ45aWqfFMtCYVGYsMuFgyfxAwwhIKo+z7SWcf/e4SLjBM+/XcXzhRUa/oYUUGLJeUp5ykk2rfI3xj+p/XMzeTpRfVWBitRQ3GPAPukMzvBXtVsqenCtxEln5S43bT8a+erxGO1dAremieARy8u52U+WpzYC1xKx0SrBy21uRoDWoyZhnA6m90cneqjR9g/1vCSH/LPKa+t2rqFT08y4A3NBolLBHrfJAh9SX1EVJYGqZGQ5xWllXegIvERNTY2zCz+jcKXJ2eXlXHc6aTc3KhcCZ6CWsyegPGSd5XTib7nv2fRe+o8xHzgpjn0po6lRruDZit0TOcBPzAthypHNhJ5t1uPV9bSoOazN6AdZJ3v5GJQ+JKZGtkEYf1UfPisJ6vqKlTqeHeAFbaRpufqH1fgUS2Fk4rJc4JMdOpUlrUYPYGHJCsK428t90K+6leUMcC1zlI7a01dCo11BvAytmIMst52QkIKz5zM5IukjY2hUIGzJUWLxdoQoaGJ+5meNbqmZCjKRTaQgR0Twc02aD3JPcp4a2JUElmGk7egF814y1m1tAhhpVD7P0EZ8NHqA0xxhtAuDDRzPSnnq8LzMyhJx/oYfjw5jcJDY9IvQGzNOkrTuEb1CbnLSLvD+BdKtgwoylf4E7N8rWbKSY5Gagx5MXEQSnhE/AhnzZE80So/wIoQDhwuZkU50YoneeNU1by4zanLJ6ZcmNTqxKrNOHjTpG8cNqyYfwmwdeNOA/ES9814ktk5QPDNdGPbrLf1R4ihEIEvhT5sq8fkWY+Ibzb3kbkpZTsW2o6lggZSGBCdJcYGG+dWzqG8JsztS8kJPZ9ngFkVaSVVNtS4lCyFWLqmw+KD2XtoU7lUGpZKawQQrdb0I6isorPthCWVVbJm4SKHn6F/wmyiEuButOXApWN3wS8N9uNjLCvcHWyYPRlUpEBOCYOHnvfEkY8JFArDRE+hKqdDTVCY/x7zs7rVQxgDPc7sY4Nseln9Qgf2oTQwaa2RNJD8u/lhIyhss1/EXj6TArVRhmEAD4zpUZPf6iDg/1hYlSRQihPqM2KXh/SXO+jfEiMAcw1QiCwy1tBnB3JD3ueinUe8TWoO1EY5ozk0V96wX8KePdCijUAIWwnYn1/JvwEfG5K7dww3DhcpxxGcmv+AOS5iLj9pggEkkEqYwDCONhzBHIEe8UGJ4pgoJbEuaIyEl1XKmtAqgd+AkPGRygWYuFCoBrCWcLjl6KqBqSTEHYQN5FC2gAwRomDYlojvCaQSFWiugakk1II4K6nsjdY4LyQVpIz48FJbKgxoSiRKdU/yvf/VdLaDGovA+rqUXl8pwGVl66dBv4PhL/YMX08LQkAAAAASUVORK5CYII=');
	background-size: 26px 26px;
}

body.dark #darkModeIcon {
	filter: invert(0.9);
	background-image: url('data: image/png;base64,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');
}

md {
	display: block;
}

md.closed {
	cursor: pointer;
}

md.closed:hover {
	background: linear-gradient(90deg, var(--secondary) 0%, var(--blue0) 50%, var(--secondary) 100%);
	background-size: 200% 200%;
	animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

md.closed :not(h2) {
	display: none;
}

md.closed h2 {
	margin: 0;
}

.mie {
	background-color: var(--secondary);
	color: var(--primary);
}

.mie * {
	border-color: var(--background) !important;
}

.ace_hidden-cursors {
	opacity: 0;
}

.ace_numeric,
.ace_string,
.ace_boolean {
	color: var(--pink1) !important;
}

.ace_scroller,
.ace_active-line {
	background-color: var(--secondary) !important;
}

.mie .ace_cursor {
	border-color: var(--primary) !important;
}

.mie.p5 .mie-logo {
	width: 16px !important;
	background-image: url('../assets/favicon.png') !important;
}

/* .mie.p5 .mie-logo::before {
	font-family: Mont;
	font-size: 16px;
	vertical-align: bottom;
	color: var(--pink0);
	content: 'p5play';
} */

a {
	color: var(--blue1);
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

/* shimmer text on hover */
a:hover {
	color: var(--pink0);
	text-decoration: underline;
}

p a:hover {
	background: linear-gradient(90deg, var(--secondary) 0%, var(--blue0) 50%, var(--secondary) 100%);
	background-size: 200% 200%;
	animation: shimmer 1.2s infinite;
	border-radius: 5px;
}

li {
	padding: 5px;
}

nav {
	width: 100%;
	user-select: none;
	letter-spacing: 0.02em;
	margin-top: 16px;
}

#topNav {
	font-family: Mont, sans-serif;
	font-display: swap;
}

nav a,
a.navLink {
	display: inline-block;
	font-size: 24px;
	font-weight: normal;
	user-select: none;
	color: var(--blue1);
	/* 	-webkit-text-stroke: 1.6px var(--pink0); */
	/* 	text-shadow: 3px 1.8px 0px var(--blue1); */
	text-decoration: none;
	transition: 100ms;
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: middle;
}

a.navLink {
	text-align: center;
	line-height: 1.5;
}

#topNav a.active,
#topNav a:hover {
	color: var(--pink0);
	text-shadow: 2px 2px 0px var(--blue0);
}

#logoLink {
	font-family: Mont, sans-serif;
	font-display: swap;
	font-size: 48px;
	color: var(--pink0);
	text-shadow: 3px 3px 0px var(--blue0);
}

#logoLink:hover {
	color: transparent !important;
	-webkit-text-stroke: 1.6px var(--pink0);
}

#topNav a.active {
	font-size: 34px;
}

#topNav a:hover {
	scale: 1.2;
	translate: 0 -2px;
}

#topNav img {
	height: 32px;
	vertical-align: middle;
}

#topNav .p5play_logo {
	height: 48px;
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

.p5play_logo:hover {
	animation: spin 2s linear infinite;
}

#topNav img:not(.p5play_logo):hover {
	box-shadow: 2px 2px 10px var(--pink0);
}

nav hr {
	border: 1px solid var(--blue0);
	height: 26px;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

#toc {
	display: none;
	align-items: center;
}

.submenu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

a.btn,
#toc a,
#refs :not(:last-child) a:not(:first-child) {
	background-color: var(--blue2);
	color: var(--blue1);
	box-shadow: var(--blue0) 3px 3px 0px;
	height: min-content;
	padding: 6px;
	margin: 2px;
	transition: ease-out color 0.3s, ease-out background-color 0.3s;
}

#toc a.adv {
	background-color: var(--pink2);
	color: var(--dark);
	box-shadow: var(--dark) 3px 3px 0px;
}

#toc #prevPage {
	margin-right: 20px;
}

#toc #nextPage {
	margin-left: 20px;
}

a.btn:hover,
#toc a.active,
#toc a:hover,
#refs :not(:last-child) a:not(:first-child).active,
#refs :not(:last-child) a:not(:first-child):hover {
	background-color: var(--blue1);
	color: var(--blue2);
	box-shadow: var(--blue0) 3px 3px 0px;
	text-decoration: none;
}

#toc a.adv.active,
#toc a.adv:hover {
	background-color: var(--pink0);
	color: var(--pink2);
	box-shadow: var(--pink1) 3px 3px 0px;
}

a.btn:hover,
#toc a:hover,
#refs :not(:last-child) a:not(:first-child):hover {
	scale: 1.05;
}

.socials:hover,
#darkMode:hover {
	text-decoration: none;
}

#topNav #darkMode:hover {
	font-size: 24px;
	cursor: pointer;
}

.superLink {
	font-size: 32px;
	color: var(--pink0);
}

p {
	text-align: left;
	line-height: 1.3;
}

code {
	padding: 2px;
	border: 1px solid gray;
	border-radius: 5px;
}

.page {
	display: none;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	row-gap: 20px;
}

.page>md,
.page>div {
	width: 45%;
}

.page>.minis,
.page>.mie {
	width: 49%;
	/* padding: 2%; */
}

nav,
.page>md,
.page>div:not(.mie):not(.break):not(.minis),
.minis>md {
	padding: 20px;
	/* border: 2px solid var(--dark); */
	border-radius: 10px;
	background-color: var(--secondary);
}

.minis>md {
	padding: 4%;
}

nav {
	padding: 8px;
}

#home #topNav {
	padding: 8px;
	/* 	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0; */
}

#langBreak {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 6px;
}

#langBreak .break {
	width: unset;
	flex-grow: 1;
	box-shadow: 0px 4px 0px var(--blue0);
}

#langNav {
	width: fit-content;
	display: flex;
	margin-top: 0;
	/* 	border-radius: 16px; */
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	/* 	border-top: 4px solid var(--blue0); */
	/* 	border-top: 0; */
	border-bottom: 3px solid var(--pink0);
	/* 	border-bottom: 4px solid var(--pink0); */
	box-shadow: 0px 3px 0px var(--blue0);
}

#langNav hr {
	height: 10px;
}

#littleLangs a,
#langNav a {
	width: max-content;
	color: var(--dark);
	font-size: 16px;
	writing-mode: horizontal-tb;
	transition: 0.3s;
	font-weight: bold;
}

#langNav a.active,
#langNav a:hover {
	color: var(--pink1);
}

.page>md> :first-child,
.page>div:not(.mie):not(.break):not(.minis)> :first-child,
.page>div>md> :first-child {
	margin-top: 0;
}

.page>md> :last-child,
.page>div:not(.mie):not(.break):not(.minis)> :last-child,
.page>div>md> :last-child {
	margin-bottom: 0;
}

.page>.full {
	width: 96%;
}

.break {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 16px;
	border: var(--pink0) 2px solid;
	box-shadow: 4px 4px 0px var(--blue0);
}

.page>.break {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

.minis {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 2%;
	row-gap: 20px;
}

.minis.horiz>div {
	width: 100%;
}

.minis>div {
	width: 48%;
}

#otherLinks {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4%;
}

footer {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

footer p {
	text-align: center;
	margin: 0;
}

.text-small {
	font-size: 14px;
}

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

	html,
	body {
		overflow-x: hidden;
	}

	article {
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
	}

	nav {
		display: flex;
		align-items: center;
		width: 100%;
		overflow: scroll;
		gap: 10px;
	}

	#shields {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
	}

	#shields img {
		height: 28px;
	}

	.mie {
		width: max-content;
	}

	.page {
		justify-content: center;
	}

	.page>.mie {
		width: 100%;
	}

	.page>md,
	.page>div:not(.mie):not(.break):not(.minis) {
		width: 100%;
		border: 0;
	}

	.page>.mie {
		max-width: 500px;
	}

	.minis>md {
		padding: 20px;
	}

	.minis>.mie {
		width: 49%;
	}

	.page>.minis {
		justify-content: center;
		width: 100%;
		padding: 0;
	}

	#logoLink {
		white-space: nowrap;
		order: -3;
	}

	#topNav>hr:first-of-type {
		order: -2;
	}

	#topNav a.active:not(#logoLink) {
		order: -1;
	}
}