/* CSS to be used for HTML Org-mode export
   Author: Yann Esposito
*/

/* Fonts */
body {
    font-family: Menlo, Monaco, monospace;
    font-size: 13px;
    line-height: 18px;
}
code {
    font-family: Menlo, Monaco, monospace;
}
pre, pre code {
    font-family: Menlo, Monaco, monospace;
}
.todo, .done {
    font-family: Menlo, Monaco, monospace;
}
/* Layout */
body {
    margin: 0;
    padding: 0;
    border: 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
}
h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol
ul, li, p, section, header, footer {
    float: none;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header,
figure {
    margin-top: 20px;
    margin-bottom: 20px;
}

figure {
    margin: 20px 0px;
}

h1 {
    font-size: 1em;
}
h2 {
    font-size: 1em;
}
h3 {
    font-size: 1em;
}
h4 {
    font-size: 1em;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: 1em;
}
h1::before {
    content: "# ";
}
h2::before {
    content: "## ";
}
h3::before {
    content: "### ";
}
h4::before {
    content: "#### ";
}
h5::before {
    content: "##### ";
}
h6::before {
    content: "###### ";
}
hr {
    position: relative;
    height: 20px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 0;
}
hr:after {
    content: "----------------------------------------------------------------------------------------------------";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    word-wrap: break-word;
}
pre { max-width: 100%; overflow: scroll; }
pre::after,pre::before {
    content: "~~~~~~~~~";
    display: block; }
pre::before {
    content: "~~~~~~~~~ " attr(class);
}
pre code {
    background: none;
}
blockquote {
    margin-left: 0;
    position: relative;
    padding-left: 17px;
    padding-left: 2ch;
    overflow: hidden;
}
blockquote *:first-child {
    margin-top: 0;
}
blockquote *:last-child {
    margin-bottom: 0;
}
blockquote:after {
    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
}
li {
    position: relative;
    display: block;
}
li li {
    padding-left: 20px;
}
ul > li:before {
    content: "– ";
    font-weight: bold;
    opacity: 0.5;
}
ol {
    counter-reset: ol;
}
ol > li:before {
    content: counter(ol) ". ";
    counter-increment: ol;
    font-weight: bold;
    opacity: 0.5;
}

img {
    max-width: 100%;
    max-height: 800px;
    margin: 20px auto;
}
p > img, li > img {
    max-height: 1em;
    margin: 0;
    vertical-align: middle;
}
table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    border: solid 1px;
    display: block;
    overflow: scroll;
}
td, th {
    height: 20px;
    padding: 0 10px;
    text-align: left;
    vertical-align: middle;
    border-right: solid 1px;
    border-left: solid 1px;
}
navigation {
    font-weight: bold;
    display: block;
    margin: 10px 0;
}
navigation > a {
    margin-right: 10px;
}

/* org mode ids and classes */
.figure {
    margin-top: 20px;
    margin-bottom: 20px;
}
#preamble {
    border-bottom: solid 1px;
}
#preamble h1, #preamble h2 {
    margin: 0;
}
#postamble {
    border-top: solid 1px;
}
#preamble,#postamble {
    padding: 10px 0;
}
#content,.content {
    max-width: 50em;
    margin: 0 auto;
    padding: 10px;
}
#content *:first-child {
    margin-top: 0;
}
.timestamp-wrapper {
    font-size: 12px;
}
.todo, .done {
    font-size: 12px;
    font-weight: bold;
    padding: 1px 1ex;
}
.article-date {
    font-size: 0.8;
    font-style: italic;
    float: right;
}
.footpara {
    display: inline;
}
.footdef > sup {
    vertical-align: middle;
}
.footdef > sup::after {
    content: ": ";
}


/* colors theme */
:root {
    color-scheme: light dark; /* support color scheme */
    --base03:    #002b36;
    --base02:    #073642;
    --base01:    #586e75;
    --base00:    #657b83;
    --base0:     #839496;
    --base1:     #93a1a1;
    --base2:     #eee8d5;
    --base3:     #fdf6e3;
    --yellow:    #b58900;
    --orange:    #cb4b16;
    --red:       #dc322f;
    --magenta:   #d33682;
    --violet:    #6c71c4;
    --blue:      #268bd2;
    --cyan:      #2aa198;
    --green:     #859900;
    --transparent: rgba(255,255,255,0);

    /* --main-background: #00151b; /* 0.5 darker than #002b36; */
    --main-background: var(--base03); /* 0.5 darker than #002b36; */
    --main-foreground: var(--base1);
    --second-foreground: var(--base0);
    --soft-foreground: var(--base01);
    --reveal-background: var(--base03);
    --border-color: var(--base02);
    --todo-txt: #000;
}

/* org colors */
@media (prefers-color-scheme: light) {
    :root {
        --main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
        --main-foreground: var(--base01);
        --second-foreground: var(--base00);
        --soft-foreground: var(--base1);
        --reveal-background: var(--base3);
        --border-color: var(--base2);
        --todo-txt: #FFF;
    }
}
body {
    background: var(--main-background);
    color: var(--main-foreground);
}
::selection {
    color: var(--todo-txt);
    background-color: var(--yellow);
}
::-moz-selection {
    color: var(--todo-txt);
    background-color: var(--yellow);
}
a, a:visited {
    color: var(--second-foreground);
}
pre::after,pre::before,hr:after {
    color: var(--soft-foreground);
}
a:hover, a:active, a:focus {
    color: var(--yellow);
}
navigation a, navigation a:visited {
    color: var(--soft-foreground);
}
navigation a:focus, navigation a:hover {
    color: var(--yellow);
}
thead {
    background-color: var(--reveal-background);
    color: var(--second-fg);
}
tr:hover {
    background-color: var(--reveal-background);
}
h1 {
    color: var(--magenta);
}
h2 {
    color: var(--violet);
}
h3 {
    color: var(--blue);
}
h4 {
    color: var(--cyan);
}
h5 {
    color: var(--green);
}
h6 {
    color: var(--green);
}
table, td, th {
    border-color: var(--border-color);
}
code {
    background: var(--reveal-background);
}
blockquote:after  {
    color: var(--soft-foreground);
}
#preamble,#postamble {
    border-color: var(--transparent);
}
.article-date {
    color: var(--soft-foreground);
}
/* -------- */
/* org colors */
.todo, .done {
    color: var(--todo-txt);
}
.TODO {
    background-color: var(--red);
}
.IN_PROGRESS {
    background-color: var(--yellow);
}
.IN_REVIEW {
    background-color: var(--cyan);
}
.HOLD {
    background-color: var(--violet);
}
.WAITING {
    background-color: var(--violet);
}
.DONE {
    background-color: var(--green);
}
.CANCELED {
    background-color: var(--magenta);
}