:root {
    /* colors */
    --white: hsl(0, 0%, 100%);
    --gray95: hsl(0, 0%, 95%);
    --gray90: hsl(0, 0%, 90%);
    --gray85: hsl(0, 0%, 85%);
    --gray80: hsl(0, 0%, 80%);
    --gray75: hsl(0, 0%, 75%);
    --gray70: hsl(0, 0%, 70%);
    --gray65: hsl(0, 0%, 65%);
    --gray60: hsl(0, 0%, 60%);
    --gray55: hsl(0, 0%, 55%);
    --gray50: hsl(0, 0%, 50%);
    --gray45: hsl(0, 0%, 45%);
    --gray40: hsl(0, 0%, 40%);
    --gray35: hsl(0, 0%, 35%);
    --gray30: hsl(0, 0%, 30%);
    --gray25: hsl(0, 0%, 25%);
    --gray20: hsl(0, 0%, 20%);
    --gray15: hsl(0, 0%, 15%);
    --gray10: hsl(0, 0%, 10%);
    --gray05: hsl(0, 0%, 05%);
    --black: hsl(0, 0%, 0%);

    --background: var(--gray95);
    --foreground: var(--gray05);

    --accent-bg: hsl(180, 30%, 30%);
    --accent-fg: hsl(180, 30%, 95%);
    --accent-hv: hsl(180, 30%, 40%);
    --accent-fc: hsl(180, 30%, 50%);
    --accent-bd: hsl(180, 30%, 15%);
    --accent-ds: hsl(180, 30%, 70%);

    --alert-bg: hsl(5, 50%, 30%);
    --alert-fg: hsl(5, 50%, 95%);
    --alert-hv: hsl(5, 50%, 40%);
    --alert-fc: hsl(5, 50%, 50%);
    --alert-bd: hsl(5, 50%, 15%);
    --alert-ds: hsl(5, 50%, 70%);

    /* sizes */
    --x4l: 3.0rem;     --em-x4l: 3.0em;
    --x3l: 2.0rem;     --em-x3l: 2.0em;
    --xxl: 1.75rem;     --em-xxl: 1.75em;
    --xl: 1.5rem;      --em-xl: 1.5em;
    --lg: 1.25rem;      --em-lg: 1.25em;
    --md: 1rem;        --em-md: 1em;
    --sm: 0.8rem;      --em-sm: 0.8em;
    --xs: 0.6rem;      --em-xs: 0.6em;
    --xxs: 0.45rem;    --em-xxs: 0.45em;
    --x3s: 0.25rem;    --em-x3s: 0.25em;
    --x4s: 0.10rem;    --em-x4s: 0.10em;

    --articleMaxWidth: 70ch;

    /* fonts */
    --systemui: system-ui, sans-serif;
    --monospace: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;
    --code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --oldstyle: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --geometric: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --classical: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    --neo: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
    --antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    --modern: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
    --handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

    --fontsize: 14pt;
    --fontfamily: var(--humanist);

    font-size: var(--fontsize);
    font-family: var(--fontfamily);
    font-weight: 300;
    font-variant-numeric: oldstyle-nums;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border-color: var(--gray70);
    border-style: solid;
    border-width: 0px;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    background-color: var(--background);
    color: var(--foreground);
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
}
body > * { flex-grow: 1; }
body > header { flex-grow: 0; flex-shrink: 1; }
body > footer { flex-grow: 0; flex-shrink: 1; }

/* Scrollbar */
::-webkit-scrollbar { width: var(--xs); }
::-webkit-scrollbar-track { background-color: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--gray70); border-radius: var(--x3s); }
::-webkit-scrollbar-thumb:hover { background-color: var(--gray80); }

/* Headings */
h1 { color: var(--gray10); font-size: var(--xxl); letter-spacing: -0.02em; }
h2 { color: var(--gray10); font-size: var(--xl);  letter-spacing: -0.01em; }
h3 { font-weight: bold;   font-size: var(--lg); }
h4 { font-weight: bold;   font-size: var(--md); }
h5 { font-style: italic;  font-size: var(--md); }
h1, h2, h3, h4, h5 {
    margin-top: var(--em-sm);
    margin-bottom: var(--em-xs);
    line-height: 110%;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
    margin-top: 0px;
}

/* Links */
a, a:visited { color: var(--gray10); text-decoration: underline; }
a:hover { opacity: 0.8; cursor: pointer; }

/* Lists */
ul, ol { margin-top: var(--em-md); margin-left: var(--em-md); }
li, li > ul, li > ol { margin-top: var(--em-x3s); }
li { padding-left: var(--em-x3s); }
.list-none { list-style: none; margin: 0; }
.list-none li { padding: 0; margin: 0; }

/* Text Blocks */
article, .article { max-width: var(--articleMaxWidth); margin: var(--em-xl) auto var(--em-xl) auto; }
p { margin-top: var(--em-md); line-height: var(--em-lg); }
p:first-of-type { margin-top: 0; }

code {    
    background-color: var(--gray90);
    font-size: var(--sm);
    font-family: var(--code);
    word-wrap: break-word;
    padding: var(--em-x4s) var(--em-x3s);
    line-height: var(--em-xl);
}
pre {
    font-family: var(--code);
    margin-top: var(--em-sm);
}
pre > code {
    display: block;
    padding: 0 var(--em-md);
    line-height: var(--em-lg);
    white-space: pre;
    overflow-x: scroll;
    max-width: 100%;
    min-width: 10ch;
}

blockquote {
    background-color: var(--gray90);
    border-left: var(--lg) solid var(--gray80);
    margin: var(--lg) var(--sm);
    padding: var(--sm) var(--md);
}
blockquote::before {
    color: var(--gray50);
    content: open-quote;
    font-size: var(--x3l);
    line-height: 0.1em;
    margin-right: 0.65em;
    margin-left: -1.1em;
    vertical-align: -0.2em;
}
blockquote p {
    display: inline;
}

/* Navigation */
nav > ul { list-style: none; margin: 0px; }
nav > ul > li { padding: var(--em-xxs) var(--em-xs); }
nav > ul > li:hover { background-color: var(--gray90); }
nav > ul > li > a { display: block; }
nav > ul > li:hover { 
    transition-property: background-color;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
}
.light nav > ul > li:hover,
nav.light > ul > li:hover { background-color: var(--gray80); }
nav.dark > ul > li:hover, 
.dark nav > ul > li:hover { background-color: var(--gray20); }

body > header nav,
nav.horizontal {
    display: inline-block;
}

body > header nav > ul,
nav.horizontal > ul {
    display: flex;
}

/* Images */
svg {
    fill: var(--foreground);
    vertical-align: text-bottom;
}
.dark svg, .accent svg, .alert svg {
    fill: var(--background);
}

/* Cursor */
button, 
input[type="button"],
[type="reset"],
[type="submit"],
[type="image"],
[type="checkbox"],
[type="radio"],
[type="color"],
summary {
    cursor: pointer;
}
button:disabled, 
input[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled,
[type="image"]:disabled,
[type="checkbox"]:disabled,
[type="radio"]:disabled,
[type="color"]:disabled,
summary:disabled {
    cursor: not-allowed;
}

/* Button */
button, 
input[type="button"],
[type="reset"],
[type="submit"] {
    padding: var(--xxs) var(--sm);
    font-size: var(--sm);
    border-radius: var(--x4s);
    border-width: 1px;
    border-style: solid;
}

/* Label */
label {
    display: inline-block;
    font-size: var(--sm);
    font-weight: 400;
    color: var(--gray10);
    margin-top: var(--sm);
}
label:first-child {
    margin-top: 0px;
}
label[for] {
    cursor: pointer;
}
label + input {
    margin-top: var(--x3s);
    display: block;
}
label + input[type="checkbox"] {
    display: inline-block;
}

/* Input */
input {
    padding: var(--em-xxs);
    font-size: var(--sm);
}
input[type="checkbox"] {
    height: var(--sm);
    width: var(--sm);
    padding: 0px;
    vertical-align: middle;
}
input[type="radio"] {
    height: var(--sm);
    width: var(--sm);
    padding: 0px;
    vertical-align: middle;
}
input[type="number"] {
    padding-right: 0px;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    padding-right: 0.25em;
}
input[type="color"] {
    appearance: none;
    border: none;
    width: var(--x3l);
    height: var(--x3l);
}

/* Text Area */
textarea {
    display: block;
    padding: var(--em-xxs) var(--em-xs);
    font-size: var(--sm);
    font-family: var(--humanist);
}
label + textarea {
    margin-top: var(--em-xxs);
    display: block;
}

/* Select */
select {
    font-size: var(--sm);
    padding: var(--x3s) var(--xxs);
}
option {
    padding: var(--x3s) var(--xxs);
}

label + select[multiple] {
    margin-top: var(--x3s);
    display: block;
}
select[multiple] > optgroup > option {
    margin-left: var(--sm);
}

/* Progress */
progress, meter {
    vertical-align: bottom;
}
progress[value] {
    -webkit-appearance: none;
    appearance: none;
}
progress::-webkit-progress-bar, progress::-moz-progress-bar {
    background-color: var(--gray60);
}
progress::-webkit-progress-value {
    background-color: var(--accent-bg);
}

/* Tables */
table {
    border-collapse: collapse;
    table-layout: auto;
}
table th {
    text-align: left;
}
table th, table td {
    border-width: 1px;
    padding: var(--em-xxs) var(--em-xs);
}
table.fixed { table-layout: fixed; }
table.alternate :not(thead > tr) tr:nth-child(even) {
    background-color: var(--gray90);
}
table.dark.alternate :not(thead > tr) tr:nth-child(even) {
    background-color: var(--gray20);
}
table.none th, table.none td {
    border-width: 0px;
    padding: 0;
}

/* Horizontal Rule */
hr {
    border: 0;
    border-top: 1px solid var(--gray70);
    margin: var(--md) 0px;
}

/* Toggle */
label.toggle {
    display: inline-block;
    border-radius: var(--em-md);
    height: var(--em-lg);
    width: 2.20em;
    background-color: var(--gray80);
    padding: 0.0em 0.0em;
    cursor: pointer;
}
label.toggle > input[type="checkbox"] {
    width: 0;
    height: 0;
    opacity: 0;
}
label.toggle > .toggle-slider {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--em-sm);
    background-color: var(--gray70);
    transition: margin-left 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
input[type="checkbox"]:checked + .toggle-slider {
    background-color: var(--gray40);
    margin-left: 1em;
    transition: margin-left 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
input[type="checkbox"]:checked + .toggle-slider.accent {
    background-color: var(--accent-bg);
}
input[type="checkbox"]:checked + .toggle-slider.alert {
    background-color: var(--alert-bg);
}

/* Cards */
.card {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-top: var(--md);
    background-color: var(--white);
    box-shadow: 0px var(--xxs) 8px 2px var(--gray90);
    transition: box-shadow 0.10s ease-in-out;
}
.card > * {
    padding: var(--xxs) var(--xs);
}
a.card {
    text-decoration: none;
}
.card > title {
    display: block;
    font-size: var(--lg);
    font-weight: 600;
}
a.card:hover, button.card:hover {
    box-shadow: 0px var(--xxs) 8px 2px var(--gray80);
    transition: box-shadow 0.10s ease-in-out;
}

/* Icons */
.icon {
    display: inline-block;
    height: var(--em-lg);
}
.icon:first-child:not(:only-child) {
    margin-right: var(--em-xs);
}
.icon:last-child:not(:only-child) {
    margin-left: var(--em-xs);
}

/* Popups */
.backdrop {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 70vh;
    max-width: 70vw;
    overflow: auto;
    z-index: 101;
    background-color: var(--background);
    color: var(--foreground);
    padding: var(--em-md);
}

/* Pill */
.pill {
    font-size: var(--sm);
    color: var(--gray20);
    display: inline-block;
    padding: var(--em-x3s) var(--em-sm);
    background-color: var(--gray80);
    border-radius: 1000px;
}
.pill.accent {
    background-color: var(--accent-bg);
    color: var(--accent-fg);
}
.pill.alert {
    background-color: var(--alert-bg);
    color: var(--alert-fg);
}

/* Color Helpers */
.muted { color: var(--gray50); }
.invert { color: var(--background); background-color: var(--foreground); border-color: var(--gray30); }

/* Light Colors */
.light, button, input[type="button"] {
    background-color: var(--gray90);
    color: var(--gray10);
}
.light, .light * {
    border-color: var(--gray80);
}
button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
a.light:not(:disabled):hover {
    cursor: pointer;
    background-color: var(--gray85) !important;
    border-color: var(--gray70) !important;
}
.light:disabled,
button:disabled,
input[type="button"]:disabled {
    color: var(--gray50) !important;
}
.light:focus, .light:active:focus,
button:focus, button:active:focus,
input[type="button"]:focus, input[type="button"]:active:focus {
    background-color: var(--gray80) !important;
    border-color: var(--gray90) !important;
}

/* Dark Colors */
.dark {
    background-color: var(--gray10);
    color: var(--gray90);
}
.dark, .dark * {
    border-color: var(--gray30);
}
button.dark:not(:disabled):hover,
input[type="button"].dark:not(:disabled):hover,
a.dark:not(:disabled):hover {
    cursor: pointer;
    background-color: var(--gray15) !important;
    border-color: var(--gray25) !important;
}
.dark:disabled {
    color: var(--gray60) !important;
}
.dark:focus, .dark:focus:active,
button.dark:focus, button.dark:focus:active,
input[type="button"].dark:focus, input[type="button"].dark:focus:active {
    background-color: var(--gray30) !important;
    border-color: var(--gray40) !important;
}
.dark a {
    color: var(--background);
}

/* Styled Overrides */
.plain {
    background-color: transparent;
    color: var(--foreground);
    text-decoration: none;
    font-weight: normal;
    font-size: var(--md);
    list-style: none;
    margin: 0px;
    border-width: 0px;
}
.pre {
    white-space: preserve;
}

/* Grays */
.bg-white { background-color: var(--white); }
.bg-gray95 { background-color: var(--gray95); }
.bg-gray90 { background-color: var(--gray90); }
.bg-gray85 { background-color: var(--gray85); }
.bg-gray80 { background-color: var(--gray80); }
.bg-gray75 { background-color: var(--gray75); }
.bg-gray70 { background-color: var(--gray70); }
.bg-gray65 { background-color: var(--gray65); }
.bg-gray60 { background-color: var(--gray60); }
.bg-gray55 { background-color: var(--gray55); }
.bg-gray50 { background-color: var(--gray50); }
.bg-gray45 { background-color: var(--gray45); }
.bg-gray40 { background-color: var(--gray40); }
.bg-gray35 { background-color: var(--gray35); }
.bg-gray30 { background-color: var(--gray30); }
.bg-gray25 { background-color: var(--gray25); }
.bg-gray20 { background-color: var(--gray20); }
.bg-gray15 { background-color: var(--gray15); }
.bg-gray10 { background-color: var(--gray10); }
.bg-gray05 { background-color: var(--gray05); }
.bg-black { background-color: var(--black); }

.tx-white { color: var(--white) !important; }
.tx-black { color: var(--black) !important; }
.tx-light { color: var(--background) !important; }
.tx-dark { color: var(--foreground) !important; }

.fill-white { fill: var(--white); }
.fill-black { fill: var(--black); }
.fill-light { fill: var(--background); }
.fill-dark { fill: var(--foreground); }
.fill-gray50 { fill: var(--gray50); }

/* Accent Colors */
.accent {
    background-color: var(--accent-bg);
    color: var(--accent-fg);
}
.accent, .accent * {
    border-color: var(--accent-bd);
}
a.accent {
    color: var(--accent-bg);
    background-color: transparent;
}
button.accent:not(:disabled):hover,
input[type="button"].accent:not(:disabled):hover {
    background-color: var(--accent-hv) !important;
    border-color: var(--accent-bd) !important;
}
a.accent:not(:disabled):hover {
    color: var(--accent-hv);
}
.accent:disabled {
    color: var(--accent-ds) !important;
}
.accent:focus, .accent:focus:active,
button.accent:focus, button.accent:focus:active,
input[type="button"].accent:focus, input[type="button"].accent:focus:active {
    background-color: var(--accent-fc) !important;
    border-color: var(--accent-bd) !important;
}

/* Alert Colors */
.alert {
    background-color: var(--alert-bg);
    color: var(--alert-fg);
    border-color: var(--alert-bd);
}
.alert, .alert * {
    border-color: var(--alert-bd);
}
button.alert:not(:disabled):hover,
input[type="button"].alert:not(:disabled):hover,
a.alert:not(:disabled):hover {
    cursor: pointer;
    background-color: var(--alert-hv) !important;
    border-color: var(--alert-bd) !important;
}
.alert:disabled {
    color: var(--alert-ds) !important;
}
.alert:focus, .alert:focus:active,
button.alert:focus, button.alert:focus:active,
input[type="button"].alert:focus, input[type="button"].alert:focus:active {
    background-color: var(--alert-fc) !important;
    border-color: var(--alert-bd) !important;
}

/* Glass */
.glass {
    background-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
    outline: solid 2px rgba(255, 255, 255, 0.5);
}
.glass.dark {
    background-color: rgba(0, 0, 0, 0.4) !important;
    outline: solid 2px rgba(255, 255, 255, 0.1);
}
.glass.accent {
    background-color: var(--accent-glass) !important;
}
.glass.alert {
    background-color: var(--alert-glasss) !important;
}

/* Borders */
.border { border-width: 1px; }
.border-none { border-width: 0px; }
.border.thick { border-width: 2px }
.round-sm { border-radius: var(--sm); }
.round { border-radius: var(--md); }
.round-lg { border-radius: var(--lg); }
.circle { border-radius: 1000%; }
.outline-none { outline-width: 0px; }

/* Text */
.caps { font-variant: small-caps; letter-spacing: 0.03em; }
.mono { font-family: var(--monospace); }
.tabular { font-variant: tabular-nums; }

.tx-left { text-align: left; }
.tx-center { text-align: center; }
.tx-right { text-align: right; }

/* Sizes */
.tx-jumbo { font-size: 8rem; }
.tx-x4l { font-size: var(--x4l); letter-spacing: -0.04em; }
.tx-x3l { font-size: var(--x3l); letter-spacing: -0.03em; }
.tx-xxl { font-size: var(--xxl); letter-spacing: -0.02em; }
.tx-xl {  font-size: var(--xl);  letter-spacing: -0.01em; }
.tx-lg {  font-size: var(--lg); }
.tx-md {  font-size: var(--md); }
.tx-sm {  font-size: var(--sm); }
.tx-xs {  font-size: var(--xs); }

/* Padding */
.pad { padding: var(--em-sm) var(--em-md); }
.p-none { padding: 0px !important; }
.p-xs {  padding: var(--x3s) var(--xs) }
.p-sm {  padding: var(--xxs) var(--sm) }
.p-md {  padding: var(--xs) var(--md) }
.p-lg {  padding: var(--sm) var(--lg) }
.p-xl {  padding: var(--md) var(--xl) }
.p-xxl { padding: var(--lg) var(--xxl) }
.p-x3l { padding: var(--xl) var(--x3l) }

/* Margin */
.m      { margin: var(--em-sm) var(--em-md); }
.m-none { margin: 0px !important; }
.m-xs {   margin: var(--xxs) var(--xs); }
.m-sm {   margin: var(--xs) var(--sm); }
.m-md {   margin: var(--sm) var(--md); }
.m-lg {   margin: var(--md) var(--lg); }
.m-xl {   margin: var(--lg) var(--xl); }
.m-xxl {  margin: var(--xl) var(--xxl); }
.m-x3l {  margin: var(--xxl) var(--x3l); }
.m-x4l { margin:var(--x3l) var(--x4l); }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt {      margin-top: var(--em-md) }
.mt-none { margin-top: 0px }
.mt-xs {   margin-top: var(--xs) }
.mt-sm {   margin-top: var(--sm) }
.mt-md {   margin-top: var(--md) }
.mt-lg {   margin-top: var(--lg) }
.mt-xl {   margin-top: var(--xl) }
.mt-xxl {  margin-top: var(--xxl) }
.mt-x3l {  margin-top: var(--x3l) }
.mt-x4l {  margin-top: var(--x4l) }

.ml {      margin-left: var(--em-md)  }
.ml-none { margin-left: 0px }
.ml-xs {   margin-left: var(--xs) }
.ml-sm {   margin-left: var(--sm) }
.ml-md {   margin-left: var(--md) }
.ml-lg {   margin-left: var(--lg) }
.ml-xl {   margin-left: var(--xl) }
.ml-xxl {  margin-left: var(--xxl) }
.ml-x3l {  margin-left: var(--x3l) }
.ml-x4l {  margin-left: var(--x4l) }

.mb {      margin-bottom: var(--em-md) }
.mb-none { margin-bottom: 0px }
.mb-xs {   margin-bottom: var(--xs) }
.mb-sm {   margin-bottom: var(--sm) }
.mb-md {   margin-bottom: var(--md) }
.mb-lg {   margin-bottom: var(--lg) }
.mb-xl {   margin-bottom: var(--xl) }
.mb-xxl {  margin-bottom: var(--xxl) }
.mb-x3l {  margin-bottom: var(--x3l) }
.mb-x4l {  margin-bottom: var(--x4l) }

.mr {      margin-right: var(--em-md) }
.mr-none { margin-right: 0px }
.mr-xs {   margin-right: var(--xs) }
.mr-sm {   margin-right: var(--sm) }
.mr-md {   margin-right: var(--md) }
.mr-lg {   margin-right: var(--lg) }
.mr-xl {   margin-right: var(--xl) }
.mr-xxl {  margin-right: var(--xxl) }
.mr-x3l {  margin-right: var(--x3l) }
.mr-x4l {  margin-right: var(--x4l) }

/* Flex Layout */
.flex-row, .left-pane, .right-pane {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
.flex-row { gap: var(--md); }
.flex-row.tight { gap: var(--xs); }
.flex-row.loose { gap: var(--xl); }
.flex-row > * { 
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
.left-pane, .right-page {
    align-items: start;
}
.left-pane > *, .right-pane > * {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 80%;
    align-self: stretch;
}
.left-pane > *:first-child, .right-pane > *:last-child {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 20%;
}

.flex-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--md)
}
.flex-col .tight { gap: var(--sm); }
.flex-col .loose { gap: var(--lg); }

.grow { flex-grow:1; flex-shrink: 0; }
.shrink { flex-grow:0; flex-shrink: 1; }
.wrap { flex-wrap: wrap; }

.justify-center { justify-content: center; }
.justify-end { justify-content: end; }

/* Grid Layout */
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,
.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12 {
    display: grid;
    column-gap: var(--md);
    row-gap: var(--sm);
}
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.grid-1.tight, .grid-2.tight, .grid-3.tight, .grid-4.tight,
.grid-5.tight, .grid-6.tight, .grid-7.tight, .grid-8.tight,
.grid-9.tight, .grid-10.tight, .grid-11.tight, .grid-12.tight {
    column-gap: var(--xs);
    row-gap: var(--xs);
}
.grid-1.loose, .grid-2.loose, .grid-3.loose, .grid-4.loose,
.grid-5.loose, .grid-6.loose, .grid-7.loose, .grid-8.loose,
.grid-9.loose, .grid-10.loose, .grid-11.loose, .grid-12.loose {
    column-gap: var(--xl);
    row-gap: var(--md);
}

.gap-none {
    column-gap: 0px;
    row-gap: 0px;
    gap: 0px;
}

/* other utils */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* Hamburder */
.hamburger-menu { z-index: 1; }
.hamburger-menu > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--xl);
    width: 1em;
    height: 1em;
    display: none;
    place-content: center;
}
.hamburger-menu > input[type="checkbox"]::before {
    content: '\2261';
    font-family: Arial, sans-serif;
    background-color: var(--gray90);
}
.hamburger-menu > input[type="checkbox"]:checked:before {
    content: '\03A7';
    font-size: 0.8em;
    font-weight: bold;
}

@media screen and (max-width: 110ch) {
    .hamburger-menu {
        overflow: hidden;
    }
    .hamburger-menu, .left-pane, .right-pane {
        display: block;
    }
    .hamburger-menu > input[type="checkbox"] {
        display: grid;
    }
    .hamburger-menu > *:not(input[type="checkbox"]) {
        height: 0px;
        visibility: hidden;
    }
    .hamburger-menu > input[type="checkbox"]:checked ~ * {
        height: auto;
        visibility: visible;
    }
}
@media screen and (max-width: 110ch) {
    article, .article { 
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Sizes */
.w-fill :has("display:block") {
    width: 100%;
}
.w-100 {
    width: 100%;
}