/* Variables */
:root {
	color-scheme: light dark;
}
:root, .light-theme {
    --bg-color: #fbfbfe;
    --secondary-bg-color: #f4f4f8;
    --trans-secondary-bg-color: #f4f4f8cc;
    --grouped-bg-color: #f4f4f8;
    --grouped-secondary-bg-color: #fbfbfe;
    --heading-text-color: #141420;
    --text-color: #2f2f3a;
    --secondary-text-color: #7c7c8a;
    --inverted-text-color: #fbfbfe;
    --transparent-header-color: #f4f4f8;
    --chapter-nav-bg-color: #edf1ff88;
    --border-color: #b9bfd4;
    --accent-color: rgb(63, 132, 255);
    --control-color: #f3f3f7;
    --control-text-color: #000;
    --border-radius: 16px;
}
@media (prefers-color-scheme: dark) {
	:root {
	    --bg-color: #111217;
	    --secondary-bg-color: #1a1b1f;
        --trans-secondary-bg-color: #1a1b1faa;
        --grouped-bg-color: #111217;
    	--grouped-secondary-bg-color: #1a1b1f;
	    --heading-text-color: #f8f8ff;
	    --text-color: #d9dae5;
        --secondary-text-color: #8d8da0;
	    --inverted-text-color: #05060a;
	    --transparent-header-color: #1a1b1f;
        --chapter-nav-bg-color: #2a2a3488;
        --control-color: #ffffff1a;
        --control-text-color: #f8f8ff;
	    --border-color: #b3b8d0;
	}
}
:root[data-theme="dark"], .dark-theme {
    --bg-color: #111217;
    --secondary-bg-color: #1a1b1f;
    --trans-secondary-bg-color: #1a1b1faa;
    --grouped-bg-color: #111217;
	--grouped-secondary-bg-color: #1a1b1f;
    --heading-text-color: #f8f8ff;
    --text-color: #d9dae5;
    --secondary-text-color: #8d8da0;
    --inverted-text-color: #05060a;
    --transparent-header-color: #1a1b1f;
    --chapter-nav-bg-color: #2a2a3488;
    --control-color: #ffffff1a;
    --control-text-color: #f8f8ff;
    --border-color: #b3b8d0;
}

/* General */
* {
    max-width: 100%;
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
}
body section {
    background-color: var(--bg-color);
    width: 100%;
    padding: 32px 0;
}
body section.secondary-bg {
    background-color: var(--secondary-bg-color);
}
body section.grouped-secondary-bg {
    background-color: var(--grouped-secondary-bg-color);
}
body section section, body header nav, body footer section {
	width: 980px;
    background-color: initial;
    padding: 28px 12px;
	margin: auto;
    text-align: center;
}
@media (max-width: 490px) /* Compact Width */ {
    body * section {
        text-align: left;
    }
}

/* Header + Footer */
body header {
    position: fixed;
    z-index: 99;
    width: 100%;
    background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.3), rgba(255,255,255,0.0));
}
@media (prefers-color-scheme: dark) {
    body header {
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.3), rgba(0,0,0,0.0));
    }
}
body header nav {
    display: flex !important;
    justify-content: space-around;
    padding: 0 12px;
}
.header-space {
    height: 0;
    padding: 0;
    background-color: transparent;
}
@supports(padding: max(0px)) {
    body header nav, body section section {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}
nav a, footer section a {
    line-height: 36px;
    margin: 4px;
    white-space: nowrap;
}
nav a {
    color: var(--text-color);
}
nav a:hover {
    text-decoration: none;
    color: #b377e3;
}
footer {
    font-size: 0.8em;
}

/* General */
.banner {
    height: 540px;
    padding: 0;
    background-color: #80859c;
}
.button, img, figcaption, input, textarea {
    margin: 4px;
}
h1, h2, h3, h4, h5, h6, p {
    color: var(--heading-text-color);
    padding: 4px;
    margin: auto;
}
h1 {
    font-size: 2em;
    margin: 12px auto;
}
h2 {
    font-size: 1.66em;
    margin: 8px auto;
}
h3 {
    font-size: 1.33em;
    margin: 4px auto;
}
p {
    font-size: 1.2em;
    line-height: 1.45;
    color: var(--text-color);
}
p.secondary {
    color: var(--secondary-text-color);
    font-size: 1em;
    padding: 0 4px;
}
a, button, summary {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}
a:hover {
    text-decoration: underline;
}
a:hover, a:hover h1, a:hover h2, a:hover h3 {
    color: var(--accent-color);
}
a.selected {
    color: var(--text-color) !important;
}
button, .button {
    color: var(--accent-color);
    background-color: var(--control-color);
    font-size: 1em;
    line-height: 32px;
    padding: 0 12px;
    display: inline-block;
    border-radius: var(--border-radius);
    border: none;
}
.button:hover {
    text-decoration: none;
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
}
.button.disabled {
    color: #aaa;
    background-image: none;
    cursor: not-allowed;
}
figure {
    display: inline-table;
	margin: 0;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
}
input, textarea {
    font-size: 16px;
    padding: 8px;
    width: calc(100% - 8px);
    border-radius: 12px;
    background-color: var(--control-color);
    color: var(--control-text-color);
    border: none;
    outline: none;
    -webkit-appearance: none;
}
textarea {
    resize: none;
}
summary:focus {
    outline: none;
}
summary::-webkit-details-marker {
    display: none;
}
pre {
    background-color: var(--secondary-bg-color);
    padding: 2rem;
    overflow-x: scroll;
    margin: 16px 4px;
    text-align: left;
    border-radius: var(--border-radius);
}
code {
    font-family: "Melno";
    background-color: var(--secondary-bg-color);
    padding: 4px 8px;
    font-size: 1rem;
    border-radius: 4px;
}
pre code {
    background-color: initial;
    padding: initial;
    font-size: initial;
}
.flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.z-stack {
    display: inline-grid;
    align-items: center;
    justify-items: center;
}
.z-stack > * {
    grid-area: 1/1/1/1;
}
.invert-text {
    color: var(--inverted-text-color);
}

/* Page-Specific */
.tag {
    color: var(--secondary-text-color);
    font-size: 0.9em;
    padding-top: 8px;
}
.full {
    width: 100vw;
}
.links a {
    margin: 8px 16px;
    display: inline-block;
}
.links .badges a {
    margin: initial;
}
.chapter-container {
    padding: 0;
}
.chapter-nav {
    background-color: var(--chapter-nav-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.chapter-nav section {
    padding: 12px;
    white-space: nowrap;
    overflow: auto;
}
.chapter-nav section::-webkit-scrollbar {
    display: none;
}
.chapter-nav a {
    color: var(--text-color);
    text-decoration: none;
}
@media (prefers-color-scheme: dark) {
    .chapter-nav a {
        text-shadow: 0 0 32px #000a;
    }
}
.chapter-nav a:not(.disabled):hover {
    color: var(--accent-color);
    text-shadow: none;
}
.chapter-nav a.selected {
    color: #666 !important;
    text-shadow: initial;
}
@media (prefers-color-scheme: dark) {
    .chapter-nav a.selected {
        color: #aaa !important;
    }
}
.chapter-nav figure {
    width: 80px;
}
.chapter-nav img {
    image-rendering: initial;
    border-radius: 13px;
}
.chapter-nav figcaption {
    font-size: 12px;
    margin: 4px 0;
}
.chapter-nav figcaption span {
    display: block;
    color: #f46c0e;
    font-size: 10px;
}
form.contact-form {
    width: 512px;
    padding: 12px;
    margin: auto;
    border-radius: var(--border-radius);
    text-align: left;
}
.contact-form div.g-recaptcha {
    margin: 4px;
}
.message-bubble {
    display: inline-block;
    max-width: 85%;
    margin: auto;
    padding: 8px;
    text-align: right;
    background-color: var(--accent-color);
    color: var(--inverted-text-color);
    border: none;
    border-radius: 14px 14px 0 14px;
}