/* Document
 * ========================================================================== */

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */

*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
    text-decoration: inherit; /* 1 */
    vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */

:root {
    cursor: default; /* 1 */
    overflow-wrap: break-word; /* 3 */
    -webkit-tap-highlight-color: transparent; /* 5 */
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

strong, b {
    font-weight: bolder;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
    fill: currentColor;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color in Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

table {
    border-collapse: collapse; /* 1 */
    border-color: currentColor; /* 2 */
    text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button, input, select {
    margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #a0a0a0;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
    vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 */

textarea {
    margin: 0; /* 1 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    block-size: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
 * ========================================================================== */

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: .2em solid var(--accent);
    z-index: 32;
}

iframe:focus-visible,
    html:focus-visible,
    body:focus-visible {
        outline: none;
    }

:target {
    outline: .2em solid var(--fg);
    z-index: 2;
}

/*
 * Add the correct display in Safari.
 */

details > summary:first-of-type {
    display: list-item;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
    cursor: progress;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"], [disabled] {
    cursor: not-allowed;
}

datalist {
    display: none !important;
}

/* https://github.com/fchristant/colar/ */

:root {
    --gray-0: #f8fafb;
    --gray-1: #f2f4f6;
    --gray-2: #ebedef;
    --gray-3: #e0e4e5;
    --gray-4: #d1d6d8;
    --gray-5: #b1b6b9;
    --gray-6: #979b9d;
    --gray-7: #7e8282;
    --gray-8: #666968;
    --gray-9: #50514f;
    --gray-10: #3a3a37;
    --gray-11: #252521;
    --gray-12: #121210;

    --red-0: #fff5f5;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-3: #ffa8a8;
    --red-4: #ff8787;
    --red-5: #ff6b6b;
    --red-6: #fa5252;
    --red-7: #f03e3e;
    --red-8: #e03131;
    --red-9: #c92a2a;
    --red-10: #b02525;
    --red-11: #962020;
    --red-12: #7d1a1a;

    --pink-0: #fff0f6;
    --pink-1: #ffdeeb;
    --pink-2: #fcc2d7;
    --pink-3: #faa2c1;
    --pink-4: #f783ac;
    --pink-5: #f06595;
    --pink-6: #e64980;
    --pink-7: #d6336c;
    --pink-8: #c2255c;
    --pink-9: #a61e4d;
    --pink-10: #8c1941;
    --pink-11: #731536;
    --pink-12: #59102a;

    --purple-0: #f8f0fc;
    --purple-1: #f3d9fa;
    --purple-2: #eebefa;
    --purple-3: #e599f7;
    --purple-4: #da77f2;
    --purple-5: #cc5de8;
    --purple-6: #be4bdb;
    --purple-7: #ae3ec9;
    --purple-8: #9c36b5;
    --purple-9: #862e9c;
    --purple-10: #702682;
    --purple-11: #5a1e69;
    --purple-12: #44174f;

    --violet-0: #f3f0ff;
    --violet-1: #e5dbff;
    --violet-2: #d0bfff;
    --violet-3: #b197fc;
    --violet-4: #9775fa;
    --violet-5: #845ef7;
    --violet-6: #7950f2;
    --violet-7: #7048e8;
    --violet-8: #6741d9;
    --violet-9: #5f3dc4;
    --violet-10: #5235ab;
    --violet-11: #462d91;
    --violet-12: #3a2578;

    --indigo-0: #edf2ff;
    --indigo-1: #dbe4ff;
    --indigo-2: #bac8ff;
    --indigo-3: #91a7ff;
    --indigo-4: #748ffc;
    --indigo-5: #5c7cfa;
    --indigo-6: #4c6ef5;
    --indigo-7: #4263eb;
    --indigo-8: #3b5bdb;
    --indigo-9: #364fc7;
    --indigo-10: #2f44ad;
    --indigo-11: #283a94;
    --indigo-12: #21307a;

    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-4: #4dabf7;
    --blue-5: #339af0;
    --blue-6: #228be6;
    --blue-7: #1c7ed6;
    --blue-8: #1971c2;
    --blue-9: #1864ab;
    --blue-10: #145591;
    --blue-11: #114678;
    --blue-12: #0d375e;

    --cyan-0: #e3fafc;
    --cyan-1: #c5f6fa;
    --cyan-2: #99e9f2;
    --cyan-3: #66d9e8;
    --cyan-4: #3bc9db;
    --cyan-5: #22b8cf;
    --cyan-6: #15aabf;
    --cyan-7: #1098ad;
    --cyan-8: #0c8599;
    --cyan-9: #0b7285;
    --cyan-10: #095c6b;
    --cyan-11: #074652;
    --cyan-12: #053038;

    --teal-0: #e6fcf5;
    --teal-1: #c3fae8;
    --teal-2: #96f2d7;
    --teal-3: #63e6be;
    --teal-4: #38d9a9;
    --teal-5: #20c997;
    --teal-6: #12b886;
    --teal-7: #0ca678;
    --teal-8: #099268;
    --teal-9: #087f5b;
    --teal-10: #066649;
    --teal-11: #054d37;
    --teal-12: #033325;

    --green-0: #ebfbee;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-3: #8ce99a;
    --green-4: #69db7c;
    --green-5: #51cf66;
    --green-6: #40c057;
    --green-7: #37b24d;
    --green-8: #2f9e44;
    --green-9: #2b8a3e;
    --green-10: #237032;
    --green-11: #1b5727;
    --green-12: #133d1b;

    --lime-0: #f4fce3;
    --lime-1: #e9fac8;
    --lime-2: #d8f5a2;
    --lime-3: #c0eb75;
    --lime-4: #a9e34b;
    --lime-5: #94d82d;
    --lime-6: #82c91e;
    --lime-7: #74b816;
    --lime-8: #66a80f;
    --lime-9: #5c940d;
    --lime-10: #4c7a0b;
    --lime-11: #3c6109;
    --lime-12: #2c4706;

    --yellow-0: #fff9db;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-3: #ffe066;
    --yellow-4: #ffd43b;
    --yellow-5: #fcc419;
    --yellow-6: #fab005;
    --yellow-7: #f59f00;
    --yellow-8: #f08c00;
    --yellow-9: #e67700;
    --yellow-10: #b35c00;
    --yellow-11: #804200;
    --yellow-12: #663500;

    --orange-0: #fff4e6;
    --orange-1: #ffe8cc;
    --orange-2: #ffd8a8;
    --orange-3: #ffc078;
    --orange-4: #ffa94d;
    --orange-5: #ff922b;
    --orange-6: #fd7e14;
    --orange-7: #f76707;
    --orange-8: #e8590c;
    --orange-9: #d9480f;
    --orange-10: #bf400d;
    --orange-11: #99330b;
    --orange-12: #802b09;

    --choco-0: #fff8dc;
    --choco-1: #fce1bc;
    --choco-2: #f7ca9e;
    --choco-3: #f1b280;
    --choco-4: #e99b62;
    --choco-5: #df8545;
    --choco-6: #d46e25;
    --choco-7: #bd5f1b;
    --choco-8: #a45117;
    --choco-9: #8a4513;
    --choco-10: #703a13;
    --choco-11: #572f12;
    --choco-12: #3d210d;

    --brown-0: #faf4eb;
    --brown-1: #ede0d1;
    --brown-2: #e0cab7;
    --brown-3: #d3b79e;
    --brown-4: #c5a285;
    --brown-5: #b78f6d;
    --brown-6: #a87c56;
    --brown-7: #956b47;
    --brown-8: #825b3a;
    --brown-9: #6f4b2d;
    --brown-10:#5e3a21;
    --brown-11:#4e2b15;
    --brown-12: #422412;

    --sand-0: #f8fafb;
    --sand-1: #e6e4dc;
    --sand-2: #d5cfbd;
    --sand-3: #c2b9a0;
    --sand-4: #aea58c;
    --sand-5: #9a9178;
    --sand-6: #867c65;
    --sand-7: #736a53;
    --sand-8: #5f5746;
    --sand-9: #4b4639;
    --sand-10:#38352d;
    --sand-11:#252521;
    --sand-12: #121210;

    --camo-0: #f9fbe7;
    --camo-1: #e8ed9c;
    --camo-2: #d2df4e;
    --camo-3: #c2ce34;
    --camo-4: #b5bb2e;
    --camo-5: #a7a827;
    --camo-6: #999621;
    --camo-7: #8c851c;
    --camo-8: #7e7416;
    --camo-9: #6d6414;
    --camo-10: #5d5411;
    --camo-11: #4d460e;
    --camo-12: #36300a;

    --jungle-0: #ecfeb0;
    --jungle-1: #def39a;
    --jungle-2: #d0e884;
    --jungle-3: #c2dd6e;
    --jungle-4: #b5d15b;
    --jungle-5: #a8c648;
    --jungle-6: #9bbb36;
    --jungle-7: #8fb024;
    --jungle-8: #84a513;
    --jungle-9: #7a9908;
    --jungle-10: #658006;
    --jungle-11: #516605;
    --jungle-12: #3d4d04;
}

/***
 4.1 The document element
 https://html.spec.whatwg.org/multipage/semantics.html#the-root-element

 4.3 Sections
 https://html.spec.whatwg.org/multipage/sections.html
 ***/

html {
	font-family: var(--main-font);
	line-height: var(--rhythm);

	background: var(--bg);
	color: var(--fg);
	scroll-padding-block-start: calc(4 * var(--gap));
}

body {
	margin: 0;
}

header, footer, section + section {
	margin-block: calc(2 * var(--gap));
}

nav a {
		text-decoration: none;
		color: var(--accent);
	}

/* SEE components/box.css */

aside h1,
	aside h2,
	aside h3,
	aside h4,
	aside h5,
	aside h6 {
		font-size: 1em;
		text-transform: none;
		letter-spacing: none;
	}

aside.big {
		/* Pull quote */
		background: none;
		border: none;
		border-inline-start: 1px solid var(--muted-fg);
		border-radius: 0;
		padding: 0;
		padding-inline-start: var(--rhythm);
		font-style: italic;
		color: var(--accent);
	}

h1, h2, h3, h4, h5, h6,
.\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> {
	margin-block-end: var(--gap);
	font-family: var(--secondary-font);
	font-size: 1em;
	margin-block-start: calc(2 * var(--gap));
	position: relative;
}

h1, .\<h1\> {
	font-size: 2em;
	text-transform: none;
	line-height: calc(2 * var(--rhythm));
	letter-spacing: 0;
}

h2, .\<h2\> {
	font-size: 1.6em;
	text-transform: none;
	line-height: calc(1.5 * var(--rhythm));
	letter-spacing: 0;
}

h3, .\<h3\> {
	font-size: 1.17em;
	line-height: calc(1 * var(--rhythm));
}

h4, .\<h4\>, h5, .\<h5\>, h6, .\<h6\> {
	font-size: 1em;
	text-transform: none;
	line-height: calc(1 * var(--rhythm));
	letter-spacing: 0;
	margin-block-start: var(--gap);
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-block-start: var(--gap);
}

h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
	outline: none
}

h1:target::before, h2:target::before, h3:target::before, h4:target::before, h5:target::before, h6:target::before {
		content: "";
		display: block;
		position: absolute;
		left: -.5em;
		width: 4px;
		height: 100%;
		background: var(--accent);
	}

header {
	font-family: var(--secondary-font);
	border-block-end: 1px solid var(--graphical-fg);
}

footer {
	font-family: var(--secondary-font);
	border-block-start: 1px solid var(--graphical-fg);
}

body > header,
body > footer,
main + footer {
	padding: var(--rhythm) calc((100% - var(--eff-line-length)) / 2)
}

address {
	--density: 0;
}

/***
 4.4 Grouping content
 https://html.spec.whatwg.org/multipage/grouping-content.html
 ***/

p {
	margin-block: var(--gap);
}

hr {
	color: inherit;
	margin-inline: 0;
	margin-block: var(--gap);
	
	flex: 0 1 0px;
	border-inline-start: 1px solid var(--accent);
	block-size: auto;
	border-block-start: 1px solid var(--accent);
	border-block-end: none;
	border-inline-end: none;
}

pre {
	font-family: var(--mono-font);
	font-size: .9em;
	line-height: var(--rhythm);
	-o-tab-size: 2;
	   tab-size: 2;

	margin: var(--gap) 0;

	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--accent) transparent;
}

blockquote {
	margin-inline: 0 var(--gap);
	padding-inline: var(--gap) 0;
	margin-block: var(--gap);
	
	font-size: 1.1em;
	line-height: var(--rhythm);
	font-style: italic;

	border-inline-start: 1px solid var(--graphical-fg);
	color: var(--muted-fg)
}

blockquote em, blockquote cite, blockquote dfn, blockquote var, blockquote i, blockquote address {
		font-style: normal;
	}

blockquote footer {
		text-align: right;
		text-align: end;
	}

ul, ol {
	padding-inline-start: var(--rhythm)
}

ul ul, ul ol, ol ul, ol ol {
		padding-inline-start: var(--gap);
	}

ul[role="list"], ol[role="list"], ul[role="listbox"], ol[role="listbox"] {
		padding-inline-start: 0;
		list-style: none;
	}

ul {
}

ol {
	list-style: decimal;
}

dl {
	margin-block: var(--gap);
}

dt {
		font-weight: bold;
	}

dd {
		margin-inline-start: var(--rhythm);
	}

li::marker {
	font-family: var(--secondary-font);
}

figure {
	max-width: 100%;
	margin-inline: 0;

    /* SEE components/box.css */
}

figcaption {
	margin-block: var(--gap);

	font-family: var(--secondary-font);

	color: var(--muted-fg);
}

main {
	max-inline-size: var(--eff-line-length);
	inline-size: 100%;
	margin-inline: auto
}

main:first-child { padding-top: var(--gap); }

/***
 4.5 Text-level semantics
 https://html.spec.whatwg.org/multipage/text-level-semantics.html

 4.7 Edits
 https://html.spec.whatwg.org/multipage/edits.html
 ***/

/* Text-level semantics */

a, .\<a\> {
	color: var(--link-fg, var(--accent));
	font-family: var(--secondary-font);
	border-radius: var(--border-radius);
	outline-offset: 1px;
	background: none;
	border: none;
	font-size: 1em
}

.list-of-links :is(a,.\<a\>) {
		text-decoration: none
}

/* ELLIOTT UPDATE: Not a fan
:is(a,.\<a\>):hover, :is(a,.\<a\>):focus {
		text-decoration: none;
		outline: 1px solid;
		transition: outline-offset .1s ease-in-out;
	}
*/

:is(a,.\<a\>):active {
		outline-offset: 0;
	}

small[role="note"] {
		/***
		 Sidenote
		 ***/
		display: block;
		float: inline-end;
		clear: inline-end;

		--sidenote-width: 20ch;

		max-inline-size: var(--sidenote-width);
		padding-inline: 1.5ch 1ch;

		margin-inline-end: calc(1em - var(--sidenote-width));
		margin-block-end: var(--rhythm);

		font-family: var(--secondary-font);

		background: var(--bg);
		border: 1px solid transparent;

		transition: transform .1s ease-in-out
	}

small[role="note"]:hover, small[role="note"]:focus-within {
			border: 1px solid var(--graphical-fg);
			border-radius: var(--border-radius);
			transform: translateX(calc(
				0px - var(--sidenote-width)
				+ min(var(--gutter-width), var(--sidenote-width))
			))
		}

small, .\<small\> {
	font-size: .8em;
}

s {
	color: var(--bad-fg);
}

q {
	font-style: italic
}

q em, q cite, q dfn, q var, q i, q address {
		font-style: normal;
	}

time {
	font-variant-numeric: tabular-nums;
}

code, samp, kbd {
	font-family: var(--mono-font);
	font-style: normal;
}

samp {
	color: var(--ok-fg);
}

kbd kbd /*
	We apply the key-like styling to a nested kbd element, a pattern shown in
	WHATWG HTML for marking up keyboard input:

	> Here the kbd element is used to indicate keys to press:
	>   ~~~ html
	>   <p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>
	>   ~~~

	The plain kbd element can also be used for clicking menus (<kbd>File |
	New...</kbd>) or voice input (<kbd>Hey Siri, </kbd>)
*/ {
	display: inline-block;

	padding: 0 .3em;
	font-size: .8em;
	line-height: 1.1em;

	background: var(--interactive-bg);
	border: 1px outset var(--graphical-fg);
	border-block-end-width: 3px;
	border-radius: var(--border-radius);
}

sub {
	vertical-align: bottom;
	line-height: 1;
}

sup {
	vertical-align: top;
	line-height: 1;
}

mark {
	background: var(--warn-bg);
	color: var(--warn-fg);
}

/* Edits */

ins {
	background: var(--ok-bg);
	color: var(--ok-fg);
}

del {
	background: var(--bad-bg);
	color: var(--bad-fg);
}

/***
 4.8 Embedded content
 https://html.spec.whatwg.org/multipage/embedded-content.html
 ***/

img, video, audio, iframe, object, embed {
	max-inline-size: 100%;
	inline-size: max-content;
	block-size: auto;
}

/***
 4.9 Tabular data
 https://html.spec.whatwg.org/multipage/tables.html
 ***/

table {
	font-variant-numeric: tabular-nums;
	font: inherit;
}

caption {
	text-align: start;
	font-family: var(--secondary-font);
	font-style: italic;
}

tbody {
	border-block: 1px solid var(--faded-fg);
}

thead {
}

tfoot {
}

tr {

}

td, th {
	vertical-align: top
}

td:not(:last-child), th:not(:last-child) {
		padding-inline-end: var(--rhythm);
	}

td {
	}

th {
		font-family: var(--secondary-font);
		text-align: start;
	}

/***
 4.10 Forms
 https://html.spec.whatwg.org/multipage/forms.html
 ***/

input { display: block; }

label input:not([specificity-hack]) { display: inline; padding-block: 0; }

button,
input[type="submit"],
input[type="reset"],
input[type="button"],
input::file-selector-button,
.\<button\> {
	display: inline-block;
	padding: 0 calc(var(--rhythm) / 4);
	vertical-align: middle;

	font-size: .8rem;
	line-height: 1.125em;
	font-family: var(--secondary-font);
	min-height: var(--rhythm);

	background: var(--interactive-bg);
	color: var(--fg);
	border: 1px solid var(--muted-fg);
	box-sizing: border-box;
	border-radius: var(--border-radius);

	/* a-specific resets */
	color: var(--fg);
	text-decoration: none;
	display: inline-flex;
	place-items: center
}

:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):hover, :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):focus-visible {
		filter: brightness(1.1);

		/* a-specific resets */
		text-decoration: none;
	}

:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):active {
		filter: brightness(.8);
	}

[aria-pressed="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>), [aria-expanded="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
		box-shadow: 0 .05em var(--accent) inset;
		background: var(--pressed-interactive-bg);
	}

[disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
		color: var(--muted-fg);
	}

strong > :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
		background: var(--accent);
		color: var(--bg);
		border: none;
		font-weight: bold
}

strong > [disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
			color: var(--muted-accent);
		}

.big:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
		min-block-size: calc(1.5 * var(--rhythm));
		font-size: 1rem;
		padding-inline: calc(.5 * var(--rhythm));
		line-height: var(--rhythm)
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
	padding: calc(var(--rhythm) / 4);
	vertical-align: top;
	
	font-size: 1rem;
	line-height: inherit;
	font-family: var(--main-font);

	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--graphical-fg);
	border-radius: var(--border-radius);

	vertical-align: top
}

:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea):focus-visible {
		border: 1px solid var(--accent);
	}

:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea)::placeholder {
		color: var(--muted-fg);
		opacity: 1;
		/* ELLIOTT UPDATE: Not a fan of aligning placeholder text to the end
        text-align: end;*/
	}

input[type="range"] {
	width: 100%;
	padding: calc(var(--gap) / 4);
}

input[type="color"] {
	padding: 0;
	margin: 0;
	height: calc(1.5 * var(--rhythm));

	border: none;
	background: none;
}

input[type="file"] {
	padding: calc(var(--gap) / 4) 0;
	font: inherit;
	line-height: calc(var(--rhythm) / 2)
}

input[type="file"]::file-selector-button {
		margin-block: .1em 0;
		margin-inline-end: 1ch;
	}

select[multiple] {
	vertical-align: top;
}

optgroup::before {
	color: var(--muted-fg);
	font-style: normal;
}

progress {
	/* TODO */
}

meter {
	/* TODO */
}

label[for] {
	display: block;
	padding-block: calc(var(--gap) / 4);
}

fieldset {
	position: relative;

    padding: var(--gap);
	margin: var(--gap) 0;
	width: 100%;
	border-radius: var(--border-radius);
}

fieldset > legend + * { margin-block-start: 0 }

fieldset {

	border: 1px solid var(--graphical-fg);
}

/***
 4.11 Interactive elements
 https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements
 ***/

details:not(specificity-hack) {
    /* SEE components/box.css */

	padding-block-start: 0
}

details:not(specificity-hack):not([open]) { padding-block-end: 0; }

summary {
	margin: calc(0px - var(--gap));
	margin-top: calc(0px - var(--gap));
	margin-bottom: 0;
	padding-inline: var(--gap);

	font-family: var(--secondary-font);
	font-weight: bold;

	cursor: pointer
}

summary:focus-visible, summary:active {
		filter: brightness(.8);
		outline: none;
	}

dialog {
    /* SEE components/box.css */
	
    inline-inset: 0;
    
	block-size: -moz-fit-content;
    
	block-size: fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    
	margin: auto !important;

    background-color: var(--bg);
    color: var(--fg);
	border-color: var(--accent);
}

dialog[open]::backdrop {
	display: block;
	background: black;
	opacity: .4;
	animation: bg 2s;
}

@keyframes bg {
	from { background: transparent; }
}

dialog:not([open]) {
    display: none;
}

.box,
/* defined elsewhere */
[role=menu],
.sidebar-layout > header,
[role=tabpanel],
figure,
details,
dialog,
aside {
    margin: var(--gap) 0;
    padding: var(--gap);
    overflow: clip;
    
    border-radius: var(--border-radius);
    background: var(--box-bg);
    border: 1px solid var(--graphical-fg);
}

.titlebar {
    margin-inline: calc(0px - var(--gap));
    margin-block-end: calc(0px - var(--gap));
    padding-inline: var(--gap);

    font: inherit;
	font-family: var(--secondary-font);
    font-weight: bold;

    translate: 0 calc(-1px - var(--gap));

    background: var(--graphical-fg);
    color: var(--bg);
}

.sub-title, sub-title {
	/***
	 Meant for use in headings. Make sure to also use visually-hidden punctuation
	 to mark the subtitle as shown below:

	1 | <h1>
	2 | 	Foo Bar<v-h>:</v-h>
	3 | 	<sub-title>How I Learned To Stop Worrying and Love Baz</sub-title>
	4 | </h1>

	1 | <h1>
	2 | 	<sub-title class="-allcaps">Breaking News</sub-title><v-h>:</v-h>
	3 | 	Bad Thing Happens
	4 | <h1>
	 ***/

	display: block;

	font-weight: normal;

	color: var(--muted-fg);
}

.tool-bar, [role=toolbar] {
	display: flex;
	flex-flow: row wrap;
	gap: calc(var(--gap) / 2)
}

.tool-bar > *, [role=toolbar] > * { margin: 0; }

.sidebar-layout header li {
			margin-block: calc(.5 * var(--gap));
		}

.sidebar-layout header a {
			font-weight: bold;
		}

@media (min-width: 75ch) {

.sidebar-layout {
		display: grid;
		grid-template-columns: 25ch auto;
		inset: 0
}
		
		.sidebar-layout > header {
			border-block: none;
			border-inline-start: none;
			margin: 0;
		}

		.sidebar-layout > :nth-child(2) {
			overflow: auto;
			--full-width: calc(100vw - 25ch);
			margin-top: var(--gap);
		}
	}

.breadcrumbs[aria-label] {
	font-family: var(--secondary-font)
}

.breadcrumbs[aria-label] ul, .breadcrumbs[aria-label] ol {
        list-style: none;
        padding-inline-start: 0;
    }

.breadcrumbs[aria-label] li {
        display: inline
    }

:is(.breadcrumbs[aria-label] li)+li::before {
            content: ' / ' / '';
            content: ' / ';
            display: inline;
        }

.breadcrumbs[aria-label] [aria-current="page"] {
        font-weight: bold;
    }

.chip, chip {
	font-family: var(--secondary-font);
    border: 1px solid var(--accent);
    background: var(--box-bg);
    border-radius: calc(var(--rhythm) / 2);
    padding-inline: calc(var(--rhythm) / 2);
}

.navbar {
	padding: var(--rhythm);

	font-family: var(--secondary-font);

	background: var(--box-bg);
	border-block-end: 1px solid var(--accent);

	overflow-x: auto;
	scrollbar-width: thin;

	position: sticky;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;

	/* Inner layout */
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: var(--gap)
}

.navbar.expanded {
		flex-flow: column;
		align-items: start;

		max-height: 90vh;
		overflow-y: auto
	}

.navbar.expanded ul[role="list"] { flex-flow: column; }

.navbar * {
		flex-shrink: 0;
		margin-block: 0;
	}

.navbar:not(.expanded) > :first-child, .navbar:not(.expanded) nav > :first-child { margin-inline-start: auto; }

.navbar:not(.expanded) >  :last-child, .navbar:not(.expanded) nav >  :last-child { margin-inline-end:   auto; }

.navbar hr { align-self: stretch; }

.navbar nav ul[role="list"] {
		display: flex;
		flex-flow: row;
		gap: var(--rhythm)
	}

.navbar nav ul[role="list"] * { flex-shrink: 0 }

.navbar nav ul[role="list"] {
		padding-inline-start: 0;
	}

.navbar a {
		font-weight: bold;
		text-decoration: none;
		padding-inline: .2em;
	}

.navbar a:hover, .navbar a:focus {
		text-decoration: underline;
	}

.navbar [aria-current=page] {
		position: relative;
	}

.navbar [aria-current=page]::after {
		width: 100%;
		height: 6px;
		content: "";
		display: block;
		position: absolute;
		bottom: calc(-1 * var(--gap));
		background: currentcolor;
	}

.navbar.expanded [aria-current=page]::after {
		width: 6px;
		height: 100%;
		position: absolute;
		left: calc(-1 * var(--gap));
		top: 0;
	}

.permalink-anchor {
    display: none
}

*:hover > .permalink-anchor {
        display: initial
}

button.iconbutton {
	border: none;
	background: none;
	color: currentcolor;
	padding: 0;
	line-height: var(--rhythm);
	font-size: 24px;
	width: 24px;
	height: 24px;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	transition: font-weight .2s ease-in-out
}

button.iconbutton:hover, button.iconbutton:focus-visible {
		outline: 1px solid var(--accent);
		outline-offset: 6px;
	}

button.iconbutton:active {
		outline-offset: 3px;
		background: none;
	}

button.iconbutton[aria-pressed=true] {
		box-shadow: none;
		transform: none;
	}

[role="tablist"] {
    display: flex;
    gap: .5ch;
    scrollbar-width: thin;
}

[role="tab"][role="tab"] {
    all: initial;

	font-family: var(--secondary-font);
    
    padding: 0 calc(var(--rhythm) / 4);
    margin: 0;
    min-height: var(--rhythm);
    
    color: var(--fg);
    border: solid var(--graphical-fg);
    border-width: 1px 1px 0 1px;
    border-block-end-color: transparent;
    background: var(--interactive-bg);

    border-start-start-radius: .4em;
    border-start-end-radius: .4em
}

[role="tab"][role="tab"]:active, [role="tab"][role="tab"][aria-selected="true"] {
        transform: none;
        bottom: -1px;
        position: relative;
        background: var(--box-bg);
        border-block-end: 1px solid var(--box-bg);
    }

[role="tab"][role="tab"]:hover {
        background-color: var(--box-bg);
    }

[role="tab"][role="tab"]:focus {
        background-color: var(--box-bg);
        border-color: var(--accent);
        outline: 1px solid var(--accent);
    }

[role="tabpanel"] {
    /* SEE components/box.css */

    margin-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    z-index: 1;
}

[role="menu"] {
    /* SEE components/box.css */
    position: absolute;

    z-index: 10;
    
    padding: calc(var(--gap) / 2) 0;
    margin: 1px 0 0 0;

    display: flex;
    flex-flow: column nowrap;
}

[role=menuitem] {
    padding: 0 calc(var(--gap) / 2);

    display: block;

    text-decoration: none;
    border-radius: 0;

    color: var(--fg)
}

[role=menuitem]:focus, [role=menuitem]:active {
        background: var(--accent);
        color: var(--bg);
    }

[role=listbox] {
    list-style: none
}

[role=listbox] [role=option] {
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
    }

[role=listbox] [role=option][aria-selected=true] {
        background: var(--interactive-bg);
    }

[role=listbox] .active[role=option] {
        --temporary-bg: var(--accent);
        --temporary-fg: var(--bg);
        --temporary-accent: parent-var(--muted-accent);
        --temporary-muted-accent: parent-var(--box-bg);

        background: var(--temporary-bg);
        color: var(--temporary-fg)
    }

[role=listbox] .active[role=option] > * {
            --bg: var(--temporary-bg);
            --fg: var(--temporary-fg);
            --accent: var(--temporary-accent);
            --muted-accent: var(--temporary-muted-accent);
        }

[aria-orientation="vertical"] {
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
}

.plain {
    --box-bg: var(--plain-bg);
    --accent: var(--plain-fg);
    --graphical-fg: var(--plain-graphical-fg);
}

.info {
    --box-bg: var(--info-bg);
    --accent: var(--info-fg);
    --graphical-fg: var(--info-graphical-fg);
}

.ok {
    --box-bg: var(--ok-bg);
    --accent: var(--ok-fg);
    --graphical-fg: var(--ok-graphical-fg);
}

.warn {
    --box-bg: var(--warn-bg);
    --accent: var(--warn-fg);
    --graphical-fg: var(--warn-graphical-fg);
}

.bad {
    --box-bg: var(--bad-bg);
    --accent: var(--bad-fg);
    --graphical-fg: var(--bad-graphical-fg);
}

.color {
	color: var(--accent);
}

.bg {
	background: var(--box-bg);
}

.border {
    border-style: solid;
	border-color: var(--graphical-fg);
}

:root {
	/* Colors */
	--fg: var(--gray-12); /* Text. */
	--muted-fg: var(--gray-10); /* Secondary text color. Will be
		used with a background of --c-bg and --c-bg-2 -- check contrast! */
	--faded-fg: var(--gray-6); /* Disabled text color. */
	--graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not
		be used as a text color. */
	
	--plain-fg: var(--blue-10);
	--info-fg: var(--blue-11);
	--ok-fg: var(--green-11);
	--bad-fg: var(--red-11);
	--warn-fg: var(--yellow-11);

	--plain-graphical-fg: var(--gray-6);
	--info-graphical-fg: var(--blue-6);
	--ok-graphical-fg: var(--green-6);
	--bad-graphical-fg: var(--red-6);
	--warn-graphical-fg: var(--yellow-6);
	
	--bg: var(--gray-0); /* Page background. */
	--box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */
	--interactive-bg: var(--gray-4); /* Background for interactive elements */

	--plain-bg: var(--gray-1);
	--info-bg: var(--blue-1);
	--ok-bg: var(--green-1);
	--bad-bg: var(--red-1);
	--warn-bg: var(--yellow-1);

	--accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a
		background of --c-bg and --c-bg-2 -- check contrast! */
	--muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */

	/* Lengths */
	--rhythm: 1.4rem; /* Vertical rhythm, line height. */
	--line-length: 50rem; /* Maximum line length for prose. ELLIOTT UPDATE (40->50)*/
	--border-radius: .2rem;

	/* Fonts */
	--main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
	--secondary-font: var(--main-font); /* Headings etc. */

    /*
    UPDATE ELLIOTT, CHANGE TO GITLAB DEFAULTS
	--mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
		shrinking this */

    --mono-font: "Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;

	/* Density */
	--density: 1;

	/* Width */
	--full-width: 100vw;

	/* Do not set these. */
	--eff-line-length: /* Effective line length for prose. */
		min(
			calc( var(--full-width) - (2 * var(--rhythm)) ),
			var(--line-length)
		);

	--gutter-width: /* Width of spaces at each side of page content. */
		calc(
			(
				var(--full-width)        /* Viewport width */
				- var(--eff-line-length) /* minus line width */
			) / 2);                      /* Divide by 2: there are two page margins */
}

/*@media (prefers-color-scheme: dark) {
    :root:not(.-no-dark-theme) {
    	--fg: var(--gray-0);
    	--muted-fg: var(--gray-2);
    	--faded-fg: var(--gray-7);

		--plain-bg: var(--gray-11);
    	--info-bg: var(--blue-12);
    	--ok-bg: var(--green-12);
    	--bad-bg: var(--red-12);
    	--warn-bg: var(--yellow-12);

		--plain-faded-fg: var(--blue-6);
		--info-faded-fg: var(--blue-6);
		--ok-faded-fg: var(--green-6);
		--bad-faded-fg: var(--red-6);
		--warn-faded-fg: var(--yellow-6);

    	--bg: var(--gray-12);
    	--box-bg: var(--gray-10);
    	--interactive-bg: var(--gray-8);

		--plain-fg: (--blue-3);
    	--info-fg: var(--blue-3);
    	--ok-fg: var(--green-3);
    	--bad-fg: var(--red-3);
    	--warn-fg: var(--yellow-3);

    	--accent: var(--blue-3);
    	--muted-accent: var(--blue-5);
    }
}*/

* {
	--gap: calc(var(--rhythm) * var(--density));
	accent-color: var(--accent);
}

.textcolumns {
    --col-width: 30ch;
    column-width: var(--col-width);
    column-gap: var(--gap);
    margin-block: var(--gap)
}

.textcolumns :first-child { margin-block-start: 0 !important }

.text-align\:center {
    text-align: center;
}

.center {
    display: grid;
    place-items: center;
}

/**/

.container {
	max-inline-size: var(--eff-line-length);
	margin-inline: auto;
}

.fullbleed {
    position: relative;
    width: var(--full-width);
    left: 50%;
    transform: translateX(calc(-.5 * var(--full-width)));

    border-radius: 0;
    border-inline: none;
}

.fullscreen {
    height: 100vh;

    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50vw);

    border-radius: 0;
    border-inline: none;
}

.width\:100\%  { width:100%;  max-width: 100%  }

.height\:100\% { height:100%; max-height: 100% }

/**/

/* margin-trim had better be implemented soon */

:is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:first-child:first-child:first-child:first-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:first-child>:first-child:first-child:first-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:first-child>:first-child>:first-child:first-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:first-child>:first-child>:first-child>:first-child { margin-block-start: 0; }

:is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:last-child:last-child:last-child:last-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:last-child>:last-child:last-child:last-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:last-child>:last-child>:last-child:last-child,
    :is(
    body,
    .box, 
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
)>:last-child>:last-child>:last-child>:last-child { margin-block-end: 0; }

/**/

.padding { padding-inline: var(--gap) }

.padding-block { padding-block: var(--gap) }

.padding-block-start { padding-block-start: var(--gap) }

.padding-block-end { padding-block-end: var(--gap) }

.padding-inline { padding-inline: var(--gap) }

.padding-inline-start { padding-inline-start: var(--gap) }

.padding-inline-end { padding-inline-start: var(--gap) }

.margin { margin: var(--gap) }

.margin-block  { margin-block:  var(--gap) }

.margin-block-start { margin-block-start: var(--gap) }

.margin-block-end { margin-block-end: var(--gap) }

.margin-inline { margin-inline: var(--gap) }

.margin-inline-start { margin-inline-start: var(--gap) }

.margin-inline-end { margin-inline-end: var(--gap) }

.flow-gap > :not(:last-child) {
        margin-bottom: 1em;
    }

/**/

.inline { display: inline }

.block { display: block }

.contents { display: contents }

.table {
    display: table;
    width: 100%;
    margin: 0;
}

.row, .rows > * {
    display: table-row
}

.row:not(:last-child):not([specificity-hack]) > *, .rows > *:not(:last-child):not([specificity-hack]) > * {
        margin-bottom: var(--gap);
    }

.row > *:not([specificity-hack]), .rows > * > *:not([specificity-hack]) {
        display: table-cell;
        vertical-align: top;
    }

.row > * + *:not([specificity-hack]), :is(.rows > *) > * + *:not([specificity-hack]) {
        margin-inline-start: var(--gap);
        display: inline-block;
    }

/**/

.big {
    font-size: 1.4em;
    line-height: calc(1.5 * var(--rhythm));
}

/**/

.fixed  { position: fixed  }

.sticky { position: sticky }

.top    { top:    0 }

.right  { right:  0 }

.bottom { bottom: 0 }

.left   { left:   0 }

.float\:left  { float: left  }

.float\:right { float: right }

.overflow\:auto { overflow: auto }

.overflow\:scroll { overflow: scroll }

.airy     { --density: 3;  }

.spacious { --density: 2;  }

.dense    { --density: 1;  }

.crowded  { --density: .5; }

.packed   { --density: 0;  }

.autodensity {
    --density: 1
}

@media (min-width: 768px)  {

.autodensity { --density: 2 
}}

@media (min-width: 1024px) {

.autodensity { --density: 3 
}}

.vh, v-h {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	        clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.all\:initial {
	all: initial;
}

.bold { font-weight: bold }

.italic {
	font-style: italic
}

.italic em, .italic cite, .italic dfn, .italic var, .italic i, .italic address {
		font-style: normal;
	}

.allcaps {
	text-transform: uppercase;
	letter-spacing: .1rem;
}

.primary-font { font-family: var(--primary-font) }

.secondary-font { font-family: var(--secondary-font) }

.display-font { font-family: var(--display-font) }

.mono-font, .monospace { font-family: var(--mono-font) }

.massivetext {
    font-size: calc(.13 * var(--eff-line-length));
	line-height: 1em;
    letter-spacing: 0;
}

.aestheticbreak {
    display: block;
    margin: 0;
    padding: 0;
    height: calc(.5 * var(--gap));
}

.f-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap)
}

.f-row > * { margin: 0 }

.f-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

.f-col > * { margin: 0 }

.f-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    --f-switch-threshold: 55ch
}

.f-switch > * {
        margin: 0;

        flex-grow: 1;
        flex-basis: calc((var(--f-switch-threshold) - 100%) * 999);
    }

.justify-content\:start         { justify-content: start         }

.justify-content\:end           { justify-content: end           }

.justify-content\:baseline      { justify-content: baseline      }

.justify-content\:center        { justify-content: center        }

.justify-content\:stretch       { justify-content: stretch       }

.justify-content\:space-between { justify-content: space-between }

.justify-content\:space-around  { justify-content: space-around  }

.justify-content\:space-evenly  { justify-content: space-evenly  }

.align-items\:start    { align-items: start    }

.align-items\:end      { align-items: end      }

.align-items\:baseline { align-items: baseline }

.align-items\:center   { align-items: center   }

.align-items\:stretch  { align-items: stretch  }

.align-self\:start    { align-self: start    }

.align-self\:end      { align-self: end      }

.align-self\:baseline { align-self: baseline }

.align-self\:center   { align-self: center   }

.align-self\:stretch  { align-self: stretch  }

.flex-grow\:0  { flex-grow: 0  }

.flex-grow\:1  { flex-grow: 1  }

.flex-grow\:2  { flex-grow: 2  }

.flex-grow\:3  { flex-grow: 3  }

.flex-grow\:4  { flex-grow: 4  }

.flex-grow\:5  { flex-grow: 5  }

.flex-grow\:6  { flex-grow: 6  }

.flex-grow\:7  { flex-grow: 7  }

.flex-grow\:8  { flex-grow: 8  }

.flex-grow\:9  { flex-grow: 9  }

.flex-grow\:10 { flex-grow: 10 }

.flex-grow\:11 { flex-grow: 11 }

.flex-grow\:12 { flex-grow: 12 }

.flex-wrap\:wrap   { flex-wrap: wrap   }

.flex-wrap\:nowrap { flex-wrap: nowrap }

.grid {
    display: grid;
    grid-auto-columns: var(--grid-col-width, 1fr);
    grid-auto-rows:    var(--grid-row-width, auto);
    gap: var(--gap)
}

.grid > * { margin: 0 }

.grid-even-rows { --grid-row-width: 1fr; }

.grid-variable-cols { --grid-column-width: auto; }

[data-cols^="1 " ] { grid-column-start: 1  }

[data-cols$=" 1" ] { grid-column-end: 2  }

[data-cols="1" ] { grid-column: 1  }

[data-cols^="2 " ] { grid-column-start: 2  }

[data-cols$=" 2" ] { grid-column-end: 3  }

[data-cols="2" ] { grid-column: 2  }

[data-cols^="3 " ] { grid-column-start: 3  }

[data-cols$=" 3" ] { grid-column-end: 4  }

[data-cols="3" ] { grid-column: 3  }

[data-cols^="4 " ] { grid-column-start: 4  }

[data-cols$=" 4" ] { grid-column-end: 5  }

[data-cols="4" ] { grid-column: 4  }

[data-cols^="5 " ] { grid-column-start: 5  }

[data-cols$=" 5" ] { grid-column-end: 6  }

[data-cols="5" ] { grid-column: 5  }

[data-cols^="6 " ] { grid-column-start: 6  }

[data-cols$=" 6" ] { grid-column-end: 7  }

[data-cols="6" ] { grid-column: 6  }

[data-cols^="7 " ] { grid-column-start: 7  }

[data-cols$=" 7" ] { grid-column-end: 8  }

[data-cols="7" ] { grid-column: 7  }

[data-cols^="8 " ] { grid-column-start: 8  }

[data-cols$=" 8" ] { grid-column-end: 9  }

[data-cols="8" ] { grid-column: 8  }

[data-cols^="9 " ] { grid-column-start: 9  }

[data-cols$=" 9" ] { grid-column-end: 10 }

[data-cols="9" ] { grid-column: 9  }

[data-cols^="10 "] { grid-column-start: 10 }

[data-cols$=" 10"] { grid-column-end: 11 }

[data-cols="10"] { grid-column: 10 }

[data-cols^="11 "] { grid-column-start: 11 }

[data-cols$=" 11"] { grid-column-end: 12 }

[data-cols="11"] { grid-column: 11 }

[data-cols^="12 "] { grid-column-start: 12 }

[data-cols$=" 12"] { grid-column-end: 13 }

[data-cols="12"] { grid-column: 12 }

[data-rows^="1 " ]  { grid-row-start:   1  }

[data-rows$=" 1" ] { grid-row-end:    2  }

[data-rows="1" ] { grid-row:    1  }

[data-rows^="2 " ]  { grid-row-start:   2  }

[data-rows$=" 2" ] { grid-row-end:    3  }

[data-rows="2" ] { grid-row:    2  }

[data-rows^="3 " ]  { grid-row-start:   3  }

[data-rows$=" 3" ] { grid-row-end:    4  }

[data-rows="3" ] { grid-row:    3  }

[data-rows^="4 " ]  { grid-row-start:   4  }

[data-rows$=" 4" ] { grid-row-end:    5  }

[data-rows="4" ] { grid-row:    4  }

[data-rows^="5 " ]  { grid-row-start:   5  }

[data-rows$=" 5" ] { grid-row-end:    6  }

[data-rows="5" ] { grid-row:    5  }

[data-rows^="6 " ]  { grid-row-start:   6  }

[data-rows$=" 6" ] { grid-row-end:    7  }

[data-rows="6" ] { grid-row:    6  }

[data-rows^="7 " ]  { grid-row-start:   7  }

[data-rows$=" 7" ] { grid-row-end:    8  }

[data-rows="7" ] { grid-row:    7  }

[data-rows^="8 " ]  { grid-row-start:   8  }

[data-rows$=" 8" ] { grid-row-end:    9  }

[data-rows="8" ] { grid-row:    8  }

[data-rows^="9 " ]  { grid-row-start:   9  }

[data-rows$=" 9" ] { grid-row-end:    10 }

[data-rows="9" ] { grid-row:    9  }

[data-rows^="10 "]  { grid-row-start:   10 }

[data-rows$=" 10"] { grid-row-end:    11 }

[data-rows="10"] { grid-row:    10 }

[data-rows^="11 "]  { grid-row-start:   11 }

[data-rows$=" 11"] { grid-row-end:    12 }

[data-rows="11"] { grid-row:    11 }

[data-rows^="12 "]  { grid-row-start:   12 }

[data-rows$=" 12"] { grid-row-end:    13 }

[data-rows="12"] { grid-row:    12 }

@media (max-width: 768px) {
    [data-cols\@s^="1 " ] { grid-column-start: 1  }    [data-cols\@s$=" 1" ] { grid-column-end: 2  }   [data-cols\@s="1" ] { grid-column: 1  }
    [data-cols\@s^="2 " ] { grid-column-start: 2  }    [data-cols\@s$=" 2" ] { grid-column-end: 3  }   [data-cols\@s="2" ] { grid-column: 2  }
    [data-cols\@s^="3 " ] { grid-column-start: 3  }    [data-cols\@s$=" 3" ] { grid-column-end: 4  }   [data-cols\@s="3" ] { grid-column: 3  }
    [data-cols\@s^="4 " ] { grid-column-start: 4  }    [data-cols\@s$=" 4" ] { grid-column-end: 5  }   [data-cols\@s="4" ] { grid-column: 4  }
    [data-cols\@s^="5 " ] { grid-column-start: 5  }    [data-cols\@s$=" 5" ] { grid-column-end: 6  }   [data-cols\@s="5" ] { grid-column: 5  }
    [data-cols\@s^="6 " ] { grid-column-start: 6  }    [data-cols\@s$=" 6" ] { grid-column-end: 7  }   [data-cols\@s="6" ] { grid-column: 6  }
    [data-cols\@s^="7 " ] { grid-column-start: 7  }    [data-cols\@s$=" 7" ] { grid-column-end: 8  }   [data-cols\@s="7" ] { grid-column: 7  }
    [data-cols\@s^="8 " ] { grid-column-start: 8  }    [data-cols\@s$=" 8" ] { grid-column-end: 9  }   [data-cols\@s="8" ] { grid-column: 8  }
    [data-cols\@s^="9 " ] { grid-column-start: 9  }    [data-cols\@s$=" 9" ] { grid-column-end: 10 }   [data-cols\@s="9" ] { grid-column: 9  }
    [data-cols\@s^="10 "] { grid-column-start: 10 }    [data-cols\@s$=" 10"] { grid-column-end: 11 }   [data-cols\@s="10"] { grid-column: 10 }
    [data-cols\@s^="11 "] { grid-column-start: 11 }    [data-cols\@s$=" 11"] { grid-column-end: 12 }   [data-cols\@s="11"] { grid-column: 11 }
    [data-cols\@s^="12 "] { grid-column-start: 12 }    [data-cols\@s$=" 12"] { grid-column-end: 13 }   [data-cols\@s="12"] { grid-column: 12 }

    [data-rows\@s^="1 " ]  { grid-row-start:   1  }    [data-rows\@s$=" 1" ] { grid-row-end:    2  }   [data-rows\@s="1" ] { grid-row:    1  }
    [data-rows\@s^="2 " ]  { grid-row-start:   2  }    [data-rows\@s$=" 2" ] { grid-row-end:    3  }   [data-rows\@s="2" ] { grid-row:    2  }
    [data-rows\@s^="3 " ]  { grid-row-start:   3  }    [data-rows\@s$=" 3" ] { grid-row-end:    4  }   [data-rows\@s="3" ] { grid-row:    3  }
    [data-rows\@s^="4 " ]  { grid-row-start:   4  }    [data-rows\@s$=" 4" ] { grid-row-end:    5  }   [data-rows\@s="4" ] { grid-row:    4  }
    [data-rows\@s^="5 " ]  { grid-row-start:   5  }    [data-rows\@s$=" 5" ] { grid-row-end:    6  }   [data-rows\@s="5" ] { grid-row:    5  }
    [data-rows\@s^="6 " ]  { grid-row-start:   6  }    [data-rows\@s$=" 6" ] { grid-row-end:    7  }   [data-rows\@s="6" ] { grid-row:    6  }
    [data-rows\@s^="7 " ]  { grid-row-start:   7  }    [data-rows\@s$=" 7" ] { grid-row-end:    8  }   [data-rows\@s="7" ] { grid-row:    7  }
    [data-rows\@s^="8 " ]  { grid-row-start:   8  }    [data-rows\@s$=" 8" ] { grid-row-end:    9  }   [data-rows\@s="8" ] { grid-row:    8  }
    [data-rows\@s^="9 " ]  { grid-row-start:   9  }    [data-rows\@s$=" 9" ] { grid-row-end:    10 }   [data-rows\@s="9" ] { grid-row:    9  }
    [data-rows\@s^="10 "]  { grid-row-start:   10 }    [data-rows\@s$=" 10"] { grid-row-end:    11 }   [data-rows\@s="10"] { grid-row:    10 }
    [data-rows\@s^="11 "]  { grid-row-start:   11 }    [data-rows\@s$=" 11"] { grid-row-end:    12 }   [data-rows\@s="11"] { grid-row:    11 }
    [data-rows\@s^="12 "]  { grid-row-start:   12 }    [data-rows\@s$=" 12"] { grid-row-end:    13 }   [data-rows\@s="12"] { grid-row:    12 }
}

@media (min-width: 1024px) {
    [data-cols\@l^="1 " ] { grid-column-start: 1  }    [data-cols\@l$=" 1" ] { grid-column-end: 2  }   [data-cols\@l="1" ] { grid-column: 1  }
    [data-cols\@l^="2 " ] { grid-column-start: 2  }    [data-cols\@l$=" 2" ] { grid-column-end: 3  }   [data-cols\@l="2" ] { grid-column: 2  }
    [data-cols\@l^="3 " ] { grid-column-start: 3  }    [data-cols\@l$=" 3" ] { grid-column-end: 4  }   [data-cols\@l="3" ] { grid-column: 3  }
    [data-cols\@l^="4 " ] { grid-column-start: 4  }    [data-cols\@l$=" 4" ] { grid-column-end: 5  }   [data-cols\@l="4" ] { grid-column: 4  }
    [data-cols\@l^="5 " ] { grid-column-start: 5  }    [data-cols\@l$=" 5" ] { grid-column-end: 6  }   [data-cols\@l="5" ] { grid-column: 5  }
    [data-cols\@l^="6 " ] { grid-column-start: 6  }    [data-cols\@l$=" 6" ] { grid-column-end: 7  }   [data-cols\@l="6" ] { grid-column: 6  }
    [data-cols\@l^="7 " ] { grid-column-start: 7  }    [data-cols\@l$=" 7" ] { grid-column-end: 8  }   [data-cols\@l="7" ] { grid-column: 7  }
    [data-cols\@l^="8 " ] { grid-column-start: 8  }    [data-cols\@l$=" 8" ] { grid-column-end: 9  }   [data-cols\@l="8" ] { grid-column: 8  }
    [data-cols\@l^="9 " ] { grid-column-start: 9  }    [data-cols\@l$=" 9" ] { grid-column-end: 10 }   [data-cols\@l="9" ] { grid-column: 9  }
    [data-cols\@l^="10 "] { grid-column-start: 10 }    [data-cols\@l$=" 10"] { grid-column-end: 11 }   [data-cols\@l="10"] { grid-column: 10 }
    [data-cols\@l^="11 "] { grid-column-start: 11 }    [data-cols\@l$=" 11"] { grid-column-end: 12 }   [data-cols\@l="11"] { grid-column: 11 }
    [data-cols\@l^="12 "] { grid-column-start: 12 }    [data-cols\@l$=" 12"] { grid-column-end: 13 }   [data-cols\@l="12"] { grid-column: 12 }

    [data-rows\@l^="1 " ]  { grid-row-start:   1  }    [data-rows\@l$=" 1" ] { grid-row-end:    2  }   [data-rows\@l="1" ] { grid-row:    1  }
    [data-rows\@l^="2 " ]  { grid-row-start:   2  }    [data-rows\@l$=" 2" ] { grid-row-end:    3  }   [data-rows\@l="2" ] { grid-row:    2  }
    [data-rows\@l^="3 " ]  { grid-row-start:   3  }    [data-rows\@l$=" 3" ] { grid-row-end:    4  }   [data-rows\@l="3" ] { grid-row:    3  }
    [data-rows\@l^="4 " ]  { grid-row-start:   4  }    [data-rows\@l$=" 4" ] { grid-row-end:    5  }   [data-rows\@l="4" ] { grid-row:    4  }
    [data-rows\@l^="5 " ]  { grid-row-start:   5  }    [data-rows\@l$=" 5" ] { grid-row-end:    6  }   [data-rows\@l="5" ] { grid-row:    5  }
    [data-rows\@l^="6 " ]  { grid-row-start:   6  }    [data-rows\@l$=" 6" ] { grid-row-end:    7  }   [data-rows\@l="6" ] { grid-row:    6  }
    [data-rows\@l^="7 " ]  { grid-row-start:   7  }    [data-rows\@l$=" 7" ] { grid-row-end:    8  }   [data-rows\@l="7" ] { grid-row:    7  }
    [data-rows\@l^="8 " ]  { grid-row-start:   8  }    [data-rows\@l$=" 8" ] { grid-row-end:    9  }   [data-rows\@l="8" ] { grid-row:    8  }
    [data-rows\@l^="9 " ]  { grid-row-start:   9  }    [data-rows\@l$=" 9" ] { grid-row-end:    10 }   [data-rows\@l="9" ] { grid-row:    9  }
    [data-rows\@l^="10 "]  { grid-row-start:   10 }    [data-rows\@l$=" 10"] { grid-row-end:    11 }   [data-rows\@l="10"] { grid-row:    10 }
    [data-rows\@l^="11 "]  { grid-row-start:   11 }    [data-rows\@l$=" 11"] { grid-row-end:    12 }   [data-rows\@l="11"] { grid-row:    11 }
    [data-rows\@l^="12 "]  { grid-row-start:   12 }    [data-rows\@l$=" 12"] { grid-row-end:    13 }   [data-rows\@l="12"] { grid-row:    12 }
}