/* ----------------------------------------     General    ------------------------------------------------- */
* {
    text-rendering: optimizeLegibility;

    --accent-color: __accent_color__;
    --loading-bg-color: __loading_bg_color__;

    --normal-text-color: 51, 51, 51;

    --bg-color: #f2f3f5a6;
    --bg-note: #ffffff;

    --bg-accent: #e3e5e8;
    --color-accent: #373c42;

    --bg-accent2: #626262;
    --color-accent2: #e6e6e6;

    /*--bg-accent3: #33383d;*/
    --bg-accent3: #d5d5d5;
    --color-accent3: #626262;

    --divider-color:  #b9b9b9;
    
    --callout-bg: rgb(242, 243, 245);
    --callout-color: rgb(46, 51, 56);
    --callout-alpha: 0.1;

    --header-bg: #f6f7f8;
    --code-hightlight-color: #9c27ec;
    --homelink-color: #2d68b1;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: rgb(var(--normal-text-color));
    margin: 0rem;
    background-color: rgb(var(--loading-bg-color));
} 
.header {padding-bottom: 1rem;}

@font-face {
    font-family: 'SourceCodePro-Regular';
    src: url('{html_url_prefix}/obs.html/static/SourceCodePro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: monospace;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('{html_url_prefix}/obs.html/static/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* ----------------------------------------      Core      ---------------------------------------- */
blockquote {
    padding: 0rem 0rem 0rem 0.5rem;
    margin: 0rem;
    margin-bottom: 0.5rem;

    background-color: var(--bg-accent);
    border: 1px dashed var(--bg-accent3);
    color: var(--color-accent3);
}

blockquote p {
    margin: 0.4rem;
}

/* Containers */
.container {
    background-color: var(--bg-note);
    padding: 2rem;
    scrollbar-color: var(--code-hightlight-color) var(--bg-note);
    scroll-margin-top: 2rem;
    max-width: __max_note_width__;
    flex: 10;
}

.container:after {
    content: "\a\a\a\a\a\a\a\a\a";
    white-space: pre;
}
.container img {
    max-width: 100%;
    padding: 0.2rem;
}
.container video {
    margin: auto;  
    max-width: 100%;
}
.container audio {
    margin: auto;  
    border-radius: 1.5rem;
    background-color: black;
}


::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.4rem;
    background-color: var(--bg-note);
  }
::-webkit-scrollbar-thumb{
    background-color: var(--code-hightlight-color);
    border: 0px;
    border-radius: 10px;
}
#right_pane,
#left_pane{
    scrollbar-color: var(--code-hightlight-color) var(--bg-note);
    padding: 1.7rem;
    padding-top: 0.9rem;
    overflow-y: scroll;
    height: calc(90vh - 4rem);
    font-family: 'Roboto-Regular';
    max-width: max-content;
}
#left_pane{
    padding-left: 1.7rem;
    min-width: 15rem;
    width: 15rem;
}
#right_pane{
    padding-right: 3rem;
    padding-left:0rem;
    min-width: max-content;
}

#left_pane ul,
#right_pane ul {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 0.3rem;
    
    font-size: 11pt;    
}
#left_pane li,
#right_pane li {
    padding-top: 0.3rem;
}
.toc {
    display: none;
    
    background-color: rgb(var(--accent-color), 0.03);
    padding: 1rem;
    padding-top: 0.2rem;
    border-radius: 0.6rem;
    margin-bottom: 1rem;
    padding-right: 2rem;    
}

.flex_col {
    display: flex;
    flex-direction:column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    scroll-margin-top: 20rem;
}
.flex_row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100vw;
}

.current_page_link a:hover,
.current_page_link a:link,
.current_page_link a:visited
{
    color: rgb(43, 43, 43);
}

.navbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100vw - 21rem);
    margin-bottom: -0.5rem;
}
.navbar-button {
    display: none;
    width: calc(100vw - 4rem);
    text-align: center;
    background-color: rgb(var(--accent-color), 0.17);
    color: rgb(var(--accent-color));
    padding: 0.7rem;
    border-radius: 0.4rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    cursor: pointer;
    width: calc(100vw - 4rem);
    margin-bottom: 0.7rem; 
    margin-left: -0.7rem;
    margin-top: 1rem;
}


/* ---------------------------------------- Table troubles ---------------------------------------- */
table {
    margin: 1.5rem;
    margin-left: 0rem;
    text-align: left;
    border-collapse: collapse;
}
td {
    border-bottom: 1px solid rgb(var(--table-border-color-rgb), 0.3);
    padding: 0.3rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
td:nth-child(2n) {
    border-left: 1px dotted rgb(var(--table-border-color-rgb), 0.3);
}
td:first-child {
    min-width: max-content;
}
th:first-child, td:first-child{
    padding-left: 0rem;
}
tr:last-child td {
    border-bottom: 0px;
}
th {
    text-transform: capitalize;
    border: 0px;
    padding: 0.3rem;
    padding-left: 1rem;
    font-weight: normal;
    font-style: italic;
    color: var(--table-header-color);
}
h1 + table {
    margin-top:0rem;
}
h2 + table {
    margin-top:0rem;
}
h3 + table {
    margin-top:0rem;
}
h4 + table {
    margin-top:0rem;
}

/* ---------------------------------------   Link colors / decoration  ---------------------------------------------*/
/* unvisited link */
a:link {
    color: rgb(10, 132, 255);
    text-decoration: none;
}

/* visited link */
a:visited {
    color: rgb(60, 158, 255);
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: rgb(10, 132, 255);
    text-decoration: underline;
}

/* selected link */
a:active {
    color: rgb(10, 132, 255);
    text-decoration: none;
} 

a.nonexistent-link:link  ,
a.nonexistent-link:hover,
a.nonexistent-link:active,
a.nonexistent-link:visited {
    color:rgb(156, 156, 156);
}

a.navbar-link:visited,
a.navbar-link:hover,
a.navbar-link:link
{
    color: rgb(var(--normal-text-color));
    text-decoration: none;
}
a.navbar-link:hover
{
    background-color: rgb(var(--accent-color), 0.56);
}

#homelink:visited {
    color: rgb(var(--accent-color));
}
#homelink:link {
    color: rgb(var(--accent-color));
}

/* ----------------------------------------    One-offs   ---------------------------------------- */

.icon-tray {
    width:12rem; 
    height:1.6rem; 
    margin-top: -0.1rem;
}

/* Theme selector */
.theme-button {
    width: calc(1.6rem - 6px);
    height: calc(1.6rem - 6px);
    border: 3px solid #f0f0f0;
    margin-right: 0.2rem;
    float: right;

    cursor: pointer;
    font-family: serif;
    text-align: center;
    line-height: 20px;
    font-size: 11pt;
    color: #989c9d;
    font-weight: bold;
}    
#theme-popup {
    background-color: var(--divider-color);
    color: rgb(var(--normal-text-color));

    width: 200px;
    padding: 1rem;
    border-radius: 0.2rem;
    font-size: 10pt;
    text-align: center;
    margin:auto;
    margin-bottom: 1rem;
    display: none;
}
#theme-popup select {
    background-color: var(--bg-accent2);
    color: var(--color-accent2);
    border: none;
    padding: 0.3rem;
    border-radius: 0.2rem;
    margin-left: 0.3rem;
}


/* --------------------------------------- Fixes -------------------------------------------------- */
.container #homelink{
    background-color: unset;
    padding: unset;
    margin: unset;
}

.icon-tray div
{
    border: 3px solid var(--bg-accent);
    width: calc(1.6rem - 6px);
    height: calc(1.6rem - 6px);
    border: 3px solid #f0f0f0;
    margin-right: 0.2rem;
    float: right;
    cursor: pointer;
}

.toc-header {
    color:rgb(var(--normal-text-color));
    margin-left: 1.5rem;
    font-weight: bold;
}

#left_pane ul a,
#right_pane ul a {
    color: var(--color-accent);
}
#left_pane ul a:hover,
#right_pane ul a:hover {
    color: var(--muted-link-color);
    text-decoration: none;
}
h3 {
    font-size: 13pt;
    font-weight: 500;
    border-bottom: 1px dashed var(--bg-accent3);
    padding: 2px;
    margin-bottom: 0.5rem;
}
h3 + p {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}




@media (max-width: 602px) {
    .header {
        padding-bottom: 0.3rem;
    }
    .navbar {
        margin: auto
    }
     #navbar {
        padding-top: 1rem;
        width: unset;
    }
    .navbar-button {
        margin: auto;
        margin-top: -1rem;        
        margin-left: unset;
        margin:auto;
        background-color: unset;
        color: unset;
        margin-top: -1rem;
    }
}

h1, h2, h3, h4, h5 {
    scroll-margin-top: 8rem;
}

.header {
    margin: 1rem;
    margin-left: 2rem;
    margin-top:2rem;
    margin-bottom:2rem;
    background-color: var(--header-bg);
    scroll-margin-top: 20rem;
    overflow-anchor: none;
}

h1 {
    font-size: 28px;
    line-height: 34px;
    margin-top: 0px;
    margin-bottom: 16px;
    color: inherit;
    font-weight: 600;
    padding-bottom: 0.2rem;
}
h1:not(:first-of-type) {
    margin-top: 2rem;
}

h2 {
    font-size: 14pt;
    border-bottom: 1px dotted #777070;
    font-weight: 600;
    padding-bottom: 0.2rem;
    margin-top: 2rem;
}
h1 + h2 {
    margin-top: 1rem;
}
h2 + p {
    margin-top: 0rem;
}

.anchor {
    visibility: hidden;
    float: left;
    padding-right: 4px;
    margin-left: -20px;
    line-height: 1;
}
.anchor svg {
    fill: #2f2f2f;
}

li {
    margin-bottom: 0.3rem;
}


#antiflash {
    background-color: rgb(var(--loading-bg-color));
    position: absolute;
    z-index: 99;
    width: 100vw;
    height: 100vh;
}