html {
    font-size: 18px;
    position: relative;
    min-height: 100%;
}

nav {
    padding-left: 20px;
    padding-right: 20px;
}

header {
    overflow: hidden;
}

svg.icon-theme-toggle {
    --theme-toggle-duration: .4s
}

svg.icon-theme-toggle :first-child path {
    transition-duration: calc(var(--theme-toggle-duration) * .6);
    transition-property: transform,d;
    transition-timing-function: cubic-bezier(0,0,.5,1)
}

svg.icon-theme-toggle g circle, svg.icon-theme-toggle g path {
    transform-origin: center;
}

svg.icon-theme-toggle.moon g circle {
    transform: scale(1.4);
    transition-delay: 0s
}

svg.icon-theme-toggle.moon g path {
    transform: scale(.75);
    transition-delay: 0s
}

nav.is-sticky-above-lg {
    position: sticky;
    float: left;
    overflow: auto;
}

aside {
    grid-area: menu;
    position: relative;
}

li.level1 {
    padding-left: 0px;
}

li.level2 {
    padding-left: 20px;
}

li.level3 {
    padding-left: 40px;
}

.doc {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

p {
    padding: 10px
}

/* Documentation layout */
.doc {
    display: grid;
    grid-template-columns: 260px 1fr; /* Sidebar and content */
    grid-column-gap: 0; /* No gap between columns */
    grid-row-gap: 0; /* No row gap */
}

/* Documentation content container with max width */
.doc .doc-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Responsive layout for documentation */
@media (max-width: 1024px) {
    /* Stack layout vertically on smaller screens */
    .doc {
        grid-template-columns: 1fr;
    }

    /* Hide sidebar navigation on small screens */
    .doc aside {
        display: none;
    }

    /* Allow full width content on small screens */
    .doc .doc-content {
        max-width: 100%;
    }
}

footer {
    padding-left: 20px; /* Add left padding to the footer */
}

.doc pre {
    background: var(--pico-code-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    white-space: pre-wrap;      
    word-break: break-word;      
    overflow-x: hidden;          
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.4;
}

.doc pre code {
    display: block;
    background: transparent;
    padding: 0;
    color: inherit;
}

:root {
    --color-kwrd: #0000ff;
    --color-str: #a31515;
    --color-comment: #008000;
    --color-num: #09885a;
    --color-op: #000000;
    --color-preproc: #cc6633;
    --color-type: #267f99;
    --color-func: #795e26;
    --color-htmlTag: #800000;
    --color-attr: #ff0000;

    /* XML */
    --color-xml-delim: #800000;
    --color-xml-name: #0000ff;
    --color-xml-attr: #a31515;
    --color-xml-attr-val: #09885a;
    --color-xml-attr-quote: #000000;
}

[data-theme="dark"] {
    --color-kwrd: #4ea3ff;
    --color-str: #ff6666;
    --color-comment: #6ccc6c;
    --color-num: #66ffcc;
    --color-op: #ffffff;
    --color-preproc: #ffb366;
    --color-type: #66ccff;
    --color-func: #ffaa66;
    --color-htmlTag: #ff9999;
    --color-attr: #ffcc66;

    --color-xml-delim: #ff9999;
    --color-xml-name: #4ea3ff;
    --color-xml-attr: #ffb366;
    --color-xml-attr-val: #66ffcc;
    --color-xml-attr-quote: #ffffff;
}

.keyword       { color: var(--color-kwrd) !important; }
.string        { color: var(--color-str) !important; }
.comment       { color: var(--color-comment) !important; }
.number        { color: var(--color-num) !important; }
.operator      { color: var(--color-op) !important; }
.preprocessor  { color: var(--color-preproc) !important; }
.type          { color: var(--color-type) !important; }
.function      { color: var(--color-func) !important; }
.html-tag      { color: var(--color-htmlTag) !important; }
.attribute     { color: var(--color-attr) !important; }

/* XML */
.xmlDelimiter       { color: var(--color-xml-delim) !important; }
.xmlName            { color: var(--color-xml-name) !important; }
.xmlAttribute       { color: var(--color-xml-attr) !important; }
.xmlAttributeValue  { color: var(--color-xml-attr-val) !important; }
.xmlAttributeQuotes { color: var(--color-xml-attr-quote) !important; }