:root {
    /* Theme */
    --jex-common-primary: rgb(200 150 50);
    --jex-common-secondary: rgb(135 121 78);
    /* background */
    --jex-common-background-color: rgb(0 0 0);
    --jex-common-background-border-color: rgb(50 50 50);
    /* panel */
    --jex-panel-background-color: transparent;
    /* text */
    --jex-common-text-normal-known-color: rgb(160 160 160);
    --jex-common-text-normal-unknown-color: rgb(100 100 100);
    --jex-common-text-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* various */
    --jex-common-splitter: purple;
    --jex-common-divider: var(--jex-common-background-border-color);
    /* button */
    --jex-common-button-background-color: transparent;
    --jex-common-button-background-color-hover: rgb(50 50 50);
    --jex-common-button-background-color-active: rgb(80 80 80);
    --jex-common-button-background-color-selected: var(--jex-common-secondary);
    --jex-common-button-border-color: transparent;
    --jex-common-button-border-color-hover: rgb(50 50 50);
    /* for plugins markdown, csharpeditor...*/
    --jex-common-plugin-text-font-size: 1em;
}

:root {
    font-size: 1em;
    font-family: var(--jex-common-text-font-family);
    line-height: 24px;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--jex-common-text-font-family);
    background-color: var(--jex-common-background-color);
}

*:focus {
    outline: none;
}

::selection {
    color: black;
    background: var(--jex-common-primary);
}

h1, h2, h3, h4, h5, p, span, em, strong, small, hr, figcaption, li {
    color: var(--jex-common-text-normal-known-color);
}

.sep-h {
    position: relative;
    float: left;
    width: 100%;
    height: 1px;
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: rgb(50,50,50);
}

img + figcaption {
    margin-top: 0.5em;
}

footer {
    font-size: 0.8em;
}

hr {
    border-top: 1px solid var(--jex-common-divider);
    border-bottom: 0px solid var(--jex-common-divider);
    border-left: 0px solid var(--jex-common-divider);
    border-right: 0px solid var(--jex-common-divider);
}

/*-------*/
/* Links */
/*-------*/

/* unvisited link */
a:link {
    color: var(--jex-common-secondary);
}

/* visited link */
a:visited {
    color: var(--jex-common-secondary);
}

/* mouse over link */
a:hover {
    color: var(--jex-common-secondary);
}

/* selected link */
a:active {
    color: var(--jex-common-secondary);
}

/*-----------*/
/* Scrollbar */
/*-----------*/

/* width */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
scrollbar-track,
::-webkit-scrollbar-track {
    background: rgb(50 50 50);
}

/* Handle */
scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: rgb(100 100 100);
}

    /* Handle on hover */
    scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(150 150 150);
    }