:root {
    --fg-color: #f8f8f8;
    --bg-color: #222224;
    --sb-fg-color: #383838;
    --sb-bg-color: #1f1f1f;
    --border-color: #181818;
    --note-color: #909090;
    --link-color: #8888f8;
    --select-color: #41464d;
    --kw-color: #81a2be;
    --lt-color: #cc6666;

    --max-width: 800px;
    --text-size: 17px;
    --code-size: 15px;
    --gap-big: 24px;
    --gap-sml:  8px;
}

body, h1, h2, p, a, pre, ul, li {
    margin: 0;
}

body {
    color: var(--fg-color);
    background-color: var(--bg-color);
    font-family: 'Segoe UI Regular', 'Open Sans Regular', sans-serif;
    font-size: var(--text-size);

    &::selection {
        background-color: var(--select-color);
    }
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-big);

    & .right {
        margin-left: auto;
    }
    & div.group {
        display: flex;
        flex-direction: column;
        gap: var(--gap-sml);
    }
}

code.hljs {
    max-width: var(--max-width);
    border: 1px solid var(--border-color);
    border-radius: 8px;

    font-family: Consolas, Monaco, monospace;
    font-size: var(--code-size);

    scrollbar-width: thin;
    scrollbar-color: var(--sb-fg-color) var(--sb-bg-color);

    &.no-title .hljs-title {
        color: inherit;
    }
}

.kw { color: var(--kw-color); }
.lt { color: var(--lt-color); }

h1#banner {
    text-align: center;
    margin-top: 40.4px;
}

a {
    color: var(--link-color);
    text-decoration: none;

    &:hover {
        text-decoration: 1px underline;
    }
}

a.button {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    width: fit-content;
    padding: 8px 15px;

    text-decoration: none;
    color: var(--fg-color);
    background-color: var(--sb-fg-color);
}

div.path {
    padding: 5px;

    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-fg-color) var(--sb-bg-color);

    font-size: 1.15em;
    font-weight: bold;

    & > span.delim {
        margin: 0 3px;
        font-weight: bolder;
    }
}

span.note {
    color: var(--note-color);
    font-size: var(--code-size);
}

table {
    border-collapse: collapse;

    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-fg-color) var(--sb-bg-color);

    & > caption {
        text-align: left;
        padding: 6px;
        padding-top: 0;
    }
}

td {
    padding: 6px 8px;
    border-top: 2px solid var(--border-color);

    tr:last-child > & {
        border-bottom: 2px solid var(--border-color);
    }
    &:first-child {
        width: 0%;
    }
}