<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.2.0">
  <title>{{ title }}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    function setTheme(theme) {
        document.documentElement.setAttribute("data-theme", theme);
    }

    function detectColorSchemeOnLoad() {
        //local storage is used to override OS theme settings
        if (localStorage.getItem("theme")) {
            if (localStorage.getItem("theme") == "dark") {
                setTheme('dark')
            } else if (localStorage.getItem("theme") == "light") {
                setTheme('light')
            }
        } else if (!window.matchMedia) {
            //matchMedia method not supported
            setTheme('light')
            return false;
        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            //OS theme setting detected as dark
            setTheme('dark')
        } else {
            setTheme('light')
        }
    }
    detectColorSchemeOnLoad();
    document.addEventListener('DOMContentLoaded', function() {
        //identify the toggle switch HTML element
        const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

        //function that changes the theme, and sets a localStorage variable to track the theme between page loads
        function switchTheme(e) {
            if (e.target.checked) {
                localStorage.setItem('theme', 'dark');
                document.documentElement.setAttribute('data-theme', 'dark');
                toggleSwitch.checked = true;
            } else {
                localStorage.setItem('theme', 'light');
                document.documentElement.setAttribute('data-theme', 'light');
                toggleSwitch.checked = false;
            }
        }

        //listener for changing themes
        toggleSwitch.addEventListener('change', switchTheme, false);

        //pre-check the dark-theme checkbox if dark-theme is set
        if (document.documentElement.getAttribute("data-theme") == "dark") {
            toggleSwitch.checked = true;
        }

    }, false);
  </script>
  <style>
      :root {
        --color-bg: {{ config.get('color_bg', '#1f2022') }};
        --color-bg-code: {{ config.get('color_bg_code', '#1f2022') }};
        --color-text: {{ config.get('color_text', '#eefbfe') }};
        --color-link: {{ config.get('color_link', '#fb30c4') }}; 
        --color-accent: {{ config.get('color_accent', '#e1bd00c9') }};
        --overlay-brightness: {{ config.get('overlay_brightness', '.85') }};
        --body-width: {{ config.get('body_width', '800px') }};
      }
      [data-theme="dark"] {
        --color-bg: {{ config.get('color_bg', '#1f2022') }};
        --color-bg-code: {{ config.get('color_bg_code', '#1f2022') }};
        --color-text: {{ config.get('color_text', '#eefbfe') }};
        --color-link: {{ config.get('color_link', '#fb30c4') }}; 
        --color-accent: {{ config.get('color_accent', '#e1bd00c9') }};
        --overlay-brightness: {{ config.get('overlay_brightness', '.85') }};
        --body-width: {{ config.get('body_width', '800px') }};
      }
      [data-theme="light"] {
        --color-bg: {{ config.get('color_bg_light', '#eefbfe') }};
        --color-bg-code: {{ config.get('color_bg_code_light', '#eefbfe') }};
        --color-text: {{ config.get('color_text_light', '#1f2022') }};
        --color-link: {{ config.get('color_link_light', '#fb30c4') }}; 
        --color-accent: {{ config.get('color_accent_light', '#ffeb00') }};
        --overlay-brightness: {{ config.get('overlay_brightness_light', '.95') }};
      }

      html  { 
        font-family: "Space Mono", monospace;
        background: var(--color-bg);
        color: var(--color-text);
      }
      a { 
        color: var(--color-link);
      }
      .heading-permalink {
        font-size: .7em;
      }
      body {
        max-width: var(--body-width);
        margin: 5rem auto;
        padding: 0 .5rem;
        font-size: 1rem;
        line-height: 1.56;
      }
      blockquote {
        background: var(--color-bg);
        filter: brightness(var(--overlay-brightness));
        border-left: 5px solid var(--color-accent);
        padding-left: 1rem;
        margin: 1rem;
        }
      li.post {
        list-style-type: None;
        padding: .2rem 0;
      }
      pre {
        padding: 1rem;
        max-width: fit-content;
        overflow-x: auto;
      }


      .highlight  {
        background: var(--color-bg-code);
        color: var(--color-text);
        filter: brightness(var(--overlay-brightness));
      }
      .highlight .c { color: #8b8b8b } /* Comment */
      .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
      .highlight .k { color: #c678dd } /* Keyword */
      .highlight .l { color: #ae81ff } /* Literal */
      .highlight .n { color: #abb2bf } /* Name */
      .highlight .o { color: #c678dd } /* Operator */
      .highlight .p { color: #abb2bf } /* Punctuation */
      .highlight .ch { color: #8b8b8b } /* Comment.Hashbang */
      .highlight .cm { color: #8b8b8b } /* Comment.Multiline */
      .highlight .cp { color: #8b8b8b } /* Comment.Preproc */
      .highlight .cpf { color: #8b8b8b } /* Comment.PreprocFile */
      .highlight .c1 { color: #8b8b8b } /* Comment.Single */
      .highlight .cs { color: #8b8b8b } /* Comment.Special */
      .highlight .gd { color: #c678dd } /* Generic.Deleted */
      .highlight .ge { font-style: italic } /* Generic.Emph */
      .highlight .gi { color: #a6e22e } /* Generic.Inserted */
      .highlight .gs { font-weight: bold } /* Generic.Strong */
      .highlight .gu { color: #8b8b8b } /* Generic.Subheading */
      .highlight .kc { color: #c678dd } /* Keyword.Constant */
      .highlight .kd { color: #c678dd } /* Keyword.Declaration */
      .highlight .kn { color: #c678dd } /* Keyword.Namespace */
      .highlight .kp { color: #c678dd } /* Keyword.Pseudo */
      .highlight .kr { color: #c678dd } /* Keyword.Reserved */
      .highlight .kt { color: #c678dd } /* Keyword.Type */
      .highlight .ld { color: #e6db74 } /* Literal.Date */
      .highlight .m { color: #ae81ff } /* Literal.Number */
      .highlight .s { color: #e6db74 } /* Literal.String */
      .highlight .na { color: #a6e22e } /* Name.Attribute */
      .highlight .nb { color: #98c379 } /* Name.Builtin */
      .highlight .nc { color: #abb2bf } /* Name.Class */
      .highlight .no { color: #c678dd } /* Name.Constant */
      .highlight .nd { color: #abb2bf } /* Name.Decorator */
      .highlight .ni { color: #abb2bf } /* Name.Entity */
      .highlight .ne { color: #a6e22e } /* Name.Exception */
      .highlight .nf { color: #61afef } /* Name.Function */
      .highlight .nl { color: #abb2bf } /* Name.Label */
      .highlight .nn { color: #abb2bf } /* Name.Namespace */
      .highlight .nx { color: #a6e22e } /* Name.Other */
      .highlight .py { color: #abb2bf } /* Name.Property */
      .highlight .nt { color: #c678dd } /* Name.Tag */
      .highlight .nv { color: #abb2bf } /* Name.Variable */
      .highlight .ow { color: #c678dd } /* Operator.Word */
      .highlight .w { color: #abb2bf } /* Text.Whitespace */
      .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
      .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
      .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
      .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
      .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
      .highlight .sa { color: #e6db74 } /* Literal.String.Affix */
      .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
      .highlight .sc { color: #e6db74 } /* Literal.String.Char */
      .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
      .highlight .sd { color: #98c379 } /* Literal.String.Doc */
      .highlight .s2 { color: #98c379 } /* Literal.String.Double */
      .highlight .se { color: #ae81ff } /* Literal.String.Escape */
      .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
      .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
      .highlight .sx { color: #e6db74 } /* Literal.String.Other */
      .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
      .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
      .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
      .highlight .bp { color: #abb2bf } /* Name.Builtin.Pseudo */
      .highlight .fm { color: #61afef } /* Name.Function.Magic */
      .highlight .vc { color: #abb2bf } /* Name.Variable.Class */
      .highlight .vg { color: #abb2bf } /* Name.Variable.Global */
      .highlight .vi { color: #abb2bf } /* Name.Variable.Instance */
      .highlight .vm { color: #abb2bf } /* Name.Variable.Magic */
      .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

  /* Tab style starts here */
  .tabbed-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  border-radius: 0.1rem;
  }

  .tabbed-set > input {
  display: none;
  }

  .tabbed-set label {
  width: auto;
  padding: 0.9375em 1.25em 0.78125em;
  font-weight: 700;
  font-size: 0.84em;
  white-space: nowrap;
  border-bottom: 0.15rem solid transparent;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  cursor: pointer;
  transition: background-color 250ms, color 250ms;
  }

  .tabbed-set .tabbed-content {
  width: 100%;
  display: none;
  box-shadow: 0 -.05rem #ddd;
  }

  .tabbed-set input {
  position: absolute;
  opacity: 0;
  }

  /* fonts */
  h1 {
    font-weight: 700;
  }

  h1#title a {
    font-size: 16px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 3rem;
  }

  h1 {
    font-size: 2.5em;
    margin-top: 5rem;
  }

  h2 {
    font-size: 1.63rem;
    margin-top: 5rem;
  }



  p {
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1.5;
  }

  @media only screen and (max-width: 700px) {
    p {
        font-size: 18px;
    }
  }

  @media only screen and (max-width: 600px) {
    p {
        font-size: 16px;
    }
  }

  @media only screen and (max-width: 500px) {
    p {
        font-size: 14px;
    }
  }

  @media only screen and (max-width: 400px) {
    p {
        font-size: 12px;
    }
  }


  pre {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px; */
  }

  a {
    font-weight: 600;
    text-decoration-color: var(--color-accent);
    color: var(--color-link);
    padding: .3rem .5rem;
    display: inline-block;
  }

  .admonition {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
  }

  .admonition.note {
    color: #79d3e6;
    background-color: #123c52;
    border-color: #1c7183;
  }

  .admonition.warning {
    color: #e6ca7a;
    background-color: #4f4409;
    border-color: #855c0d;
  }

  .admonition.danger {
    color: #e67471;
    background-color: #461c1c;
    border-color: #6e2b33;
  }

  .admonition-title {
    font-weight: bold;
    text-align: left;
  }

  table {
    margin: 1rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
  }
  table thead th {
    border: solid 1px var(--color-text);
    padding: 10px;
    text-align: left;
  }

  table tbody td {
    border: solid 1px var(--color-text);
    padding: 10px;
  }
  .theme-switch {
  z-index: 10;
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;

    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
    margin-left: auto;
    position: fixed;
    right: 1rem;
    top: 1rem;
  }

  .theme-switch input {
  display:none;

  }

  .slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  }

  .slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
  }

  input:checked + .slider {
  background-color: #343434;
  }
  input:checked + .slider:before {
  background-color: #848484;
  }

  input:checked + .slider:before {
  transform: translateX(26px);
  }

  .slider.round {
  border-radius: 34px;
  }

  .slider.round:before {
  border-radius: 50%;
  }
  </style>
</head>
<body>

  <div>
    <label id="theme-switch" class="theme-switch" for="checkbox-theme" title='light/dark mode toggle'>
      <input type="checkbox" id="checkbox-theme">
      <div class="slider round"> </div>
    </label>
  </div>
  <section class='title'>
  <h1 id='title'>
    {{ title }}
      <a href="{{ edit_link }}" alt="edit post url" title="edit this post">
          <span role="img" aria-label="">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              width="30" height="30" viewBox="0 0 494.936 494.936" style="enable-background:new 0 0 494.936 494.936;"
              xml:space="preserve" fill='currentcolor'>

            <g>
              <g>
                <path d="M389.844,182.85c-6.743,0-12.21,5.467-12.21,12.21v222.968c0,23.562-19.174,42.735-42.736,42.735H67.157
                  c-23.562,0-42.736-19.174-42.736-42.735V150.285c0-23.562,19.174-42.735,42.736-42.735h267.741c6.743,0,12.21-5.467,12.21-12.21
                  s-5.467-12.21-12.21-12.21H67.157C30.126,83.13,0,113.255,0,150.285v267.743c0,37.029,30.126,67.155,67.157,67.155h267.741
                  c37.03,0,67.156-30.126,67.156-67.155V195.061C402.054,188.318,396.587,182.85,389.844,182.85z"/>
                <path d="M483.876,20.791c-14.72-14.72-38.669-14.714-53.377,0L221.352,229.944c-0.28,0.28-3.434,3.559-4.251,5.396l-28.963,65.069
                  c-2.057,4.619-1.056,10.027,2.521,13.6c2.337,2.336,5.461,3.576,8.639,3.576c1.675,0,3.362-0.346,4.96-1.057l65.07-28.963
                  c1.83-0.815,5.114-3.97,5.396-4.25L483.876,74.169c7.131-7.131,11.06-16.61,11.06-26.692
                  C494.936,37.396,491.007,27.915,483.876,20.791z M466.61,56.897L257.457,266.05c-0.035,0.036-0.055,0.078-0.089,0.107
                  l-33.989,15.131L238.51,247.3c0.03-0.036,0.071-0.055,0.107-0.09L447.765,38.058c5.038-5.039,13.819-5.033,18.846,0.005
                  c2.518,2.51,3.905,5.855,3.905,9.414C470.516,51.036,469.127,54.38,466.61,56.897z"/>
              </g>
            </g>
            </svg>
          </span>
      </a>
  </h1>
  </section>
  <main>
  {{ body }}
  </main>
  <footer>
    © {{ today.year }}
  </footer>
</body>
</html>
