: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);
    --reveal-background: var(--base02);
    --soft-foreground: var(--base01);
    --border-color: var(--base02);
    --todo-txt: #000;
    --color-h1: var(--cyan);
    --color-h2: var(--green);
    --color-h3: var(--yellow);
    --color-h4: var(--orange);
    --color-h5: var(--red);
    --color-h6: var(--magenta);
    --color-link: var(--magenta);
}

html {
    height: 102%;
}

body {
    height: 102%;
    word-wrap: break-word;
    background-color: var(--main-background);
    color: var(--main-foreground);
}
a {
    color: var(--blue);
}
a:visited { color: var(--violet);}

a:hover, a:active, .top_menu a:hover {color: var(--magenta);}
.bg-white { background-color: var(--main-background); }
input, textarea {
    background-color: var(--reveal-background);
    color: var(--main-foreground);
    border: solid 1px var(--border-color);
}
.gold { color: var(--yellow); }
.hover-orange:hover { color: var(--orange); }
button, .button {color: white;}
.bg-white input:focus, .bg-white textarea:focus {
    border: solid 1px var(--blue);
    box-shadow: none;
}
button {
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

button:focus {
    outline: none;
}


[hidden] {
    display: none !important
}
input::placeholder {
    color: var(--soft-foreground);
}
.queryInput {
    width: 128px;
    padding: 0 22px 0 2px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--border-color);
    height: 22px;
    line-height: 22px;
    transition: width .1s ease-in-out
}
.queryInput.search-inactive {}
.queryInput:focus {
    width: 175px;
}
.submitting .queryInput,
.queryInput.search-active {
    border-color: var(--border-color);
    border-width: 2px;
    background-color: var(--reveal-background);
    width: 175px;
}
.queryIcon {
    position: absolute;
    right: 0;
    top:1px;
    cursor:pointer;
    width:20px;
    height: 20px;
    fill: currentColor;
}
label {
    cursor: pointer;
}
.close-x-wrap {
  float: left;
  width: 17px;
  height: 17px;
  top: 2px;
  position: relative;
  right: 2px;
}
.close-x {
  stroke: var(--second-foreground);
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 3;
}
.query-info-icon {
  position: absolute;
  top: 0px;
  right: -18px;
  text-decoration: none;
  font-size: 12px;
  padding: 0 8px 8px 0;
}
.star {
    margin-left:-20px;
    font-size:1.2em;
    position:relative;
    top:-2px;
}

.star button {
    transition: color .1s;
}
.star.selected button {
    color:var(--magenta);
}
.edit_links button {
    transition: color .1s ease-in;
}

.tag {
    color:var(--cyan);
    line-height:190%;
}

.private { background:var(--reveal-background);border:1px solid var(--border-color); }
.unread { color:var(--yellow); }
.mark_read {color: var(--yellow);}
.flash { color:var(--green); }

.top_menu {
    margin-top:6px;
}
.top_menu a {
    color: var(--blue);
}
.bookmarklet {
    padding:1px 2px 0px 2px;
}

.alert {
    background:var(--reveal-background);
    border:1px solid var(--border-color);
}

.edit_bookmark_form {color:var(--second-foreground);}
.edit_bookmark_form input {border:1px solid var(--border-color);}
.edit_bookmark_form textarea {border:1px solid var(--border-color);}

.nav-active {
    background-color: var(--reveal-background);
    color: var(--yellow);
}

/* mobile device */
@media only screen and (max-width : 750px) {
    body {
        -webkit-text-size-adjust: none;
    }
    .display {
        float: none
    }
}

@media only screen and (max-width : 500px) {
    .filters {
        clear: both;
        position: relative;
        top: 2px;
    }
}

.rdim {
  opacity: .8;
  transition: all .15s ease-in;
}
.rdim:hover,
.rdim:focus {
  opacity: 1;
  transition: all .15s ease-in;
}
.display .description > div p,
.display .description > div pre
{
  margin-top: 9px;
  margin-bottom: 9px;
}
.display .description > div > *:first-child {
  margin-top: 2px;
}
.display .description > div > *:last-child {
  margin-bottom: 2px;
}
.display .description > div > ol li p {
  margin-top: 0;
  margin-bottom: 0;
}
.display .description > div > ul li p {
  margin-top: 0;
  margin-bottom: 0;
}
.display .description > div ol {
  padding-left: 23px;
}
.display .description > div ul {
  padding-left: 23px;
}
code, pre {
    font-size:13px;
}

#content:not([view-rendered]) .view-delay {
    display: none !important
}
/* CSS to be used for HTML Org-mode export
   Author: Yann Esposito
*/

:root {
    --font-size: 12px;
    --line-height: 14px;
}
/* Fonts */
body {
    font-family: Menlo, Monaco, monospace;
    font-size: var(--font-size);
    line-height: var(--line-height);
}
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: 1em;
    margin-bottom: 1em;
}
figure {
    margin: 1em 0px;
}
figure > img {
    margin: 0px;
}
li {
    position: relative;
    display: block;
    padding-left: 1.5em;
}
ul > li:before {
    content: "– ";
    opacity: 0.5;
    float: left;
    position: relative;
    left: -1.5em;
    text-align: right;
    width: 0;
}
ol {
    counter-reset: ol;
}
ol > li:before {
    content: counter(ol) ". ";
    counter-increment: ol;
    float: left;
    text-align: right;
    position: relative;
    left: -1.5em;
    width: 0;
}
ol > li:nth-child(n+10) {
    padding-left:28px;
}
ol > li:nth-child(n+10):before {
    left: -28px;
}
img {
    max-width: 100%;
    max-height: 800px;
    margin: 1em auto;
}
p > img, li > img {
    max-height: 1em;
    margin: 0;
    vertical-align: middle;
}
table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    border: solid 1px;
    display: block;
    overflow: scroll;
}
td, th {
    height: 1em;
    padding: 0 10px;
    text-align: left;
    vertical-align: middle;
    border-right: solid 1px;
    border-left: solid 1px;
}

/* Markdown tricks */
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: 1em;
    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;
}
.notes *:first-child,
blockquote *:first-child {
    margin-top: 0;
}
.notes *:last-child,
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;
}
navigation {
    font-weight: bold;
    display: block;
    margin: 10px 0;
}
navigation > a {
    margin-right: 10px;
}

/* org mode ids and classes */
.figure {
    margin-top: 1em;
    margin-bottom: 1em;
}
#content,.content {
    margin: 0 1em;
    padding: 1px;
}
#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.8em;
    font-style: italic;
    float: right;
}
.footpara {
    display: inline;
}
.footdef > sup {
    vertical-align: middle;
}
.footdef > sup::after {
    content: ": ";
}
.notes {
    padding: 5px 10px;
}
.notes::before {
    content: "☞";
    float: left;
    display: inline-block;
    width: 1.5em;
}
.underline {
    text-decoration: underline;
}

table, tr, td { border-color: transparent; }
.dark-gray { color: var(--second-foreground);}
.mid-gray { color: var(--second-foreground);}