/* RESET */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a, button { cursor: revert; }
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }
img { max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { white-space: revert; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: none; }
:focus-visible { outline: 1px dotted currentColor; }

/* VARIABLES - Shared */
:root {
--black: 0, 0, 0;
--white: 255, 255, 255;
--rainbow: linear-gradient(90deg, rgb(225, 28, 110), rgb(190, 27, 28), rgb(236, 110, 8), rgb(245, 156, 4), rgb(255, 204, 1), rgb(177, 196, 18), rgb(49, 149, 45), rgb(37, 134, 98), rgb(24, 119, 151), rgb(21, 69, 136), rgb(58, 43, 133), rgb(117, 54, 135));
scrollbar-width: thin;
}

/* VARIBLES - Dark Mode */
:root {
--shared-bg: 23, 21, 18;
--shared-card: 33, 30, 26;
--shared-border: 53, 49, 43;
--shared-text: 237, 233, 227;
--shared-link: 166, 158, 147;
}

/* VARIABLES - Light Mode */
:root.ap-light {
--shared-bg: 250, 249, 247;
--shared-card: 240, 238, 235;
--shared-border: 221, 217, 211;
--shared-text: 38, 35, 31;
--shared-link: 110, 104, 98;
}

/* VARIABLES - prefers-light-mode */
@media (prefers-color-scheme: light) {
:root:not(.ap-dark) {
--shared-bg: 250, 249, 247;
--shared-card: 240, 238, 235;
--shared-border: 221, 217, 211;
--shared-text: 38, 35, 31;
--shared-link: 110, 104, 98;
}}

/* FONTS */
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-200.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 200; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-200italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 300; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 300; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-300italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 400; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 500; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 500; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-500italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 600; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 600; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-600italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 700; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 700; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-700italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 800; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 800; src: url('../fonts/atkinson-hyperlegible-next-v7-latin_latin-ext-800italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 200; src: url('../fonts/literata-v40-latin_latin-ext-200.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 200; src: url('../fonts/literata-v40-latin_latin-ext-200italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 300; src: url('../fonts/literata-v40-latin_latin-ext-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 300; src: url('../fonts/literata-v40-latin_latin-ext-300italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; src: url('../fonts/literata-v40-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; src: url('../fonts/literata-v40-latin_latin-ext-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 500; src: url('../fonts/literata-v40-latin_latin-ext-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 500; src: url('../fonts/literata-v40-latin_latin-ext-500italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; src: url('../fonts/literata-v40-latin_latin-ext-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 600; src: url('../fonts/literata-v40-latin_latin-ext-600italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 700; src: url('../fonts/literata-v40-latin_latin-ext-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 700; src: url('../fonts/literata-v40-latin_latin-ext-700italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 800; src: url('../fonts/literata-v40-latin_latin-ext-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 800; src: url('../fonts/literata-v40-latin_latin-ext-800italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 900; src: url('../fonts/literata-v40-latin_latin-ext-900.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 900; src: url('../fonts/literata-v40-latin_latin-ext-900italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-100.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-100italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-200.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 200; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-200italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-300italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 500; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-500italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 600; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-600italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-700italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 800; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-800italic.woff2') format('woff2'); font-display: swap; }

/* SCROLLBARS */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 1px solid var(--scroll-border); border-radius: 3px; }
*::-webkit-scrollbar-corner { background: var(--scroll-border); }

/* BODY */
:target { scroll-margin-top: 45px; }
strong { font-weight: 700; }
em { font-style: italic; }
p:not(:last-of-type) { margin-bottom: 1em; }
.def { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; }
.def:hover { cursor: help; }
.js-off, .hidden { display: none; }
.center { text-align: center; }

/* BODY - Images & Videos */
img { max-width: 100%; height: auto; }
.img-lt { float: left; margin: 0.325rem 0; margin-right: 1rem!important; }
.img-rt { float: right; margin: 0.325rem 0; margin-left: 1rem!important; }
@media (max-width: 1600px) { .img-lt, .img-rt { max-width: 300px!important; } }
@media (max-width: 1200px) { .img-lt, .img-rt { max-width: 200px!important; } }
@media (max-width: 1024px) { .img-lt, .img-rt { max-width: 300px!important; } }
@media (max-width: 650px) { .img-lt, .img-rt { max-width: 200px!important; } }
@media (max-width: 500px) { .img-lt, .img-rt { float: none; display: block; max-width: 100%!important; margin-left: auto; margin-right: auto; } }
.vid { position: relative; padding-bottom: 56.25%; padding-top: 1.875rem; height: 0; overflow: hidden; }
.vid iframe, .vid object, .vid embed { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* BODY - Links */
a[href^="http://"]:not([href*="moxiemoshpit.me"])::after, a[href^="https://"]:not([href*="moxiemoshpit.me"])::after { content: "\e09f"; display: inline-block; font: var(--fa-font-sharp-solid); vertical-align: super; font-size: 0.4em; margin-left: 3px; }
a.ne[href^="http://"]:not([href*="moxiemoshpit.me"])::after, .ne a[href^="http://"]:not([href*="moxiemoshpit.me"])::after, a.ne[href^="https://"]:not([href*="moxiemoshpit.me"])::after, .ne a[href^="https://"]:not([href*="moxiemoshpit.me"])::after, a.ne[href^="//"]:not([href*="moxiemoshpit.me"])::after, .ne a[href^="//"]:not([href*="moxiemoshpit.me"])::after { display: none; }

/* BODY - Lists */
ul, ol { list-style-position: inside; margin: 0 0 1rem 0; padding: 0; }
ul li ul { margin-bottom: 0; }
ul ul, ol ol, ul ol, ol ul { margin-left: 1.5rem; }
ul:not(:last-of-type), ol:not(:last-of-type) { margin-bottom: 1rem; }
ul.cc, ol.cc { column-count: 2; }
ul.ccc, ol.ccc { column-count: 3; }
ol li::marker { font-weight: 700; }

/* BODY - Buttons */
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 1rem; }

/* BODY - Details */
details summary::marker, details summary::-webkit-details-marker { display: none!important; }
details > summary:hover { cursor: pointer; }

/* TOPBAR */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; background: rgba(var(--shared-bg), 1); border: none; border-bottom: 1px solid rgba(var(--shared-border), 1); font-size: 20px; height: 45px; padding: 1vh 2.5vw; position: fixed; left: 0; right: 0; top: 0; z-index: 9999; }
.topbar a { background: none; font-weight: 700; text-decoration: none; transition: all 0.3s linear; }
.topbar a:hover { text-decoration: none; transition: all 0.3s linear; }
.topbar .title h1 { background: var(--rainbow); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 20px; font-weight: 700; text-fill-color: transparent; -webkit-text-fill-color: transparent; text-transform: uppercase; }
.topbar details.dropdown, .topbar details.dropdown summary, .topbar details.dropdown::before, .topbar details.dropdown::after { all: unset; box-sizing: border-box; margin: 0; padding: 0; }
.topbar .dropdown { display: block; position: static; }
.topbar details.dropdown summary { color: rgba(var(--shared-text), 1); cursor: pointer; font-size: 16px; font-weight: 600; height: 45px; list-style: none;  transition: all 0.3s linear; }
.topbar details.dropdown summary::before, .topbar details.dropdown summary::after { display: none!important; line-height: 1; }
.topbar details.dropdown summary:hover { color: rgba(var(--shared-link), 1); }
.topbar details.dropdown summary i { font-size: 16px; }
.topbar details.dropdown[open]::details-content { border: none; margin: 0; padding: 0; }
.topbar .dropdown .menu { display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; font-size: 16px; line-height: 1!important; }
.topbar .dropdown .icon-close { display: none; }
.topbar .dropdown[open] .icon-open { display: none; }
.topbar .dropdown[open] .icon-close { display: inline-block; }
.topbar .dropdown .nav { background: rgba(var(--shared-bg), 1); border: 1px solid rgba(var(--shared-border), 1); display: block; min-width: fit-content; position: fixed; top: 44px; left: 2.5vw; z-index: 9999; }
.topbar .dropdown .nav ul { display: flex; flex-direction: column; gap: 3px; list-style: none; margin: 0; padding: 15px 0; }
.topbar .dropdown .nav li { padding: 3px 20px; text-align: left; white-space: nowrap; }
.topbar .dropdown .nav li:hover { background: rgba(var(--shared-card), 1); }
.topbar .dropdown .nav a { color: rgba(var(--shared-link), 1); display: block; flex: 1; font-size: 16px; font-style: normal; }
.topbar .dropdown .nav a:hover { color: rgba(var(--shared-text), 1); }
.topbar .section-dropdown .nav { left: auto; right: 2.5vw; }

/* RESPONSIVITY */
@media (max-width: 1000px) {
ul.cc, ol.cc { column-count: 1; }
ul.ccc, ol.ccc { column-count: 2; }
}
@media (max-width: 500px) {
ul.ccc, ol.ccc { column-count: 1; }
}
@media (max-width: 420px) { .topbar .title { display: none; }}