/* ==========================================================================
     Todo: 
     - This choas; need to be refactored and cleaned up
        - The dark theme is mostly based;  on https://github.com/11ty/eleventy-base-blog/commit/44dbdc7c801b1262a1e52147a0553f6c24d0382e 
     ========================================================================== */


/* Colors */


:root {
    --lightgray: #e0e0e0;
    --gray: #C0C0C0;
    --darkgray: #333;
    --navy: #17050F;
    --blue: #082840;
    --white: #fff;
    --black: #121212;
    --darkmode-text: #e0e0e0;
    --darkmode-bg: #121212;
    --darkmode-highlight: #444;
    --darkmode-border: #555;
    --color-note: #0969da;
    --color-tip: #1a7f37;
    --color-warning: #9a6700;
    --color-severe: #bc4c00;
    --color-caution: #d1242f;
    --color-important: #8250df;
    --code-background: #f8f8f8;
}

 :root {
    --lightgray: #e0e0e0;
    --gray: #C0C0C0;
    --darkgray: #333;
    --navy: #17050F;
    --blue: #082840;
    --white: #fff;
    --color-note: #0969da;
    --color-tip: #1a7f37;
    --color-warning: #9a6700;
    --color-severe: #bc4c00;
    --color-caution: #d1242f;
    --color-important: #8250df;
  
}
@media (prefers-color-scheme: dark) {
    :root {
      --color-note: #2f81f7;
      --color-tip: #3fb950;
      --color-warning: #d29922;
      --color-severe: #db6d28;
      --color-caution: #f85149;
      --color-important: #a371f7;
      --white: #121212;
      --darkgray: #e0e0e0;
      --color-hyber: #bb86fc;
      --blue: #bb86fc;
      --grey: var(--blue);
    }
  }



/* Global stylesheet */

* {
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    .icon {
      stroke: white;
    }
  }
  
  /* Light mode */
  @media (prefers-color-scheme: light) {
    .icon {
      stroke: black;
    }
  }
  
html,
body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, system-ui, sans-serif;
    color: var(--darkgray);
    background-color: var(--white);
}

body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode a[href] {
    color: #bb86fc;
}

body.dark-mode .italic_bold_me {
    color: #e0e0e0;
}

p:last-child {
    margin-bottom: 0;
}

p,
.tmpl-post li {
    line-height: 1.45;
}

a[href] {
    color: var(--blue);
}

a[href]:visited {
    color: var(--blue);
}

main {
    padding: 1rem;
    margin: auto auto;
    max-width: 750px;
    min-height: 60vh;
}

main :first-child {
    margin-top: 0;
}

header {
    border-bottom: 1px dashed var(--lightgray);
}

header:after {
    content: "";
    display: table;
    clear: both;
}


/*
table {
    margin: 1em 0;
}

table td,
table th {
    padding-right: 1em;
}
*/

pre,
code {
    font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
    line-height: 1.5;
}

pre {
    font-size: 14px;
    line-height: 1.375;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    padding: 1em;
    margin: .5em 0;
    background-color: var(--code-background);
}

code {
    word-break: break-all;
}

.highlight-line {
    display: block;
    padding: 0.125em 1em;
    text-decoration: none;
    /* override del, ins, mark defaults */
    color: inherit;
    /* override del, ins, mark defaults */
}


/* allow highlighting empty lines */

.highlight-line:empty:before {
    content: " ";
}


/* avoid double line breaks when using display: block; */

.highlight-line+br {
    display: none;
}

.highlight-line-isdir {
    color: #b0b0b0;
    background-color: #222;
}

.highlight-line-active {
    background-color: #444;
    background-color: hsla(0, 0%, 27%, .8);
}

.highlight-line-add {
    background-color: #45844b;
}

.highlight-line-remove {
    background-color: #902f2f;
}


/* Header */

.home {
    padding: 0 1rem;
    float: left;
    margin: 1rem 0;
    /* 16px /16 */
    font-size: 1em;
    /* 16px /16 */
}

.home :link:not(:hover) {
    text-decoration: none;
}


/* Nav */

.nav {
    padding: 0;
    list-style: none;
    float: left;
    margin-left: 1em;
}

.nav-item {
    display: inline-block;
    margin-right: 1em;
}

.nav-item a[href]:not(:hover) {
    text-decoration: none;
}

.nav-item-active {
    font-weight: 700;
    text-decoration: underline;
}


/* Posts list */

.postlist {
    list-style: none;
    padding: 0;
}

.postlist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    counter-increment: start-from -1;
    line-height: 1.8;
}

.postlist-item:before {
    display: inline-block;
    pointer-events: none;
    content: "" counter(start-from, decimal-leading-zero) ". ";
    line-height: 100%;
    text-align: right;
}

.postlist-date,
.postlist-item:before {
    font-size: 0.8125em;
    /* 13px /16 */
    color: var(--darkgray);
}

.postlist-date {
    word-spacing: -0.5px;
}

.postlist-link {
    padding-left: .25em;
    padding-right: .25em;
    text-underline-position: from-font;
    text-underline-offset: 0;
    text-decoration-thickness: 1px;
}

.postlist-item-active .postlist-link {
    font-weight: bold;
}

.tmpl-home .postlist-link {
    font-size: 1.1875em;
    /* 19px /16 */
    font-weight: 700;
}


/* Tags */

.post-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.75em;
    /* 12px /16 */
    padding: 0.08333333333333em 0.3333333333333em;
    /* 1px 4px /12 */
    margin-left: 0.6666666666667em;
    /* 8px /12 */
    margin-top: 0.5em;
    /* 6px /12 */
    margin-bottom: 0.5em;
    /* 6px /12 */
    color: var(--darkgray);
    border: 1px solid var(--gray);
    border-radius: 0.25em;
    /* 3px /12 */
    text-decoration: none;
    line-height: 1.8;
}

a[href].post-tag,
a[href].post-tag:visited {
    color: inherit;
}

a[href].post-tag:hover,
a[href].post-tag:focus {
    background-color: var(--lightgray);
}

.postlist-item>.post-tag {
    align-self: center;
}


/* Warning */

.warning {
    background-color: #ffc;
    padding: 1em 0.625em;
    /* 16px 10px /16 */
}

.warning ol:only-child {
    margin: 0;
}


/* Direct Links / Markdown Headers */

.direct-link {
    font-family: sans-serif;
    text-decoration: none;
    font-style: normal;
    margin-left: .1em;
}

a[href].direct-link,
a[href].direct-link:visited {
    color: transparent;
}

a[href].direct-link:focus,
a[href].direct-link:focus:visited,
 :hover>a[href].direct-link,
 :hover>a[href].direct-link:visited {
    color: #aaa;
}

.section_title {
    margin: 0;
    line-height: 1.2;
    font-weight: 500;
    text-rendering: optimizeLegibility;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #818a91;
}

.list {
    position: relative;
    padding-left: 1rem;
    list-style-type: none;
}

.list::before {
    content: '';
    display: block;
    width: 1px;
    background: #021523;
    background: linear-gradient(to top, rgba(129, 138, 145, 0) 0, #818a91 100px, #818a91 100%);
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    bottom: 0;
}

.list_item {
    position: relative;
    padding-left: 2rem;
    text-align: -webkit-match-parent;
}

.list_item::before {
    content: '';
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: #19832e;
    background-color: var(--secondary-color, #19832e);
    position: absolute;
    top: 1.25rem;
    left: 0;
    transform: translate(-50%, 0);
}

.article {
    display: block;
}

.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    page-break-inside: avoid;
}

h2,
h3,
h4 {
    line-height: 1.2;
}

.entry_title {
    font-weight: 400;
    display: inline;
    width: fit-content;
    font-size: min(max(16px, 5vw), 25px);
}

.date {
    font-weight: 200;
    display: inline-flex;
    justify-content: space-between;
    width: 80%;
}

.entry_header {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

.entry_detail {
    font-weight: 330;
    font-size: 1.2rem;
    margin-bottom: 0px;
}

.summary {
    font-size: min(max(16px, 5vw), 22px);
    padding-top: 10px;
    font-weight: 440;
}

.entry_summary {
    margin-bottom: 25px;
    font-weight: 250;
    font-size: 1.1375em;
    margin-top: 0;
}

.summary_item {
    padding-top: 14px;
    font-size: min(max(16px, 2vw), 20px);
}

.link_external {
    width: 24px;
}
.external_blog{
    font-size: 1.2rem;
    font-weight: 330;
    margin-top: 0;
    margin-bottom: 0;
}

.external_blog{
    font-size: 1.2rem;
    font-weight: 330;
    margin-top: 0;
    margin-bottom: 0;
}

.summary_item_header {
    display: inline;
    font-weight: 330;
}

.con_sum_head {
    display: flex;
    justify-content: space-between;
    height: 30px;
    max-width: 481px;
}

.bold {
    font-weight: bold;
}

.sum_techs {
    font-weight: 400;
    font-size: min(max(15px, 2vw), 18px);
}

.focus {
    font-weight: 550;
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

footer {
    margin: auto auto;
    width: fit-content;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 10px;
    border-top: 1.5px solid var(--darkgray)

}

.contact_list {
    list-style: none
}

.contact_list li {
    margin: 10px;
}

.contact_list .mail::before {
    content: "✉️";
}

.contact_list .twitter::before {
    content: "🐦";
}

.contact_list .zaat::before {
    content: "ⓩ";
}


/*
.contact_list .linkedin::before {
    content: "ℹⓝ";
}
*/

mark {
    background-color: #fcf8e3;
}

pre code {
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}

pre {
    padding: 1rem 0.5rem !important;
}

th {
    border-bottom: 2px solid #ccc;
    font-weight: bold;
    text-align: left;
}

td {
    border-bottom: 1px solid #ddd;
}

caption,
th,
td {
    padding: 4px 10px 4px 0;
}

caption {
    background: #f1f1f1;
    padding: 10px 0;
    margin-bottom: 1em;
}

tr,
td,
th {
    vertical-align: middle;
}


/*

 Use this if you use span-x classes on th/td.

table .last {
    padding-right: 0;
}

table {
    margin-bottom: 2em;
    width: 100%;
}

table {
    width: 250px;
    max-width: 250px;
    overflow: auto;
    display: table;
    /* Hide the horizontal scroll */

img {
    max-width: 100%;
}

*/ a[href] {
    color: #0969da;
    text-decoration: none;
}

.italic_bold_me {
    font-style: italic;
    font-weight: 700;
}
.post_head{
    font-size: small;
    font-weight: 400;
    border-bottom: 1.5px solid var(--darkgray)

}

@media (min-width:481px) {
    .post_head{
        max-width: 37rem;
    }
    /* Todo: remove this if 60vh resolved the issue*/
    .below {
        position: fixed;
        bottom: 0;
        margin: auto;
        padding: auto;
        text-align: center;
        left: 20%;
        padding: auto;
        margin: auto;
        margin-bottom: 10px;
    }
   main p,
    .tmpl-post li,
    img,
    code,
    blockquote,
    table {
        max-width: 37.5em;
        /* 600px /16 */
    }
    pre {
        overflow-block: scroll;
        max-width: 40.5em;
    }
    .entry_header {
        flex-direction: row;
        padding-right: 20%;
        margin: 0;
    }
    .date {
        width: 40%;
        padding-top: 5px;
    }
    .entry_title {
        width: fit-content;
    }
    .entry_detail {
        font-weight: 330;
    }
}

/* Dark Mode Support */
body.dark-mode {
    background-color: var(--darkmode-bg);
    color: var(--darkmode-text);
}

 a[href] {
    color: var(--color-hyber);
}

body.dark-mode pre {
    background-color: var(--darkmode-highlight);
}

body.dark-mode .section_title,
body.dark-mode .postlist-date,
body.dark-mode .postlist-item:before {
    color: var(--gray);
}

body.dark-mode .post-tag {
    color: var(--lightgray);
    border-color: var(--darkmode-border);
}

body.dark-mode .markdown-alert {
    border-left-color: var(--gray);
}

body.dark-mode .markdown-alert-note {
    border-left-color: var(--color-note);
}

body.dark-mode .markdown-alert-important {
    border-left-color: var(--color-important);
}

body.dark-mode .markdown-alert-warning {
    border-left-color: var(--color-warning);
}

body.dark-mode .markdown-alert-tip {
    border-left-color: var(--color-tip);
}

body.dark-mode .markdown-alert-caution {
    border-left-color: var(--color-caution);
}


/* Blockquote Fix for Dark Mode */
blockquote {
    background: #f9f9f9;
    border-left: 5px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.75em 15px;
    font-style: italic;
    color: #333;
    border-radius: 4px;
}

body.dark-mode blockquote {
    background: var(--darkmode-blockquote);
    border-left-color: var(--darkmode-blockquote-border);
    color: var(--darkmode-text);
}
.markdown-alert {
    padding: 0.5rem 1rem;
    margin-bottom: 16px;
    color: inherit;
    border-left: .25em solid #888;
  }
  [dir="rtl"] .markdown-alert{
    border-right: .25em solid #888;
    border-left: unset;

  }
  
  .markdown-alert>:first-child {
    margin-top: 0
  }
  
  .markdown-alert>:last-child {
    margin-bottom: 0
  }
  
  .markdown-alert .markdown-alert-title {
    display: flex;
    font-weight: 500;
    align-items: center;
    line-height: 1;
  }
  
  .markdown-alert .markdown-alert-title .octicon {
    margin-right: 0.5rem;
    display: inline-block;
    overflow: visible !important;
    vertical-align: text-bottom;
    fill: currentColor;
  }
  
  .markdown-alert.markdown-alert-note {
    border-left-color: var(--color-note);
  }
  
  .markdown-alert.markdown-alert-note .markdown-alert-title {
    color: var(--color-note);
  }
  
  .markdown-alert.markdown-alert-important {
    border-left-color: var(--color-important);
  }
  
  .markdown-alert.markdown-alert-important .markdown-alert-title {
    color: var(--color-important);
  }
  
  .markdown-alert.markdown-alert-warning {
    border-left-color: var(--color-warning);
  }
  
  .markdown-alert.markdown-alert-warning .markdown-alert-title {
    color: var(--color-warning);
  }
  
  .markdown-alert.markdown-alert-tip {
    border-left-color: var(--color-tip);
  }
  
  .markdown-alert.markdown-alert-tip .markdown-alert-title {
    color: var(--color-tip);
  }
  
  .markdown-alert.markdown-alert-caution {
    border-left-color: var(--color-caution);
  }
   [dir="rtl"] .markdown-alert.markdown-alert-caution {
        border-left-color: unset;

    border-right-color: var(--color-caution);
  }

  
  .markdown-alert.markdown-alert-caution .markdown-alert-title {
    color: var(--color-caution);
  }
  
  .markdown-alert {
    padding: 0.5rem 1rem;
    margin-bottom: 16px;
    color: inherit;
    border-left: .25em solid #888;
  }
  
  .markdown-alert>:first-child {
    margin-top: 0
  }
  
  .markdown-alert>:last-child {
    margin-bottom: 0
  }
  
  .markdown-alert .markdown-alert-title {
    display: flex;
    font-weight: 500;
    align-items: center;
    line-height: 1
  }
  
  .markdown-alert .markdown-alert-title .octicon {
    margin-right: 0.5rem;
    display: inline-block;
    overflow: visible !important;
    vertical-align: text-bottom;
    fill: currentColor;
  }
  
  .markdown-alert.markdown-alert-note {
    border-left-color: var(--color-note);
  }
  
  .markdown-alert.markdown-alert-note .markdown-alert-title {
    color: var(--color-note);
  }
  
  .markdown-alert.markdown-alert-important {
    border-left-color: var(--color-important);
  }
  
  .markdown-alert.markdown-alert-important .markdown-alert-title {
    color: var(--color-important);
  }
  
  .markdown-alert.markdown-alert-warning {
    border-left-color: var(--color-warning);
  }
  
  .markdown-alert.markdown-alert-warning .markdown-alert-title {
    color: var(--color-warning);
  }
  
  .markdown-alert.markdown-alert-tip {
    border-left-color: var(--color-tip);
  }
  
  .markdown-alert.markdown-alert-tip .markdown-alert-title {
    color: var(--color-tip);
  }
  
  .markdown-alert.markdown-alert-caution {
    border-left-color: var(--color-caution);
  }

    [dir="rtl"]  .markdown-alert.markdown-alert-caution {
    border-right-color: var(--color-caution);
  }

  [dir="rtl"] .markdown-alert.markdown-alert-caution {
    border-right-color: var(--color-caution);
}

  
  .markdown-alert.markdown-alert-caution .markdown-alert-title {
    color: var(--color-caution);
  }