/* #region VARIABLES */
:root {
	/* #region BASICS */
		--clr-bg-strong: light-dark(rgba(0, 0, 0, 0.027), rgba(255, 255, 255, 0.027));
		--clr-bg-weak: light-dark(rgba(0, 0, 0, 0.013), rgba(255, 255, 255, 0.013));

		--bg-grid: repeating-linear-gradient(
			var(--clr-bg-strong) 0px, var(--clr-bg-strong) 1px,
			transparent 1px, transparent 11px,
			var(--clr-bg-weak) 11px, var(--clr-bg-weak) 13px,
			transparent 13px, transparent 23px,
			var(--clr-bg-weak) 23px, var(--clr-bg-weak) 25px,
			transparent 25px, transparent 35px,
			var(--clr-bg-weak) 35px, var(--clr-bg-weak) 37px,
			transparent 37px, transparent 47px,
			var(--clr-bg-strong) 47px, var(--clr-bg-strong) 48px
		),
		repeating-linear-gradient(
			90deg,
			var(--clr-bg-strong) 0px, var(--clr-bg-strong) 1px,
			transparent 1px, transparent 11px,
			var(--clr-bg-weak) 11px, var(--clr-bg-weak) 13px,
			transparent 13px, transparent 23px,
			var(--clr-bg-weak) 23px, var(--clr-bg-weak) 25px,
			transparent 25px, transparent 35px,
			var(--clr-bg-weak) 35px, var(--clr-bg-weak) 37px,
			transparent 37px, transparent 47px,
			var(--clr-bg-strong) 47px, var(--clr-bg-strong) 48px
		);

		--bg-lines: repeating-linear-gradient(
			var(--clr-bg-strong) 0px, var(--clr-bg-strong) 1px,
			transparent 1px, transparent 11px,
			var(--clr-bg-weak) 11px, var(--clr-bg-weak) 13px,
			transparent 13px, transparent 23px,
			var(--clr-bg-weak) 23px, var(--clr-bg-weak) 25px,
			transparent 25px, transparent 35px,
			var(--clr-bg-weak) 35px, var(--clr-bg-weak) 37px,
			transparent 37px, transparent 47px,
			var(--clr-bg-strong) 47px, var(--clr-bg-strong) 48px
		);

		--clr-text: light-dark(black, #ddd);
		--clr-text-sec: light-dark(#AAA, #999);
		--clr-bg: light-dark(#d3f3ff, #192142);
		--clr-bg-sec: light-dark(white, #333) /* #372416*/; /*#372416 #422619 #351d12* */

		--clr-scrollbar: light-dark(#1a6673, #32569b);
		--clr-scrollbar-bg: transparent;

		--prim-bg: var(--bg-grid);
	/* #endregion BASICS

	/* #region HEADER – h1, .last-updated */
		--clr-h1-dropshadow: light-dark(#d4b9ee, #74427b); /* #7b6242 */
		--clr-h1-subtitle: light-dark(#872295, #cf93db); /* #dbbb93 */
		--clr-h1-supertitle: light-dark(#1e62cc, #8297f4); /*#929fd9*/
	/* #endregion */

	/* #region NAV – nav, #nav-links, #nav-current */
		--clr-nav: light-dark(#729cb5, #7095d0);
		--clr-nav-hover: light-dark(black, white);

		--clr-nav-current: light-dark(gray, var(--clr-nav));
		--clr-nav-current-hover: var(--clr-text);
	/* #endregion */

	/* #region LINK BUTTONS */
		--clr-link-button-text: var(--clr-text);
		--clr-link-button-bg: var(--clr-link-button-cyan-bg);
		--clr-link-button-border: var(--clr-link-button-cyan-border);

		--clr-link-button-red-text: var(--clr-text);
		--clr-link-button-red-bg: light-dark(hsl(0, 100%, 86.7%), hsl(0, 53.7%, 34.7%));
		--clr-link-button-red-border: light-dark(hsl(0, 62%, 69%), hsl(0, 44.2%, 25.3%));

		--clr-link-button-brown-text: var(--clr-text);
		--clr-link-button-brown-text-hover: var(--clr-nav-hover);
		--clr-link-button-brown-bg: light-dark(hsl(25.7, 55.6%, 75.3%), hsl(17, 28%, 35%));
		--clr-link-button-brown-border: light-dark(hsl(25.3, 33%, 54.9%), hsl(23, 24%, 23%));

		--clr-link-button-yellow-text: var(--clr-text);
		--clr-link-button-yellow-bg: light-dark(hsl(36.6, 100%, 80.4%), hsl(37, 44.2%, 32.4%));
		--clr-link-button-yellow-border: light-dark(hsl(46.2, 49.5%, 60.4%), hsl(46.7, 37.2%, 23.7%));

		--clr-link-button-green-text: var(--clr-text);
		--clr-link-button-green-bg: light-dark(hsl(120, 65%, 75%), hsl(120, 55.9%, 28.4%));
		--clr-link-button-green-border: light-dark(hsl(120, 45%, 60%), hsl(120, 40.5%, 23.7%));

		--clr-link-button-cyan-text: var(--clr-text);
		--clr-link-button-cyan-bg: light-dark(hsl(195.1, 100%, 75%), hsl(202.6, 68.6%, 31.2%));
		--clr-link-button-cyan-border: light-dark(hsl(201.3, 66.2%, 58.2%), hsl(201.3, 49.2%, 24.7%));

		--clr-link-button-purple-text: var(--clr-text);
		--clr-link-button-purple-bg: light-dark(hsl(264.4, 100%, 87.5%), hsl(247.7, 53.8%, 51.6%));
		--clr-link-button-purple-border: light-dark(hsl(261.3, 80.9%, 69.2%), hsl(258.6, 49.2%, 34.7%));

		--clr-link-button-pink-text: var(--clr-text);
		--clr-link-button-pink-bg: light-dark(hsl(312, 100%, 87%), hsl(304.4, 43.2%, 43.5%));
		--clr-link-button-pink-border: light-dark(hsl(303, 81%, 69%), hsl(307, 50.3%, 30%));

		--clr-link-button-gray-bg: light-dark(hsl(0, 1.9%, 78.8%), hsl(0, 0%, 32.5%));
		--clr-link-button-gray-border: light-dark(hsl(0, 0%, 56.5%), hsl(0, 0%, 24.3%));

		--clr-link-button-black-text: light-dark(#d0d0d0, var(--clr-pt));
		--clr-link-button-black-text-hover: light-dark(#e6e6e6, var(--clr-nav-hover));
		--clr-link-button-black-bg: light-dark(hsl(0, 0%, 34.9%), hsl(0, 0%, 20%));
		--clr-link-button-black-border: light-dark(hsl(0, 0%, 59.2%), hsl(0, 0%, 14%));

		--clr-link-button-white-text: light-dark(var(--clr-pt), #2b2b2b);
		--clr-link-button-white-text-hover: light-dark(var(--clr-nav-hover), #2b2b2b);
		--clr-link-button-white-bg: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
		--clr-link-button-white-border: light-dark(hsl(0, 0%, 14%), hsl(0, 0%, 70%));
	/* #endregion LINK BUTTONS */

	/* #region TABLE OF CONTENTS */
		--clr-toc-symbol: light-dark(#222, #aaa);
		--clr-toc-symbol-border: light-dark(white, #0007);
		--clr-toc-bg: light-dark(#dbf5ff, #233b59);
		--clr-toc-scrollbar: light-dark(#3d84a6, #3d84a6);
		--clr-toc-border: light-dark(#acacac, black);
		--clr-toc-shadow: light-dark(white, black);
		--clr-toc-wrappers: light-dark(#666, #aaa);
		--clr-toc-wrappers-hover: light-dark(#4b2e16, #ddd);
		--clr-toc-link: var(--clr-text);
		--clr-toc-link-hover: light-dark(#4b2e16, white);
	/* #endregion TABLE OF CONTENTS */

	/* #region HEADINGS – <h1>-<h6> */
		--clr-h1-bg: light-dark(hsl(0, 0%, 87%), hsl(0, 0%, 17%));
		--clr-h1-border: light-dark(hsl(0, 0%, 68.2%), hsl(from var(--clr-text) h s calc(l - calc(l * l * 0.006))));

		--clr-h2: light-dark(#9f1c1c, #FFA098);
		--clr-h2-subtitle: light-dark(#c42828, #D14D41);
		--clr-h2-bg: light-dark(hsl(from #D14D41 h calc(s - 30) 84), hsl(from #D14D41 h calc(s - 30) 16));
		--clr-h2-border: light-dark(hsl(5.1, 57.7%, 72.2%), hsl(from #D14D41 h s calc(l - calc(l * l * 0.006))));
		
		--clr-h3: light-dark(#8e5f12, #ffbb46);
		--clr-h3-subtitle: light-dark(#ae761b, #d08b14);
		--clr-h3-bg: light-dark(hsl(from #ae761b h calc(s - 30) 84), hsl(from #d08b14 h calc(s - 30) 16));
		--clr-h3-border: light-dark(hsl(36.8, 70.2%, 63.1%), hsl(from #d08b14 h s calc(l - calc(l * l * 0.006))));

		--clr-h4: light-dark(#1a6823, #CFE37C);
		--clr-h4-subtitle: light-dark(#118a1f, #879A39);
		--clr-h4-bg: light-dark(hsl(from #118a1f h calc(s - 30) 84), hsl(from #879A39 h calc(s - 30) 16));
		--clr-h4-border: light-dark(hsl(127, 35.8%, 62.2%), hsl(from #879A39 h s calc(l - calc(l * l * 0.006))));

		--clr-h5: light-dark(#375793, #98CFFF);
		--clr-h5-subtitle: light-dark(#557bc1, #4385BE);
		--clr-h5-bg: light-dark(hsl(218.9, 55.2%, 86.9%), hsl(from #4385BE h calc(s - 30) 16));
		--clr-h5-border: light-dark(hsl(218.7, 52.9%, 66.7%), hsl(from #4385BE h s calc(l - calc(l * l * 0.006))));

		--clr-h6: light-dark(#733299, #FFAED7);
		--clr-h6-subtitle: light-dark(#9955c1, #CE5D97);
		--clr-h6-bg: light-dark(hsl(from #9955c1 h calc(s - 30) 84), hsl(from #CE5D97 h calc(s - 30) 16));
		--clr-h6-border: light-dark(hsl(277.5, 38.6%, 67.5%), hsl(from #CE5D97 h s calc(l - calc(l * l * 0.006))));
	/* #endregion HEADINGS */

	/* #region LINKS */
		--clr-link-none: var(--clr-text-sec);
		--clr-link-unvisited: light-dark(#a18a06, #ffdb63);
		--clr-link-visited: light-dark(#c95502, #ffa363);
	/* #endregion LINKS */
	
	/* #region INLINE BUTTON */
		--clr-inline-button-line: light-dark(#4646aa, #a1a1ff);
		--clr-inline-button-line-disabled: light-dark(#686888, #686888);
	/* #endregion INLINE BUTTON */

	/* #region HOVERCARDS */
		--clr-hc: light-dark(#213499, #cbf7ff);
		--clr-hc-hover: light-dark(#1a5bd2, #2eceea);
		
		/* #region HOVERCARD NOTES */
			--clr-hcn-border: light-dark(#ffe4d9, #593b27);
			--clr-hcn-border2: light-dark(#999, black);
			--clr-hcn-title-footer: var(--clr-hcn-border);
			--clr-hcn-bg: var(--clr-bg-sec);
			--clr-hcn-shadow: light-dark(#c1bab3, black);
			--clr-hcn-tag-bg: light-dark(#ffe6c8, black);
			--clr-hcn-scrollbar: light-dark(#a3743c, #99642c);
		/* #endregion HOVERCARD NOTES */
	/* #endregion HOVERCARDS */

	/* #region HR – Horizontal Rule */
		--clr-hr: light-dark(#ccc, #444);
	/* #endregion HR – Horizontal Rule */
	
	/* #region PT – Paranthesis */
		--clr-pt: light-dark(#738085, #8f929f);
	/* #endregion PT */
	
	/* #region CODE */
		--clr-inline-code-bg: light-dark(#f0deff, #352d3e);
		--clr-inline-code-border: light-dark(#d1a3ff, #73617b);
	/* #endregion CODE */

	/* #region KBD – Keyboard */
		--clr-kbd: light-dark(#ffeede, #262626);
		--clr-kbd-accent: light-dark(#e8d9c7, black);
		--clr-kbd-rim: light-dark(white, #fff2);
	/* #endregion KBD */
	
	/* #region PRE */
		--clr-pre-bg: light-dark(#d9d9f5, #241B2D);
		--clr-pre-border-tl: light-dark(#f1efff, #32263e);
		--clr-pre-border-br: light-dark(#c8c1f9, #1a0f26);
		--clr-pre-scrollbar: light-dark(#7566ac, #7d59b3) transparent;

		/* #region CODEBLOCK */
			--clr-codeblock-normal: var(--clr-text);
			--clr-codeblock-comment: light-dark(#6f6fa7, #a190a8);
			--clr-codeblock-highlight: light-dark(#086399, #a4eaff);
		/* #endregion CODEBLOCK */
	/* #endregion PRE */

	/* #region BLOCKQUOTE */
		--clr-blockquote-bg: light-dark(#F9F9F9, #4a4a4a);
		--clr-blockquote-border: light-dark(#CCC, #242424);
		--clr-blockquote-rim: light-dark(#ececec, #393838);
		--clr-blockquote-pattern: light-dark(#ececec, #515151);
	/* #endregion BLOCKQUOTE */

	/* #region BOX */
		--clr-box-title: var(--clr-text);
		--clr-box-bg: light-dark(#eaf2f4, #333);
		--clr-box-bg-2: light-dark(#c9dde2, #4e576d);
		--clr-box-border-sides: light-dark(#ccc, #555);
		--clr-box-border-top: light-dark(#ccc, #777);
		--clr-box-border-bottom: light-dark(#ccc, #444);
		--clr-box-rim: var(--clr-summary-pattern);
	/* #endregion BOX */

	/* #region LISTS */
		--clr-li-marker: light-dark(rgb(6 115 165), rgb(168 240 255));
		--clr-li-indent: var(--clr-text-ter);
	/* #endregion LISTS */

	/* #region BOLD – <b> */
		--clr-bold: light-dark(#7e47e5, #99ffe8);
		--clr-bold-two: light-dark(#bc6726, #ff9b3d);
	/* #endregion BOLD – <b> */

	--clr-border: light-dark(#999, black);
	--clr-shadow: light-dark(#7c7c84, black);

	/* #region SPOILERS – <s-p> */
		--clr-spoiler: black;
		--clr-spoiler-text: light-dark(#eee, var(--clr-text));
	/* #endregion SPOILERS – <s-p> */

	/* #region FIGURE */
		--clr-figure-bg: light-dark(white, #444);
		--clr-figure-border: light-dark(rgb(189, 189, 189), #555);
	/* #endregion FIGURE */

	--clr-input-bg: rgba(0, 1, 36, .1), rgba(0, 1, 36, .3);
	--clr-input-border: #5b5b5b, #5b5b5b;
	--clr-textarea-bg: light-dark(rgba(0, 1, 36, .1), rgba(0, 1, 36, .3));
	--clr-button-bg: light-dark(white, #353535);
	--clr-button-border: light-dark(#c8c8c8, #575757);
	--clr-button-hover: light-dark(#919191, black);
	
	/* #region SUMMARY */
		--clr-summary-bg: light-dark(var(--clr-blockquote-bg), #404040);
		--clr-summary-border: light-dark(#e3e3e3, #555555);
		--clr-summary-pattern: light-dark(#f0f0f0, #464545);
		--clr-summary-shadow: light-dark(#b9e0ec, #111);
	/* #endregion SUMMARY */

	/* #region <DETAILS> & <SUMMARY> */
		--clr-details-bg: light-dark(#e6f1f9, #292929);
		--clr-details-rim: light-dark(white, #0009);
		--clr-details-accent: light-dark(#b3aeae, #b7b7b7);
		--clr-details-underline: light-dark(#b3aeae, #808080);
		--clr-details-border-top: light-dark(#b3aeae, #737272);
		--clr-details-border-right: light-dark(#b3aeae, #595959);
		--clr-details-border-bottom: light-dark(#b3aeae, #535353);

		/* #region COLORS */
			/* #region RED */
				--clr-red-bg: light-dark(#f9cbcb, #351d1d); /*#ff434321 #6062ff21*/
				--clr-red-rim: var(--clr-details-rim);
				--clr-red-accent: light-dark(#d74e4e, #ff5353); /*#609af4*/
				--clr-red-underline: light-dark(#da6565, #9e3333);
				--clr-red-border-top: light-dark(#e38787, #972d2d);
				--clr-red-border-right: light-dark(#e38787, #752525);
				--clr-red-border-bottom: light-dark(#e38787, #731e1e);
			/* #endregion RED */

			/* #region ORANGE */
				--clr-orange-bg: light-dark(#f9daca, #352018); /*#ff8d6021 #6062ff21*/
				--clr-orange-rim: var(--clr-details-rim);
				--clr-orange-accent: light-dark(#c88127, #eca03e); /*#609af4*/
				--clr-orange-underline: light-dark(#d89640, #ac762f);
				--clr-orange-border-top: light-dark(#e1a455, #7b511a);
				--clr-orange-border-right: light-dark(#e1a455, #664213);
				--clr-orange-border-bottom: light-dark(#e1a455, #53350e);
			/* #endregion ORANGE */

			/* #region YELLOW */
				--clr-yellow-bg: light-dark(#f9e7a1, #2f2b1c); /* #ffdf6021 */
				--clr-yellow-rim: var(--clr-details-rim);
				--clr-yellow-accent: light-dark(#bbb10f, #fff11e);
				--clr-yellow-underline: light-dark(#ccc53c, #999127);
				--clr-yellow-border-top: light-dark(#bbb10f, #8a7f27);
				--clr-yellow-border-right: light-dark(#bbb10f, #64581d);
				--clr-yellow-border-bottom: light-dark(#bbb10f, #66501c);
			/* #endregion YELLOW */

			/* #region GREEN */
				--clr-green-bg: light-dark(#bfffd2, #1a2f1b); /* #60ff6a21 #6062ff21 */
				--clr-green-rim: var(--clr-details-rim);
				--clr-green-accent: light-dark(#63b961, #3eec82); /*#609af4*/
				--clr-green-underline: light-dark(#79db77, #238147);
				--clr-green-border-top: light-dark(#63b961, #2e791e);
				--clr-green-border-right: light-dark(#63b961, #1a5b21);
				--clr-green-border-bottom: light-dark(#63b961, #145918);
			/* #endregion GREEN */

			/* #region BLUE */
				--clr-blue-bg: light-dark(#c8e5ff, #192a3f); /* #60a6ff21 #6062ff21 */
				--clr-blue-rim: var(--clr-details-rim);
				--clr-blue-accent: light-dark(#3eb3ec, #3eb3ec); /*#609af4*/
				--clr-blue-underline: light-dark(#73c6f0, #286c8f);
				--clr-blue-border-top: light-dark(#3eb3ec, #246d8a);
				--clr-blue-border-right: light-dark(#3eb3ec, #255075);
				--clr-blue-border-bottom: light-dark(#3eb3ec, #1e4773);
			/* #endregion BLUE */

			/* #region PURPLE */
				--clr-purple-bg: light-dark(#e3d9ff, #2a1e39);
				--clr-purple-rim: var(--clr-details-rim);
				--clr-purple-accent: light-dark(#8060f4, #9e83ff);
				--clr-purple-underline: light-dark(#a28cf3, #715dbd);
				--clr-purple-border-top: light-dark(#9583d9, #712d97);
				--clr-purple-border-right: light-dark(#9583d9, #752574);
				--clr-purple-border-bottom: light-dark(#9583d9, #5c1e73);
			/* #endregion PURPLE */
		/* #endregion COLORS */
	/* #endregion <DETAILS> & <SUMMARY> */

	/* #region ONE-OFF COLORS */
		--clr-sitemap-table-borders: light-dark(#0006, #fff6);
		--clr-ref-button-bg: light-dark(white, #335);
		--clr-ref-button-border: light-dark(#8686f2, #66F);
	/* #endregion ONE-OFF COLORS */

	/* #region .CSS SPECIFIC */
		/* #region CARDS.CSS */
			--clr-tag-button-unselected: light-dark(#999, #999);
			--clr-tag-button-selected: light-dark(black, white);
			--clr-tag-button-inverse-selected: light-dark(#9c1c1c, #ff7070); /*#f99*/

			--clr-tag: var(--clr-text);
			--clr-tag-bg: var(--clr-tag-button-bg);
			--clr-tag-border: var(--clr-tag-button-border);
			--clr-tag-red: light-dark(var(--clr-tag), #ff4e4e);
			--clr-tag-red-bg: light-dark(#ffa8a8, var(--clr-tag-bg));
			--clr-tag-blue: light-dark(var(--clr-tag), #5dd9ff);
			--clr-tag-blue-bg: light-dark(#a2d2ff, var(--clr-tag-bg));
			--clr-tag-green: light-dark(var(--clr-tag), #9dfb5d);
			--clr-tag-green-bg: light-dark(#8cff7d, var(--clr-tag-bg));
			--clr-tag-yellow: light-dark(var(--clr-tag), #ffcf3f);
			--clr-tag-yellow-bg: light-dark(#ffcf3f, var(--clr-tag-bg));

			--clr-red: light-dark(#ffdcdc, #371616);
			--clr-orange: light-dark(#ffe9da, #372416);
			--clr-yellow: light-dark(#fff4d4, #372f16);
			--clr-green: light-dark(#d0ffd4, #163718);
			--clr-cyan: light-dark(#cffbff, #163437);
			--clr-blue: light-dark(#c7cfff, #161b37);
			--clr-purple: light-dark(#e9c3ff, #2b1637);
			--clr-pink: light-dark(#ffd3f4, #37162f);
			--clr-gray: light-dark(#d8d8d8, #131313 /*#202020*/);

			--clr-target-bg: light-dark(#ffe388, #77694b);
			--clr-target-border: red;
		/* #endregion CARDS.CSS */

		/* #region CONSOLE.CSS */
			--clr-console-bg: light-dark(#a7f7b0, #112d14);
			--clr-console-border: light-dark(#89e193, #0e2611); /*rgb(19, 36, 19)*/
			--clr-console-drop-shadow: light-dark(#757575, black);
			--clr-console-scanlines: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.03) 33%);
			--clr-console-h-underline: gray;
			--clr-console-link: light-dark(#3c4982, #8297f4);
			--clr-console-link-hover: light-dark(#3a8298, #65d2f3);

			--clr-console-li-pro: light-dark(#086408, #87ff87);
			--clr-console-li-con: light-dark(#640f0f, #fc9090);
		/* #endregion CONSOLE.CSS*/

		/* #region ALBUM-GROUP.CSS */
			--clr-external-link: light-dark(#414806, #f8ffc3);
			--clr-external-link-line: light-dark(#282c03, #ffe47b);
			--clr-external-link-hover: light-dark(#282c03, #ffe47b);
		/* #endregion ALBUM-GROUP.CSS */

		/* #region MUSIC.CSS */
			--clr-songlist-bg: light-dark(rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.2));
			--clr-songlist-rim2: light-dark(#dbeaf2, #222);
			--clr-songlist-odd-line: light-dark(#5395fd1a, #ffffff10);
			--clr-songlist-s0: gray;
			--clr-songlist-s1: light-dark(#db2626, #ff6b6b);
			--clr-songlist-s2: light-dark(#794c4c, #ae9191);
		/* #endregion MUSIC.CSS */

		/* #region GUESTBOOK.CSS */
			--clr-form-bg: light-dark(white, rgb(36, 36, 36));
			--clr-form-border: light-dark(gray, #5b5b5b);
			--clr-form-shadow: light-dark(#737373, black);

			--clr-form-button-text: light-dark(white, var(--clr-text));
			--clr-form-button-text-shadow: rgba(0, 0, 0, .25);
			--clr-form-button-bg: light-dark(linear-gradient(125deg, #ffc75f, #fb8405), linear-gradient(125deg, #f0a518, #e15703));
			--clr-form-button-border: gray;
			--clr-form-button-shadow: var(--clr-form-shadow);

			--clr-first-post-bg: light-dark(#d2ffc2, #1f3716);
			--clr-first-post-border: light-dark(#b1e1a0, #12200d); /*var(--clr-blockquote-border)*/
			--clr-first-post-header-bg: light-dark(#b1e1a0, #12200d); /*rgba(0, 0, 0, 0.6)*/
			--clr-first-post-shadow: light-dark(#b3c1b4 ,black);
		/* #endregion GUESTBOOK.CSS */

		/* #region UNFINISHED.CSS */
			--clr-unfin-scrollbar: #9b3232;
			--clr-unfin-bg: light-dark(#ffd3d3, #270e0e);
			--clr-unfin-banner-bg: light-dark(#0002, #0008);
			--clr-unfin-h1-supertitle: light-dark(#880d0d, #f48282);
			--clr-unfin-h1-dropshadow: light-dark(#eab691, #8a5e29);
			--clr-unfin-h1-subtitle: light-dark(#956522, #dbbe93);
			--clr-unfin-summary-shadow: light-dark(#db9393, black);
			--clr-unfin-nav: light-dark(#945757, #c98080);
			--clr-unfin-loading-screen: light-dark(#ffd3d300, #270e0e00);
			--clr-unfin-loading-screen-to: #9c5555;
		/* #endregion UNFINISHED.CSS */

		/* #region HIDDEN.CSS */
			--clr-hidden-scrollbar: light-dark(#63329b, #6c329b);
			--clr-hidden-bg: light-dark(#f6d3ff, #291942);
			--clr-hidden-banner-bg: light-dark(#0002, #0008);
			--clr-hidden-h1-supertitle: light-dark(#861ecc, #ae82f4);
			--clr-hidden-h1-dropshadow: light-dark(#d891ea, #5d298a);
			--clr-hidden-h1-subtitle: light-dark(#862295, #d593db);
			--clr-hidden-summary-shadow: light-dark(#bf93db, black);
			--clr-hidden-nav: light-dark(#815794, #ba80c9);
			--clr-hidden-loading-screen: light-dark(#e2d3ff00, #29194200);
			--clr-hidden-loading-screen-to: #8b559c;
		/* #endregion HIDDEN.CSS */

		/* #region SQUARED-TAGS.CSS */
			--clr-tag-button-bg: light-dark(#fde5cb, #51473c);
			--clr-tag-button-inner-bg: light-dark(#ffcf3f, #40382f);
			--clr-tag-button-border: light-dark(#dbb892, #8e765b);
			--clr-tag-button-bg-hole: var(--clr-box-bg);
			--clr-tag-button-bg-enabled: light-dark(#f2f9b1, #2e4330);
			--clr-tag-button-bg-negated: light-dark(#f9bfb1, #432e2e);

			--clr-tag-button-text: var(--clr-text);
			--clr-tag-button-text-enabled: light-dark(#1f582e, #8affc4);
			--clr-tag-button-text-negated: light-dark(#9c1c1c, #ff7070);
			--clr-tag-button-text-faded: light-dark(#a4895a, #999);

			--clr-tag-button-symbol-enabled: light-dark(rgb(21, 63, 28), rgb(175, 255, 189));
			--clr-tag-button-symbol-negated: light-dark(rgb(77, 36, 36), rgb(255, 190, 190));
		/* #endregion SQUARED-TAGS.CSS */
	/* #endregion .CSS SPECIFIC */

	#loading-screen {
		--clr-loading-screen: light-dark(#d3f3ff, #192142);
		--clr-loading-screen-to: #55639c;
	}
}

:root[data-scheme="light"] {
	/*--bg-grid: url("/assets/bg-grid.png");
	--bg-lines: url("/assets/bg-lines.png");*/

	/* https://codepen.io/sosuke/pen/Pjoqqp, using #487792 and --clr-nav-hover */
	--filter-theme-toggler: invert(44%) sepia(34%) saturate(555%) hue-rotate(158deg) brightness(91%) contrast(88%);
	--filter-theme-toggler-hover: none;
	--filter-text: invert(12%) sepia(0%) saturate(1673%) hue-rotate(226deg) brightness(107%) contrast(80%);

	--bg-h1: url("/assets/svg/marker/h1-light.svg");
	--filter-header: drop-shadow(0 2px #cac5ff);

	--bg-hc-idle: url("/assets/svg/marker/light-idle.svg");
	--bg-hc-hover: url("/assets/svg/marker/dark-hover.svg");

	--clr-console-scanlines: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);

	--filter-unfin-header: drop-shadow(0 2px #eaba00);
	--filter-unfin-theme-toggler: invert(20%) sepia(9%) saturate(3083%) hue-rotate(314deg) brightness(92%) contrast(81%);
	--ufo-50-card-border: url("/assets/images/ufo50/card-border-light.png");
}

:root[data-scheme="dark"] {
	--filter-theme-toggler: invert(59%) sepia(40%) saturate(467%) hue-rotate(178deg) brightness(90%) contrast(90%);
	--filter-theme-toggler-hover: invert(99%) sepia(0%) saturate(0%) hue-rotate(171deg) brightness(91%) contrast(92%);
	--filter-text: invert(89%) sepia(0%) saturate(496%) hue-rotate(182deg) brightness(102%) contrast(89%); /* Prepend brightness(0) saturate(100%) if starting color is not black */

	--bg-h1: url("/assets/svg/marker/h1-dark.svg");
	--filter-header: drop-shadow(0 -2px #673888);

	--bg-hc-idle: url("/assets/svg/marker/dark-idle.svg");
	--bg-hc-hover: url("/assets/svg/marker/dark-hover.svg");

	--clr-console-scanlines: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);

	--filter-unfin-header: drop-shadow(0 -2px #8e6b00); /* #b28600 */
	--filter-unfin-theme-toggler: invert(67%) sepia(22%) saturate(778%) hue-rotate(314deg) brightness(85%) contrast(84%);
	--ufo-50-card-border: url("/assets/images/ufo50/card-border-dark.png");
}

:root[data-scheme="auto"] {
	@media (prefers-color-scheme: light) {
		/* https://codepen.io/sosuke/pen/Pjoqqp, using #487792 and --clr-nav-hover */
		--filter-theme-toggler: invert(44%) sepia(34%) saturate(555%) hue-rotate(158deg) brightness(91%) contrast(88%);
		--filter-theme-toggler-hover: none;
		--filter-text: invert(12%) sepia(0%) saturate(1673%) hue-rotate(226deg) brightness(107%) contrast(80%);

		--bg-h1: url("/assets/svg/marker/h1-light.svg");
		--filter-header: drop-shadow(0 2px #cac5ff);

		--bg-hc-idle: url("/assets/svg/marker/light-idle.svg");
		--bg-hc-hover: url("/assets/svg/marker/dark-hover.svg");

		--clr-console-scanlines: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);

		--filter-unfin-header: drop-shadow(0 2px #eaba00);
		--filter-unfin-theme-toggler: invert(20%) sepia(9%) saturate(3083%) hue-rotate(314deg) brightness(92%) contrast(81%);
		--ufo-50-card-border: url("/assets/images/ufo50/card-border-light.png");
	}

	@media (prefers-color-scheme: dark) {
		--filter-theme-toggler: invert(59%) sepia(40%) saturate(467%) hue-rotate(178deg) brightness(90%) contrast(90%);
		--filter-theme-toggler-hover: invert(99%) sepia(0%) saturate(0%) hue-rotate(171deg) brightness(91%) contrast(92%);
		--filter-text: invert(89%) sepia(0%) saturate(496%) hue-rotate(182deg) brightness(102%) contrast(89%); /* Prepend brightness(0) saturate(100%) if starting color is not black */

		--bg-h1: url("/assets/svg/marker/h1-dark.svg");
		--filter-header: drop-shadow(0 -2px #673888);

		--bg-hc-idle: url("/assets/svg/marker/dark-idle.svg");
		--bg-hc-hover: url("/assets/svg/marker/dark-hover.svg");

		--clr-console-scanlines: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);

		--filter-unfin-header: drop-shadow(0 -2px #8e6b00); /* #b28600 */
		--filter-unfin-theme-toggler: invert(67%) sepia(22%) saturate(778%) hue-rotate(314deg) brightness(85%) contrast(84%);
		--ufo-50-card-border: url("/assets/images/ufo50/card-border-dark.png");
	}
}
/* #endregion VARIABLES */

/* #region CUSTOM STYLING */
html {
	background-image: var(--prim-bg);
	background-position: 50vw 50vh;
}

header {
	margin: 1.8rem auto 1rem auto;
	text-align: center;

	#h1-marker-container {
		padding: 1.5rem 6px 1.5rem 6px;
		background-image: var(--bg-h1);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-repeat: round;
		filter: var(--filter-header);
		min-height: 4rem;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	h1 {
		transform: skew(-5deg);
		text-shadow: var(--3px) var(--3px) var(--clr-h1-dropshadow);
	}
}

input, textarea, select {
	background-color: var(--clr-form-bg);
	border: solid var(--clr-form-border) 1px;
	
	border-radius: 0;
	transform: skew(-4deg);
	box-shadow: 4px 4px 0 var(--clr-form-shadow);
	background-image: var(--bg-lines);
}
/* #endregion */


#nav-skipper {
	position: absolute;
	text-align: center;
	margin: auto;
	border: none;
	padding: var(--10px);
	background: var(--bg-h1);
	box-sizing: border-box;
	transition: ease-in .5s;
	transition-property: transform;
	z-index: 1;
	transform: rotate(-20deg) translateX(-150%);
	top: calc(2 * var(--page-padding));
	box-shadow: none;

	&:has(:focus) {
		top: calc(2 * var(--page-padding));
		transition: ease-out .5s;
		transform: rotate(-20deg) translateX(0);
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}