:root{
    --nav-width: 24em;
    --nav-margin-l: 1em;
}
body{
    font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
    margin: 0;
    line-height: 1.5;
}
header {
    margin-top: 1em;
    padding: 0 1em;
}
#contents {
    max-width: 60em;
    margin: auto;
    padding: 0 1em;
}
#navigation {
    padding: 0 1em;
}

@media screen and (min-width: 1025px) {
    header {
        margin-left: calc(var(--nav-width) + var(--nav-margin-l));
    }
    header h1 {
        margin: auto;
        max-width: 30em;
    }
    #navigation {
        overflow: auto;
        width: var(--nav-width);
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        bottom:0;
        padding: unset;
        margin-left: var(--nav-margin-l);
    }
    #navigation nav ul {
        padding-left: 1em;
    }
    #contents-wrapper {
        margin-left: calc(var(--nav-width) + var(--nav-margin-l));
    }
}

a:hover,a:focus {
    background: #a8b9cc;
}
dt {
    font-weight: bold;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid grey;
}
th, td {
    padding: 0.1em;
}
th[scope=row] {
    text-align: left;
    font-weight: normal;
}
.sgr-1m {
    font-weight: bold;
}
.sgr-2m {
    color: #575757;
}
.sgr-31_1m {
    color: #b40000;
}
.sgr-32_1m {
    color: green;
}
.sgr-36_1m {
    color: #005C7A;
}
.file {
    font-weight: bold;
    border: unset;
}
code {
    background: #f8f8f8;
    border: 1px dotted silver;
    padding-left: 0.3em;
    padding-right: 0.3em;
}
pre > code {
    display: block;
    overflow: auto;
    padding: 0.5em;
    border: 1px solid #eee;
    line-height: normal;
}
samp {
    background: #fafafa;
}
pre > samp {
    display: block;
    overflow: auto;
    padding: 0.5em;
    border: 1px solid #eee;
    line-height: normal;
}
kbd {
    font-weight: normal;
}
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.tok-kw {
    color: #333;
    font-weight: bold;
}
.tok-str {
    color: #d14;
}
.tok-builtin {
    color: #005C7A;
}
.tok-comment {
    color: #545454;
    font-style: italic;
}
.tok-fn {
    color: #900;
    font-weight: bold;
}
.tok-null {
    color: #005C5C;
}
.tok-number {
    color: #005C5C;
}
.tok-type {
    color: #458;
    font-weight: bold;
}

figure {
    margin: auto 0;
}
figure pre {
    margin-top: 0;
}

figcaption {
    padding-left: 0.5em;
    font-size: small;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
figcaption.zig-cap {
    background: #fcdba5;
}
figcaption.c-cap {
    background: #a8b9cc;
    color: #000;
}
figcaption.peg-cap {
    background: #fcdba5;
}
figcaption.javascript-cap {
    background: #365d95;
    color: #fff;
}
figcaption.shell-cap {
    background: #ccc;
    color: #000;
}

aside {
    border-left: 0.25em solid #f7a41d;
    padding: 0 1em 0 1em;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
    text-decoration: none;
    color: #333;
}

a.hdr {
    visibility: hidden;
}
h1:hover > a.hdr, h2:hover > a.hdr, h3:hover > a.hdr, h4:hover > a.hdr, h5:hover > a.hdr {
    visibility: visible;
}

pre {
    counter-reset: line;
}
pre .line:before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    padding-right: 1em;
    width: 2em;
    text-align: right;
    color: #999;
}
th pre code {
    background: none;
}
th .line:before {
    display: none;
}

@media (prefers-color-scheme: dark) {
    body{
        background:#121212;
        color: #ccc;
    }
    a {
        color: #88f;
    }
    a:hover,a:focus {
        color: #000;
    }
    table, th, td {
        border-color: grey;
    }
    .sgr-2m {
        color: grey;
    }
    .sgr-31_1m {
        color: red;
    }
    .sgr-32_1m {
        color: #00B800;
    }
    .sgr-36_1m {
        color: #0086b3;
    }
    code {
        background: #222;
        border-color: #444;
    }
    pre > code {
        color: #ccc;
        background: #222;
        border: unset;
    }
    samp {
        background: #000;
        color: #ccc;
    }
    pre > samp {
        border: unset;
    }
    .tok-kw {
        color: #eee;
    }
    .tok-str {
        color: #2e5;
    }
    .tok-builtin {
        color: #ff894c;
    }
    .tok-comment {
        color: #aa7;
    }
    .tok-fn {
        color: #B1A0F8;
    }
    .tok-null {
        color: #ff8080;
    }
    .tok-number {
        color: #ff8080;
    }
    .tok-type {
        color: #68f;
    }
    h1 a, h2 a, h3 a, h4 a, h5 a {
        color: #eec2c2;
    }
    figcaption.zig-cap {
        background-color: #b27306;
        color: #000;
    }
    figcaption.peg-cap {
        background-color: #b27306;
        color: #000;
    }
    figcaption.shell-cap {
        background: #2a2a2a;
        color: #fff;
    }
}

@media all {
    main {
        counter-reset: section-2;
    }
    h2 {
        counter-reset: section-3;
    }
    h2::before {
        counter-increment: section-2;
        content: counter(section-2) ". ";
        font-weight: normal;
    }
    h3 {
        counter-reset: section-4;
    }
    h3::before {
        counter-increment: section-3;
        content: counter(section-2) "." counter(section-3) ". ";
        font-weight: normal;
    }
    h4::before {
        counter-increment: section-4;
        content: counter(section-2) "." counter(section-3) "." counter(section-4) ". ";
        font-weight: normal;
    }
    #zig-version::before {
        content: "";
    }
    #table-of-contents::before {
        content: "";
    }
}

.highlight {
    position: relative;
}

.highlight::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.3;
    border-radius: 5px;
    background: #a8b9cc;
}

img{
    transition: transform 0.25s ease;
}


img:hover {
    -webkit-transform:scale(2);
    transform:scale(2);
}