---
layout: compress
---

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: " en " }}">

{% include header.html %}

<body data-theme="{{ site.mode }}" class="notransition">

  <script>
    const body = document.body;
    const data = body.getAttribute("data-theme");

    const initTheme = (state) => {
      if (state === "dark") {
        body.setAttribute("data-theme", "dark");
      } else if (state === "light") {
        body.removeAttribute("data-theme");
      } else {
        localStorage.setItem("theme", data);
      }
    };
 
    initTheme(localStorage.getItem("theme"));
    
    setTimeout(() => body.classList.remove("notransition"), 75);
  </script>

  {% include navbar.html %}
  <div class="wrapper">
    <header class="header">
      <h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
    </header>
    <main class="page-content" aria-label="Content">
      {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=4 h_max=4 %}
    </main>
  </div>
  {% include footer.html %}
</body>

</html>
