:root
{
    --color-background: #0d1117;

    /* SURFACE */
    --color-surface: #161b22;
    --color-surface-elevated: #21262d;

    /* BORDER */
    --color-border: #30363d;
    --color-border-subtle: #21262d;

    /* TEXT */
    --color-text: #e6edf3;
    --color-text-secondary: #c9d1d9;
    --color-text-muted: #8b949e;
    --color-text-subtle: #484f58;

    --color-accent: #58a6ff;

    /* STYLESHEET */
    --color-css-syntax-selector: #d2a8ff;
    --color-css-syntax-property: #79c0ff;
    --color-css-syntax-string: #a5d6ff;
    --color-css-syntax-value: #8fbc8f;
    --color-css-syntax-keyword: #e3a857;
    --color-css-syntax-function: #f9f1a5;
}

*
{
    box-sizing: border-box;
}

html
{
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body
{
    margin: 0;

    /* svgready.com/patterns/ */
    background-color: var(--color-background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M2 4H6M4 2V6' stroke='%2330363d' stroke-width='2.5' stroke-linecap='round' opacity='0.025'/%3E%3C/svg%3E");
    background-size: 8px 8px;

    font-family: sans-serif;
    color: var(--color-text);
}

main
{
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 40px;
}

.separator
{
    width: 100%;
    height: 1px;

    margin: 16px 0;

    background: var(--color-border);
}

header
{
    position: sticky;
    top: 0;
    z-index: 100;
}

.file-header,
.file-footer
{
    display: flex;
    justify-content: space-between;
    font-family: monospace;

    font-size: 14px;
    letter-spacing: 0.06em;
    line-height:normal;

    color: var(--color-text-muted);
}

footer
{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 40px;

    font-family: monospace;
    font-size: 13px;
    letter-spacing: 0.04em;

    color: var(--color-text-subtle);
}