.theme-light {
    --primary-bg-color: #fefefe;
    --secondary-bg-color: #eeeeee;
    --tertiary-bg-color: #005e8b ;
    --primary-text-color: #222222;
    --secondary-text-color: #252525;
    --tertiary-text-color: #595959;

    --code-color-1:#dd22dd;
    --code-color-2:#008899;
    --code-color-3:#972500;
    --code-color-4:#531ab6;
}
.theme-dark {
    --primary-bg-color: #121212;
    --secondary-bg-color: #181818;
    --tertiary-bg-color: #a988b0;
    --primary-text-color: #e8e8e8;
    --secondary-text-color: #d0d0d0;
    --tertiary-text-color: #a0a0a0;

    --code-color-1:#B66467;
    --code-color-2:#8c977d;
    --code-color-3:#8da3b9;
    --code-color-4:#d9ab8c;
}

@font-face {
    font-family: 'ET Book';
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/et-book-roman-line-figures.woff') format('woff'),
         url('/fonts/et-book-roman-line-figures.ttf') format('truetype');
}

@font-face {
    font-family: 'Iosevka Comfy';
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/iosevka-comfy-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Iosevka Comfy';
    font-weight: normal;
    font-style: italic;
    font-display: fallback;
    src: url('/fonts/iosevka-comfy-italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Iosevka Comfy';
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/iosevka-comfy-semibold.ttf') format('truetype');
}

@font-face {
    font-family: 'Cozette';
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/Cozette.woff2');
}

@font-face {
    font-family: 'Operan';
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/Operan-Italic.woff2') format('woff2')
}
@font-face {
    font-family: 'Operan Roman';
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    src: url('/fonts/Operan-Roman.woff2') format('woff2')
}

#content {
    padding: 1.5em;
    background: var(--primary-bg-color);
    max-width: 95%;
    position: relative;
    margin: 0.5em auto 0.5em 0.5em;
}
#header {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    font-family: 'ET Book', 'Computer Modern Serif', 'Times New Roman', serif;
    font-size: 1em;
    line-height: 1.3;
    color: var(--primary-text-color);
    background-color: var(--primary-bg-color);
}
p {
    margin-top: 0.6rem;
    padding-bottom: 0.6rem;
    hyphens: auto;
}

pre.src {
    white-space: pre;
    overflow: scroll;
}

pre.src:before {
    display: none;
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 3px;
    color: var(--primary-text-color);
}

pre.src:hover:before { display: inline; margin-top: 14px;}

.org-src.container {
    font-family: 'Cozette', Iosevka, Menlo, Monaco, monospace;
    line-height: 1;
    overflow-x: scroll;
    color: var(--primary-text-color);
    font-size: 1em;
    background-color: var(--primary-bg-color);
}

.header {
    padding: 1em;
}

.footer {
    padding: 1.5em;
    background-color: var(--primary-text-color);
    position: relative;
}
.footer ul {
    list-style-type: "";
    color: var(--primary-bg-color);
}
.footer ul a {
    color: var(--primary-bg-color);
}

.underline {
    text-decoration: underline;
}

.headline {
    display: flex;
}

.taglist {
    flex-grow: 0;
    margin-bottom: 2rem;
    margin-top: 2.5rem;
    font-size: 1.5em;
    text-decoration: none;
    color: var(--secondary-text-color);
    font-family: 'Operan', 'ET Book' ,'Vollkorn', 'Computer Modern Serif', 'Times New Roman', serif;
}
.taglist a:visited {
    color: var(--secondary-text-color);
}

.tags-title {
    margin-top: 1em;
    margin-bottom: 0em;
}

.post-title {
    flex-grow: 1;
    margin: 0em;
    margin-top: 2rem;
    font-style: normal;
    color: var(--secondary-text-color);
    font-family: 'Operan', 'ET Book' ,'Vollkorn', 'Computer Modern Serif', 'Times New Roman', serif;
}
.post-title:before {
    content: "";
    left: 0em;
}
.post-title a:visited {
    color: var(--secondary-text-color);
}

.post-date {
    color: var(--tertiary-bg-color);
    padding-right: 1.5em;
    font-size: 1em;
    margin-bottom: 1em;
    padding-left: 0em;
}
.post-git-date {
    color: var(--tertiary-bg-color);
    padding-right: 1.5em;
    font-size: 1em;
    margin-bottom: 0.5em;
    padding-left: 0em;
    padding-bottom: 0.5em;
}
.post-box {
    padding-top: 1rem;
    border-top: thin solid var(--tertiary-text-color);
}

.edited-text {
    color: var(--tertiary-text-color);
    font-size: 0.9em;
}

h2, h3, h4 {
    position: relative;
    margin: 0.1em 0 1em;
    font-size: 1.5em;
    line-height: 1.1;
    color: var(--secondary-text-color);
    text-rendering: optimizeLegibility;
    font-family: 'Operan Roman', 'ET Book' ,'Vollkorn', 'Computer Modern Serif', 'Times New Roman', serif;
}
h3, h4 {
    font-weight: bold;
}

h1 {
    position: relative;
    margin: 0.1em 0 1em 0;
    font-size: 3em;
    font-weight: bold;
    line-height: 1;
    color: var(--secondary-text-color);
    text-rendering: optimizeLegibility;
    font-family: 'Operan', 'ET Book' ,'Vollkorn', 'Computer Modern Serif', 'Times New Roman', serif;
}

h1:before {
    content: "";
    left: -1.25em;
    color: var(--secondary-text-color);
}

h2:before, h3:before, h4:before {
    position: absolute;
    top: auto;
    color: var(--tertiary-bg-color);
    display: inline;
}
h1:before {

}
h2:before {
    content: "*";
    left: -1em;
}
h3:before {
    content: "**";
    left: -1.5em;
}
h4:before {
    content: "***";
    left: -2em;
}
h1 a {
    color: var(--secondary-text-color);  /* This sets the color for links inside h1 */
    text-decoration: none; /* Optional: to remove underline if not needed */
    font-style: normal;
}
h2 a {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-style: normal;
}

h2 a:visited {
    color: var(--secondary-text-color);
    text-decoration: none;
    font-style: normal;
}

.post-title h1 {
    margin-bottom: 1.5rem;
}
.post-title h2 {
    font-family: 'Operan Roman', 'ET Book' ,'Vollkorn', 'Computer Modern Serif', 'Times New Roman', serif;
    font-size: 1.5em;
    font-weight: normal;
}

i, em, b, strong {
    padding-left: .1em;
    padding-right: .1em;
}
b, strong {
    font-weight: bold;
    color: var(--secondary-text-color);
}
hr {
    margin: 0;
    border: 0;
    color: var(--primary-text-color);
}
hr:after {
    display: block;
    margin: 20px 0;
    content: "----------------------------------------------------------------";
    color: var(--secondary-text-color);
}
ul {
    list-style-type: "- ";
    padding-left: 0.8em;
}

ol {
    list-style: decimal;
    padding-left: 2rem;
    padding-right: 0.5rem;
}

code, pre {
    font-family: 'Cozette', Iosevka, Menlo, Monaco, monospace;
    font-size: 1em;
}
code {
    color: var(--code-color-2);
    background: var(--secondary-bg-color);
    padding: 4px 3px;
    border-radius: 2px;
    margin: auto 1px;
}
pre {
    font-size: 0.9em;
    display: block;
    margin: 0 0 1em;
    padding: 1.3em;
    line-height: 1.5em;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    background-color: var(--secondary-bg-color);
    white-space: pre;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
blockquote {
    color: var(--secondary-text-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
}
blockquote p:last-child {
    margin-bottom: 0;
}

.header-img{
    display: block;
    border-radius: 5px;
    height: auto;
    object-fit: cover;
    object-position: 50% 100%;
    width: 7rem;
}

img {
    padding: 0.5em;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    align-content: center;
    object-fit: contain;
}
a {
    color: var(--primary-text-color);
    text-decoration: underline;
}
sup a:before {
    content: "[";
}
sup a:after {
    content: "]";
}
.footpara a:before {
    content: "";
}
.footpara a:after {
    content: "";
}

a:hover {
    text-decoration: underline;
    font-weight: bold;
    font-size: 0.8m;
}
a:visited {
    color: var(--primary-text-color);
}

.outline-3 {
    margin-left: 1em;
}

table {
    line-break: 0.7;
    margin-bottom: 15px;
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    border: 0.3em solid var(--primary-bg-color);
}
tbody {
    margin-bottom: 1rem;
}

th, td {
    background-color: var(--secondary-bg-color);
    
} 
table td, table th {
    padding: 0.5em;
    border: 0.3em solid var(--primary-bg-color);
}
table th.left, table td.left {
    text-align: left;
}
table th.right, table td.right {
    text-align: right;
}
tr {
    border: 0.3em solid var(--primary-bg-color);
    border-width: 1px 0;
    margin: 2rem;
}
/******************************************************/
/* body */
.container {
    margin: 0 auto;
    max-width: 770px;
}
/* head */
.masthead {
    color: var(--secondary-text-color);
}
.masthead:after {
    display: block;
    content: '----------------------------------------------------------------';
    margin: 10px 0;
    color: var(--secondary-bg-color);
}
.masthead a {
    color: var(--primary-text-color);
}
.masthead ul {
    list-style: none;
}
.masthead li {
    display: inline-block;
}
.masthead li + li:before {
    display: inline-block;
    content: "\00B7 \00a0";
    color: var(--secondary-text-color);
}
/* searchform*/
#searchform {
    position: absolute;
    top: 54px;
    right: 30.4%;
}
#searchform #s {
    background: url("/media/img/search.png") no-repeat 5px 6px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    border-radius: 2px;
    -moz-border-radius: 2px;
    width: 90px;
    height: 30px;
    line-height: 12px;
    padding: 4px 10px 4px 28px;

    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
}
#searchform #s:focus {
    background-color: var(--secondary-bg-color);
    width: 160px;
}
.masthead img.avatar {
    position: relative;
    float: right;
    margin-top: -100px;
    margin-bottom: -100%;
    margin-right: 10%;
    width: 200px;
    background-color: var(--primary-bg-color);
}
/* post */
.post {
    position: relative;
}
.post:after {
    display: block;
    content: "----------------------------------------------------------------";
    color: var(--secondary-bg-color);
}
.post img {
    max-width: 100%;
}
.post li {
    list-style: none outside none;
}
.post ul > li:before {
    content: "- ";
    margin-left: -1.25em;
    color: var(--secondary-bg-color);
}
.post ol {
    counter-reset: o-list;
}
.post ol > li:before {
    content: counter(o-list) ") ";
    counter-increment: o-list;
    margin-left: -1.85em;
    color: var(--secondary-bg-color);
}

/* special for li in pre */
.post pre li {
    list-style-type: decimal;
}

.post pre li:before {
    display: none;
}

/* meta info */
.post-info {
    display: inline-block;
    margin: -10px 0 -10px;
    color: var(--secondary-text-color);
}
.post-info + .post-info:before {
    content: "\2223 \00a0";
}

.status {
    border-top: thin solid var(--secondary-bg-color);
}

.ellipsis {
    float: right;
    display: inline-block;
    text-align: right;
    margin-bottom: 1.5rem;
}
.ellipsis:hover {
    text-decoration: underline;
}

/* table of content */
#table-of-contents {
    position: fixed;
    right: 1em;
    top: 1em;
    border:1px solid var(--tertiary-text-color);
    background-color: var(--primary-bg-color);
    text-align: right;
    max-height: 80%;
    overflow: auto;
    z-index: 200;
    font-family: 'ET Book', 'Computer Modern Serif', 'Times New Roman', serif;
}

#table-of-contents h2 {
    max-width: 20em;
    font-weight: normal;
    font-size: 1em;
    padding-left: 0.8em;
    padding-right: 0.8em;
    padding-top: 0.5em;
    margin-bottom: 0.7em;
    font-family: 'ET Book', 'Computer Modern Serif', 'Times New Roman', serif;
}

#table-of-contents ul {
    margin-right: 1em;
    margin-right: 2em;
    margin-bottom: 0;
}

#table-of-contents li {
    margin-left: 1em;
    list-style: lower-greek;
}

#table-of-contents #text-table-of-contents {
    display: none;
    text-align: left;
}

#table-of-contents:hover #text-table-of-contents {
    display: block;
    padding: 0.5em;
    margin-top: -1.5em;
    background-color: var(--primary-bg-color);
}

figure {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: left;
    flex-direction: column;
    max-width: 100%;
    margin: 0;
}

figcaption {
    font-size: 0.8em;
    color: var(--tertiary-text-color);
}

/* Responsive
   -------------------------------------------------- */

@media (min-width: 768px) {
    #content {
        max-width: 50%;
        margin-left: 25%;
        padding-top: 3rem;
    }
}

@media (min-width: 1100px) {
    #content {
        max-width: 30%;
        margin-left: 35%;
        padding-top: 3rem;
    }
}

/* Sidenotes, margin notes, figures, captions */
.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -60%;
    margin-left: 0em;
    color: var(--primary-text-color);

    width: 50%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size:0.9rem;
    line-height: 1.2;
    vertical-align: baseline;
    position: relative;
    overflow: auto;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
    font-size: 0.9em;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 1rem;
    left: 0.1rem;
}

.sidenote:before {
    content: counter(sidenote-counter) "";
    font-size: 1rem;
    top: -0.5rem;
}

.footdef {
    background: var(--secondary-bg-color);
    padding: 1rem;
    margin-left: 0rem;
    margin: 2rem;
    overflow-x: scroll;
    max-width: 40em;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    font-family: 'ET Book', 'Computer Modern Serif', 'Times New Roman', serif;
}

.footref {
    display: inline-block; /* Make room for sidenote */
    position: relative; /* Reference point for sidenote */
    font-size: 0.8em;
    font-family: 'ET Book', 'Computer Modern Serif', 'Times New Roman', serif;
}
.footref:hover + .sidenote {
    display: block; /* Show sidenote on hover */
}


blockquote .sidenote,
blockquote .marginnote {
    margin-right: -32.5rem;
    min-width: 25rem;
    text-align: justify;
}

figure .sidenote {
    margin: 0em;
}

.intro {
    color: var(--primary-text-color);
    background: var(--secondary-bg-color);
    padding: 1rem;
    margin-left: 0rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    min-width: 30%;
    text-align: left;
    overflow-x: auto;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.intro p {
    padding-bottom: 0;
    margin: 0;
}

div.fullwidth,
table.fullwidth {
    width: 100%;
}

label.sidenote-number {
    display: inline-block;
    max-height: 2rem; /* should be less than or equal to paragraph line-height */
}
@media only screen and (max-device-width: 600px) {
    .marginnote, .sidenote {
        display: none;
    }
}
/* Define org todo faces */
.PROJECT {
    color: red;
}

.TODO {
    color: red;
}

.NEXT {
    color: blue;
}

.STARTED {
    color: blue;
}

.WAITING {
    color: orange;
}

.DELEGATED {
    color: orange;
}

.DONE {
    color: green;
}

.CANCELLED {
    color: green;
}

.REF {
    color: blue;
}

.SOMEDAY {
    color: blue;
}


/* indent items*/
.org-ul {
    margin-right: 10px;
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint {
    background-color: #042029;
    padding: 10px;
    border: 1px solid #E1E1E8; }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
    color: #4c666c;
    margin: 0 0 0 40px; }

ol.linenums li {
    line-height: 18px;
    padding-left: 12px; }

.linenr {
    color: var(--tertiary-text-color);
}

.org-org-document-info-keyword {
    color: var(--secondary-text-color);
}

pre span.org-builtin {color:var(--primary-text-color);font-weight:bold;}
pre span.org-string {color:var(--code-color-2);}
pre span.org-keyword {color:var(--code-color-4);}
pre span.org-variable-name {color:var(--code-color-2);}
pre span.org-function-name {color:var(--code-color-3);}
pre span.org-type {color:var(--code-color-4);}
pre span.org-preprocessor {color:var(--secondary-text-color);font-weight:bold;}
pre span.org-constant {color:var(--code-color-2);}
pre span.org-comment-delimiter {color: var(--tertiary-text-color);}
pre span.org-comment {color:  var(--tertiary-text-color);font-style:italic}
pre span.org-outshine-level-1 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-2 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-3 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-4 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-5 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-6 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-7 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-8 {color: var(--secondary-text-color);font-style:italic}
pre span.org-outshine-level-9 {color: var(--secondary-text-color);font-style:italic}
pre span.org-rainbow-delimiters-depth-1 {color: var(--primary-text-color);}
pre span.org-rainbow-delimiters-depth-2 {color: var(--code-color-1);}
pre span.org-rainbow-delimiters-depth-3 {color: var(--code-color-2);}
pre span.org-rainbow-delimiters-depth-4 {color: var(--code-color-3);}
pre span.org-rainbow-delimiters-depth-5 {color: var(--code-color-4);}
pre span.org-rainbow-delimiters-depth-6 {color: var(--code-color-1);}
pre span.org-rainbow-delimiters-depth-7 {color: var(--code-color-2);}
pre span.org-rainbow-delimiters-depth-8 {color: var(--code-color-3);}
pre span.org-rainbow-delimiters-depth-9 {color: var(--code-color-4);}
pre span.org-sh-quoted-exec {color:#FF1493;}
pre span.org-org-block-begin-line {color:#909183;}
pre span.org-org-meta-line {color:#909183;}
pre span.org-org-document-info-keyword {color: var(--secondary-text-color);}
pre span.org-org-document-title {color: var(--code-color-1);}
pre span.org-org-document-info {color: var(--code-color-1);}
pre span.org-nix-builtin {color:#006FE0;font-weight:bold;}
pre span.org-nix-string {color:#008000;}
pre span.org-nix-keyword {color:#0000FF;}
pre span.org-nix-variable-name {color:#BA36A5;}
pre span.org-nix-function-name {color:#006699;}
pre span.org-nix-type {color:#6434A3;}
pre span.org-nix-preprocessor {color:#808080;font-weight:bold;}
pre span.org-nix-constant {color:#D0372D;}
pre span.org-nix-comment-delimiter {color:#8D8D84;}
pre span.org-nix-comment {color:#8D8D84;font-style:italic}