<style>
  #demo-server-info {
      padding: 8px;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      height: 64px;
      width: 100vw;
      background-color: whitesmoke;
      border-top: 2px solid gray;
      overflow: hide;
      margin: 0px;
      z-index: 1;
  }
  #demo-server-info.show {
      max-height: 45vh;
      height: 500px;
      overflow: scroll;
  }
  #demo-activity {
      height:300px
  }

  #demo-activity div {
      vertical-align: top
  }

  #demo-activity ol li {
      list-style-position: inside;
  }

  #demo-canvas {
      margin-bottom: 500px;
      padding-top: 12px;
  }

  @media (prefers-color-scheme: dark) {
    #demo-server-info {
      background-color: var(--footerBackground);
    }
  }
</style>
<script>
  function toggleRequestInfo() {
      var classList = document.getElementById("demo-server-info").classList;
      classList.toggle("show");
      if (classList.contains('show')) {
          document.getElementById("request-info-toggler").innerHTML = "&downarrow; Hide"
      } else {
          document.getElementById("request-info-toggler").innerHTML = "&uparrow; Show"
      }
  }
</script>
<div id="demo-server-info">
  <div>Server Requests<span id="request-count"></span> <a id="request-info-toggler" onclick="toggleRequestInfo()" style="cursor: pointer">&uparrow; Show</a></div>
  <div id="demo-activity" class="row">
      <div class="3 col" >
          <ol id="demo-timeline" reversed>
          </ol>
      </div>
      <div id="demo-current-request" class="9 col">
      </div>
  </div>
</div>

<h2><a class="zola-anchor" href="#demo" aria-label="Anchor link for: demo">🔗</a>Demo</h2>
<div id="demo-canvas">
</div>
