:root {
    --primary: #f59d3b !important;
    --primary-hover: #f59d3b !important;
    --h1-color: #f59d3b !important;
    --h2-color: #f59d3b !important;
    --h3-color: #f59d3b !important;
    --h4-color: #f59d3b !important;
    --h5-color: #f59d3b !important;
    --h6-color: #f59d3b !important;
    --font-family: 'Amatic SC', cursive, system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji" !important;
    --font-size:26px!important;
}

html {
    scroll-behavior: smooth
}

body>main {
    padding-top: calc(var(--block-spacing-vertical) + 3.5rem)
}

@media (min-width:992px) {
    body>main {
        --block-spacing-horizontal: calc(var(--spacing) * 1.75);
        grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
        display: grid;
        grid-template-columns: 200px auto
    }

    .centered {
        max-width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width:1200px) {
    body>main {
        --block-spacing-horizontal: calc(var(--spacing) * 2)
    }
}

body>main div[role=document],
body>main>aside {
    min-width: 0;
}

body>main>aside {
    padding-top: 165px;
}

div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: var(--icon-external);
    background-position: top center;
    background-size: .66rem auto;
    background-repeat: no-repeat;
    content: ""
}

svg {
    height: 1rem
}

main>aside nav {
    width: 100%;
}

@media (min-width:992px) {
    main>aside nav {
        position: fixed;
        width: 200px;
        max-height: calc(100vh - 5.5rem);
        overflow-x: hidden;
        overflow-y: auto
    }
}

main>aside nav a#toggle-docs-navigation {
    margin: 0;
    margin-bottom: var(--spacing);
    padding: 0;
    border-bottom: var(--border-width) solid var(--accordion-border-color)
}

main>aside nav a#toggle-docs-navigation svg {
    margin-right: calc(var(--spacing) * .5);
    vertical-align: -3px
}

@media (min-width:992px) {
    main>aside nav a#toggle-docs-navigation {
        display: none
    }
}

main>aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
    display: none
}

main>aside nav.closed-on-mobile details {
    display: none
}

@media (min-width:992px) {
    main>aside nav.closed-on-mobile details {
        display: block
    }

    main>aside nav.closed-on-mobile>a#toggle-docs-navigation {
        display: none
    }
}

main>aside nav.open a#toggle-docs-navigation svg.expand {
    display: none
}

main>aside li,
main>aside summary {
    padding-top: 0;
    padding-bottom: 0;
    /* font-size: 16px */
}

main>aside li a {
    padding: .375rem .5rem
}

main>aside li a svg {
    vertical-align: middle
}

main>aside a.secondary:focus {
    background-color: transparent;
    color: var(--primary-hover)
}

main>aside a.active,
main>aside a.active:hover {
    color: var(--primary)
}

main>aside details {
    border-bottom: none
}

main>aside details summary {

    text-transform: uppercase
}

main>aside details ul li {

    text-transform: uppercase;
    margin-left: 10px;
}

main>aside details summary::after {
    display: none
}

main>aside details[open]>summary {
    margin-bottom: calc(var(--spacing) * .75)
}

main>aside details[open]>summary:not(:focus) {
    color: var(--h1-color)
}

h1 {
    margin-top: -0.25em;
}

section>hgroup {
    margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}

a[role="button"] {
    margin-right: calc(var(--typography-spacing-vertical) / 4);
    margin-bottom: var(--typography-spacing-vertical);
}

[role="document"] section>h1,
[role="document"] section>h2,
[role="document"] section>h3 {
    line-height: 1;
}

article>footer.code {
    background: var(--article-code-background-color);
}

article pre,
article pre code {
    margin-bottom: 0;
    background: 0 0;
}

section>pre {
    margin: var(--block-spacing-vertical) 0;
    padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
    background: var(--article-code-background-color);
    box-shadow: var(--card-box-shadow);
}

body>nav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--nav-background-color);
    box-shadow: 0 1px 0 var(--nav-border-color);
}

body>nav.container-fluid {
    padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
}

body>nav a {
    border-radius: 0;
}

body>nav svg {
    vertical-align: text-bottom;
}

div[role=document] summary {
    font-weight: bold;
}

article>footer, article>header {
   padding-top: calc(var(--block-spacing-vertical) * .66);
   padding: calc(var(--block-spacing-vertical) * .25) var(--block-spacing-horizontal) !important;
   margin-bottom: calc(var(--block-spacing-vertical)* .66);
}

article>header {
    margin-bottom: calc(var(--block-spacing-vertical)* .66) !important;
}
article>header h2 {
    margin-bottom: 0;
}

footer>p {
    text-align: center;
}

footer>p>small {
    font-size: var(--font-size);
}