@font-face {
    font-family: "Crimson Pro";
    font-style: normal;
    src: local("Crimson Pro"), url("/fonts/CrimsonPro-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Crimson Pro";
    font-style: italic;
    src:
        local("Crimson Pro"),
        url("/fonts/CrimsonPro-Italic-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Funnel Sans";
    src: local("Funnel Sans"), url("/fonts/FunnelSans-VariableFont_wght.ttf");
}

/*@font-face {
    font-family: "PT Sans Caption";
    font-weight: normal;
    src: local("PT Sans Caption"), url("/fonts/PTSansCaption-Regular.ttf");
}

@font-face {
    font-family: "PT Sans Caption";
    font-weight: bold;
    src: local("PT Sans Caption"), url("/fonts/PTSansCaption-Bold.ttf");
}*/

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

/*
Themes: low, middle, high, primary, secondary, text, inverted

- Obsidian apple
Night oklch(0.185 0.0038 345.67)
Raisin black oklch(0.2357 0.0064 0.63)
Gray oklch(0.5659 0.0121 112.56)
Apple green oklch(0.7165 0.1527 124.41)
Tea green oklch(0.9492 0.092 119.9)
Onyx oklch(0.1375 0.0052 128.18)
Platinum oklch(0.9545 0.0046 258.32)

- Chlorine
Onyx oklch(0.1713 0.0093 196.31)
Carbon black oklch(0.2353 0.0182 189.98)
Dark slate gray oklch(0.3458 0.039 190.4)
Emerald oklch(0.6691 0.2047 165.71)
Frozen water oklch(0.9397 0.0345 190.4)
Onyx oklch(0.1375 0.0052 128.18)
Platinum oklch(0.9545 0.0046 258.32)

- Hunter
Black oklch(0.0878 0.015 194.77)
Evergreen oklch(0.2429 0.0362 154.26)
Hunter green oklch(0.4763 0.0721 142.52)
Dusty olive oklch(0.5919 0.0628 126.53)
Intense cherry oklch(0.513 0.1714 17.9)
Onyx oklch(0.1375 0.0052 128.18)
Powder pedal oklch(0.9542 0.0288 60.77)

- Plum sun
Black oklch(0.1015 0.0087 309.09)
Lighter black oklch(0.1377 0.0154 314.95)
Coffee bean oklch(0.1643 0.0299 314.99)
Amethyst oklch(0.2173 0.1162 299.77)
Amber glow oklch(0.7805 0.1724 67.07)
Onyx oklch(0.1375 0.0052 128.18)
Powder pedal oklch(0.9542 0.0288 60.77)

-- Deprecated

- Excavator
Coffee bean oklch(0.1835 0.0135 18.46)
Shadow grey oklch(0.2908 0.0205 273.1)
Golden bronze oklch(0.686 0.137 88.25)
Bright amber oklch(0.8594 0.1754 88.93)
Graphite oklch(0.2809 0 0)
Cotton rose oklch(0.8428 0.0577 18.36)

- Spring
Beige oklch(0.9192 0.0292 124.02)
Olivine oklch(0.7453 0.0976 140.28)
Reseda green oklch(0.5312 0.0619 138.63)
Dark green oklch(0.3123 0.0409 153.17)
Blush oklch(0.6647 0.1307 12.18)
Eerie black oklch(0.2401 0.007 153.17)

*/

.obsidian-apple-theme {
    --low: oklch(0.185 0.0038 345.67);
    --middle: oklch(0.2357 0.0064 0.63);
    --high: oklch(0.5659 0.0121 112.56);
    --primary: oklch(0.7165 0.1527 124.41);
    --secondary: oklch(0.9492 0.092 119.9);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9545 0.0046 258.32);
}

.chlorine-theme {
    --low: oklch(0.1713 0.0093 196.31);
    --middle: oklch(0.2353 0.0182 189.98);
    --high: oklch(0.3458 0.039 190.4);
    --primary: oklch(0.6691 0.2047 165.71);
    --secondary: oklch(0.9397 0.0345 190.4);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9545 0.0046 258.32);
}

.cool-slate-theme {
    --low: oklch(0.1361 0.0157 87.25);
    --middle: oklch(0.2633 0.0228 84.33);
    --high: oklch(0.3945 0.0036 84.57);
    --primary: oklch(0.2448 0.0096 66.22);
    --secondary: oklch(0.4891 0.0193 91.7);
    --text: oklch(0.9545 0.0046 258.32);
    --inverted: oklch(0.9542 0.0288 60.77);
}

.crab-tree-theme {
    --low: oklch(0.1869 0.0105 303.54);
    --middle: oklch(0.2676 0.0093 294.94);
    --high: oklch(0.3819 0.0085 295.17);
    --primary: oklch(0.915 0.0068 295.44);
    --secondary: oklch(0.5299 0.0172 294.15);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9545 0.0046 258.32);
}

.hunter-theme {
    --low: oklch(0.1278 0.015 194.77);
    --middle: oklch(0.2429 0.0362 154.26);
    --high: oklch(0.4763 0.0721 142.52);
    --primary: oklch(0.5919 0.0628 126.53);
    --secondary: oklch(0.513 0.1714 17.9);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9542 0.0288 60.77);
}

.langford-theme {
    --low: oklch(0.2251 0.0166 31.37);
    --middle: oklch(0.2778 0.0286 59.39);
    --high: oklch(0.3525 0.0457 9.14);
    --primary: oklch(0.6943 0.0366 82.54);
    --secondary: oklch(0.4671 0.0499 84.76);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9542 0.0288 60.77);
}

.plum-sun-theme {
    --low: oklch(0.1015 0.0087 309.09);
    --middle: oklch(0.1377 0.0154 314.95);
    --high: oklch(0.1643 0.0299 314.99);
    --primary: oklch(0.2173 0.1162 299.77);
    --secondary: oklch(0.7805 0.1724 67.07);
    --text: oklch(0.9545 0.0046 258.32);
    --inverted: oklch(0.9542 0.0288 60.77);
}

.still-theme {
    --low: oklch(0.1867 0.0061 91.66);
    --middle: oklch(0.2434 0.0115 122.26);
    --high: oklch(0.2846 0.0183 59.83);
    --primary: oklch(0.4611 0.0355 251.6);
    --secondary: oklch(0.3478 0.0808 29.32);
    --text: oklch(0.9545 0.0046 258.32);
    --inverted: oklch(0.9542 0.0288 60.77);
}

:root {
    --low: oklch(0.185 0.0038 345.67);
    --middle: oklch(0.2357 0.0064 0.63);
    --high: oklch(0.5659 0.0121 112.56);
    --primary: oklch(0.7165 0.1527 124.41);
    --secondary: oklch(0.9492 0.092 119.9);
    --text: oklch(0.1375 0.0052 128.18);
    --inverted: oklch(0.9545 0.0046 258.32);

    --danger: oklch(0.4956 0.1976 29.81);
    --info: oklch(0.537 0.1382 272.7);
    --light: oklch(0.9687 0.0066 123.46);
    --success: oklch(0.7165 0.1527 132.41);
    --warn: oklch(0.615 0.1473 71.64);

    --heading: "Funnel Sans";

    font-family: var(--heading), system-ui, serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: dark light;
    color: var(--text);
    background-color: var(--low);
    scroll-behavior: smooth;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

blockquote,
ol,
p,
ul {
    font-family: "Crimson Pro", system-ui, serif;
    font-size: 1.13rem;
    line-height: 1.4em;
}

p a {
    text-decoration: underline;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

.hide-scroll {
    overflow: hidden;
}

.space-bottom {
    margin-bottom: 183px;
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.page-body {
    color: var(--text);
    padding: 55px 13px;
    overflow-x: inherit;
}

.heading {
    font-family: var(--heading), sans-serif;
    font-size: 2.3em;
    letter-spacing: 0.3ch;
    padding: 7px 0px;
}

.subheading {
    font-family: var(--heading), sans-serif;
    font-size: 2.1em;
    letter-spacing: 0.3ch;
    padding: 13px;
}

.subheading > div {
    position: absolute;
    width: 69px;
    height: 69px;
    background-color: var(--secondary);
    border-radius: 80% 12px / 16px 69%;
    filter: blur(8px);
    opacity: 0.3;
    transform: rotate(40deg) translate(24px, -44px);
    z-index: 0;
}

.subheading > span {
    position: relative;
    z-index: 1;
}

.page-heading {
    color: var(--text);
    margin-top: 77px;
}

.alert {
    display: flex;
    align-items: baseline;
    flex-direction: column;
    justify-content: left;
    gap: 13px;
    background-color: var(--low);
    border-left: 7px solid var(--info);
    border-radius: 3px;
    color: var(--inverted);
    font-size: 1.25em;
    hyphens: auto;
    line-height: 1.25em;
    margin: 13px 0px;
    padding: 13px 17px;
    width: fit-content;
}

.alert a {
    color: var(--inverted);
    text-decoration: underline;
}

.alert > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.alert > section {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
}

.alert-success {
    border-left: 7px solid var(--success);
}

.alert-info {
    border-left: 7px solid var(--info);
}

.alert-warn {
    border-left: 7px solid var(--warn);
}

.badge {
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    border-radius: 11px;
    font-family: var(--heading), sans-serif;
    font-size: 0.88em;
    padding: 3px 7px;
    text-align: center;
}

.md-icon {
    block-size: 33px;
    inline-size: 33px;
}

.low {
    background-image: var(--low);
}

.low-high {
    background-image: linear-gradient(69deg, var(--low), var(--high));
}

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

.danger {
    background-color: var(--danger);
    color: var(--text);
}

.info {
    background-color: var(--info);
    color: var(--text);
}

.warn {
    background-color: var(--warn);
    color: var(--text);
}

.light-text {
    color: var(--light);
}

html,
body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.skewed-view {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    width: 100%;
    height: 100vh;
    font-family: "Crimson Pro", serif;
    margin: auto;
    overflow: hidden;
}

.skewed-view > section {
    transition: background-color 0.37s;
}

.home-bg {
    background-position: -20px 20%;
    background-repeat: no-repeat;
    background-size: 110%, cover;
}

.home-bg-standard {
    background-image: url("/snakes.webp"), url("/noise.svg");
}

.home-bg-inverted {
    background-image: url("/snakes_inverted.webp"), url("/noise.svg");
}

.right-triangle {
    height: 100%;
    background-color: var(--primary);
    transition: background-color 0.37s;
}

.triangle-bl {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.triangle-br {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.triangle-tl {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.triangle-tr {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#home-heading {
    position: relative;
    top: 32%;
    height: 3em;
    color: var(--text);
    font-size: 1.5rem;
}

#home-heading > span:nth-child(1) {
    position: absolute;
    top: 69%;
    left: 34%;
}

#home-heading > span:nth-child(2) {
    position: absolute;
    top: 116%;
    left: 59%;
}

#top-banner {
    position: absolute;
    left: 11px;
    top: 0px;
}

#top-banner > div {
    display: grid;
    position: relative;
    block-size: 13px;
    inline-size: 139px;
    z-index: 1;
}

#c0 {
    grid-template-columns: repeat(5, 1fr);
}

#c0 > div:nth-of-type(1) {
    background-color: #09f911;
}

#c0 > div:nth-of-type(2) {
    background-color: #029d74;
}

#c0 > div:nth-of-type(3) {
    background-color: #e35bd8;
}

#c0 > div:nth-of-type(4) {
    background-color: #4156c5;
}

#c0 > div:nth-of-type(5) {
    background-color: #635688;
}

#progress {
    grid-template-columns: repeat(11, 1fr);
}

#progress > div:nth-of-type(1) {
    background-color: #fbf8f5;
}

#progress > div:nth-of-type(2) {
    background-color: #feafc7;
}

#progress > div:nth-of-type(3) {
    background-color: #74d7ec;
}

#progress > div:nth-of-type(4) {
    background-color: #603814;
}

#progress > div:nth-of-type(5) {
    background-color: #000;
}

#progress > div:nth-of-type(6) {
    background-color: #d30705;
}

#progress > div:nth-of-type(7) {
    background-color: #ee9d00;
}

#progress > div:nth-of-type(8) {
    background-color: #e5fe00;
}

#progress > div:nth-of-type(9) {
    background-color: #05c102;
}

#progress > div:nth-of-type(10) {
    background-color: #02199a;
}

#progress > div:nth-of-type(11) {
    background-color: #76008a;
}

#jd-colors {
    grid-template-columns: repeat(3, 1fr);
}

#jd-colors > div:nth-of-type(1) {
    background-color: #4d4f4c;
}

#jd-colors > div:nth-of-type(2) {
    background-color: #680009;
}

#jd-colors > div:nth-of-type(3) {
    align-items: center;
    border-bottom: 1px solid #222222;
    border-right: 1px solid #222222;
    color: var(--text);
    display: flex;
    font-family: var(--heading), sans-serif;
    font-size: 12px;
    justify-content: right;
    padding-right: 3px;
}

.back-btn {
    color: var(--text);
    position: absolute;
    left: 11px;
    padding: 3px 5px;
    background-color: var(--primary);
    border: 1px solid var(--secondary);
    border-radius: 3px;
    box-shadow: -4px -4px rgba(0, 0, 0, 0.5);
    font-family: var(--heading), sans-serif;
    font-size: 1.1em;
    transition: background-color 0.37s;
    z-index: 1;
}

#back-feed {
    top: 81px;
}

#back-home {
    text-decoration: inherit;
    top: 47px;
}

#theme-selector {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 11px;
    right: 22px;
    z-index: 1;
}

#theme-selector > div {
    background-color: var(--middle);
    border-radius: 3px;
    overflow: hidden;
    transform: skewX(2.5deg);
}

#theme-selector > label {
    padding-left: 16px;
    background-color: var(--primary);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: var(--secondary);
    font-size: 1.1rem;
    letter-spacing: 16px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.985);
    transition: background-color 0.37s;
}

select {
    padding: 7px 13px;
    appearance: base-select;
    background-color: var(--middle);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--heading), sans-serif;
    font-size: 0.95rem;
    transform: skewX(-2.5deg);
}

::picker(select) {
    appearance: base-select;
}

#splash-logo {
    position: absolute;
    bottom: 10px;
    left: 51px;
}

#splash-logo > svg {
    height: 80px;
    width: 80px;
    z-index: 2;
}

/* Nav */
#nav-container {
    position: absolute;
    bottom: 77px;
    right: 16px;
    padding-left: 25%;
    z-index: 1;
}

nav {
    border-radius: 3px;
    overflow: hidden;
}

nav a,
nav a:visited {
    color: inherit;
}

nav .btn {
    width: inherit;
}

nav > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: right;
    letter-spacing: 0.05ch;
    padding: 13px;
}

.btn {
    background-color: var(--middle);
    background-image: radial-gradient(
        circle 200px at 90% 460%,
        var(--high),
        var(--middle)
    );
    border: 3px solid var(--middle);
    border-radius: 3px;
    box-shadow: -4px -4px rgba(0, 0, 0, 0.5);
    color: var(--inverted);
    display: flex;
    font-family: var(--heading), sans-serif;
    justify-content: center;
    padding: 13px 33px;
    text-shadow: -1px 1px rgba(0, 0, 0, 0.8);
    transition: all 0.13s;
    width: fit-content;
}

.end-btn {
    margin-top: 55px;
}

.btn:focus,
.btn:hover {
    border: 3px solid var(--secondary);
}

.btn-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
    justify-content: center;
    padding-top: 47px;
}

.btn-column a {
    width: fit-content;
}

#feed-btn > div {
    background-color: darkorange;
}

#contact-btn > div {
    background-color: oklch(0.4998 0.1002 168.84);
}

#software-btn > div {
    background-color: oklch(0.8769 0.179577 93.1299);
}

#media-btn > div {
    background-color: oklch(0.4134 0.1567 259.09);
}

.preview-splash {
    display: flex;
    justify-content: center;
    margin: 47px auto 13px;
}

.preview-splash > img {
    position: relative;
    max-width: 100%;
    max-height: 253px;
    border-radius: 3px;
    box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.splash-description {
    background-color: var(--low);
    border-radius: 3px;
    padding: 3px 17px;
}

/* TOC list */
.toc-container {
    width: min(calc(100% - 1px), 420px);
    height: fit-content;
}

.toc-list {
    border-top: 1px solid var(--low);
    border-right: 1px solid var(--low);
    color: var(--text);
    font-family: var(--heading), sans-serif;
    margin-top: 33px;
}

.toc-list a {
    color: inherit;
    text-decoration: none;
}

.toc-list a:visited {
    color: inherit;
}

.toc-list li {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 7px;
}

.toc-list li:hover {
    background-color: var(--low);
    color: var(--inverted);
}

.toc-list a:not(:last-of-type) li {
    border-bottom: 1px solid var(--middle);
}

.toc-list h3 {
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 1 / end;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: right;
}

.toc-list span:first-of-type {
    margin-top: auto;
    margin-right: 11px;
}

.toc-list span:last-of-type {
    display: flex;
    justify-content: right;
    text-align: right;
}

footer {
    width: 100%;
    padding: 17px 33px;
    background-image: linear-gradient(var(--low), var(--middle) 200%);
    color: var(--inverted);
    font-family: var(--heading), sans-serif;
}

footer a {
    text-decoration: underline;
}

footer > div {
    border-left: 1px solid var(--inverted);
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-left: 33px;
}

/* Feed posts */
#post-previews-heading {
    letter-spacing: 2px;
    padding-top: 44px;
}

#post-previews li {
    background-color: var(--low);
    border-left: 7px solid var(--secondary);
    border-radius: 3px;
    color: var(--inverted);
    margin: 13px 0px;
    padding: 13px 19px;
}

#post-previews li h3 {
    font-family: var(--heading), sans-serif;
    font-size: 1.15em;
}

.post-content {
    color: var(--text);
    padding: 133px 11px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.post-content a {
    text-decoration: underline;
    word-break: break-word;
}

.post-content blockquote {
    border: 1px solid var(--low);
    border-radius: 3px;
    margin-bottom: 11px;
    padding: 7px 11px;
}

.post-content code {
    background-color: var(--middle);
    border: 1px solid var(--low);
    border-radius: 4px;
    color: var(--inverted);
    font-family: "Funnel Sans";
    padding: 0 4px;
}

.post-content pre {
    border: 1px solid var(--low);
    border-radius: 4px;
    font-family: "Funnel Sans";
    font-size: 1.25rem;
    margin-bottom: 11px;
    padding: 7px 11px;
}

.post-content pre code {
    background-color: inherit;
    border: none;
    color: inherit;
}

.post-content h1 {
    font-size: 2.3em;
    padding-top: 33px;
}

.post-content h2 {
    font-size: 2.1em;
    padding: 44px 0px 11px;
}

.post-content ol,
ul,
p {
    font-size: 1.29rem;
}

.post-content ol {
    list-style: decimal;
    padding: 11px 0px 22px 22px;
}

.post-content ul {
    list-style: square;
    padding: 11px 0px 22px 22px;
}

.post-content ol li,
.post-content ul li {
    font-weight: bold;
}

.post-content p:not(:first-of-type) {
    line-height: 1.6em;
    padding-bottom: 11px;
}

.post-content > p:first-of-type {
    padding-bottom: 33px;
}

/* Gallery */
#gallery-container {
    padding: 13px 13px 33px;
}

#gallery-container h1 {
    padding: 77px 7px 33px;
    background-color: var(--primary);
    color: var(--text);
    font-size: 3em;
}

.gallery-image {
    display: flex;
    align-items: center;
    margin: 13px 0px;
}

.gallery-image:nth-child(odd) {
    justify-content: right;
}

.gallery-image > a > img {
    max-width: 100%;
    max-height: 699px;
}

@media (min-width: 552px) {
    #home-heading > span:nth-child(1) {
        top: 169%;
        left: 41%;
    }

    #home-heading > span:nth-child(2) {
        top: 220%;
        left: 61%;
    }
}

@media (min-width: 884px) {
    .alert {
        align-items: center;
        flex-direction: row;
    }

    .page-body {
        padding: 77px 20%;
    }

    .lg-splash-left {
        display: flex;
        flex-direction: column;
        gap: 10%;
        padding-top: 10%;
        padding-bottom: 30%;
    }

    .lg-splash-left > div:nth-of-type(1) {
        padding-left: 20%;
    }

    .lg-splash-right {
        display: flex;
        flex-direction: column;
        gap: 10%;
        padding-top: 30%;
        padding-bottom: 10%;
    }

    .lg-splash-right > a {
        padding-right: 20%;
    }

    .home-bg {
        background-position: center 15%;
        background-repeat: no-repeat;
        background-size: 50%, cover;
    }

    #top-banner > div {
        inline-size: 213px;
    }

    .right-triangle {
        background-image: none;
    }

    .skewed-view {
        grid-template-columns: 44px 1fr 44px;
    }

    #home-heading > span:nth-child(1) {
        top: 233%;
        left: 44%;
    }

    #home-heading > span:nth-child(2) {
        top: 280%;
        left: 57%;
    }

    #nav-container {
        right: 39px;
    }

    nav > ul {
        font-size: 1.1em;
        letter-spacing: 0.11ch;
    }

    .nav-item {
        grid-template-rows: 1fr 2px 1fr;
    }

    .page-heading {
        margin-top: 177px;
    }

    .btn-row {
        justify-content: right;
        padding: 47px 29px 0px;
    }

    .preview-splash > img {
        max-height: 500px;
    }

    .splash-description {
        padding: 40px 17px;
    }

    .splash-view {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 33px;
    }

    .gallery-image {
        margin: 13px 15%;
    }

    .post-content {
        padding: 133px 15%;
    }

    .toc-list h3 {
        font-size: 1.5em;
    }
}