#logger {
    min-width: 350px;
    background-color: #111;
    border:none;
    color: #eee;
    min-height: 700px;
    font-size: 0.8em;
}

/*
Container Flex Body
*/
.container_flex {
  margin-top: 10px;  
  display: flex;
  flex-direction: row;
}
.container_flex .column {
  flex: 0 1 auto;  
  margin: 5px;
  padding: 10px;
  border: 1px solid #eee; 
/*  background-color: #fff;  */
}


/*
 Navigation via Pico and without JavaScript
*/
    :root{
      --panel-width: min(360px, 82vw);
      --transition: 320ms cubic-bezier(.2,.9,.25,1);
    }

    /* Basic header layout */
    header.site-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.5rem 1rem;
      position:relative;
      z-index:20;
    }

    nav.main-nav ul {
      display:flex;
      gap:.75rem;
      margin:0;
      padding:0;
      list-style:none;
      align-items:center;
    }

    .burger {
      display:none;
      background:transparent;
      border:0;
      cursor:pointer;
      gap:.5rem;
      align-items:center;
      font:inherit;
      text-decoration:none;
      color: inherit;
    }
    @media (max-width:720px) {
      nav.main-nav { display:none; }
      .burger { display:inline-flex; }
    }

    /* Offcanvas container used as a fragment target.
       It is fixed and spans the viewport but is inert when not targeted. */
    #menu {
      position: fixed;
      inset: 0;
      pointer-events: none;   /* ignore clicks when closed */
      z-index: 999;
    }

    /* When targeted, enable interactions */
    #menu:target {
      pointer-events: auto;
    }

    /* Backdrop is a real element (anchor) that closes the menu by linking to '#' */
    .offcanvas__backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity var(--transition) ease;
      pointer-events: none;
      z-index: 1000; /* behind the panel */
      text-decoration: none; /* its an <a>, so remove underline */
    }

    /* Reveal backdrop only when #menu is targeted */
    #menu:target .offcanvas__backdrop {
      opacity: 1;
      pointer-events: auto; /* clickable to close */
    }

    /* Panel (slides in from right) */
    .offcanvas__panel {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: var(--panel-width);
      max-width: 100%;
      background: var(--surface, #fff);
      box-shadow: -8px 0 28px rgba(0,0,0,0.16);
      transform: translateX(100%); /* hidden */
      transition: transform var(--transition);
      z-index: 1001; /* above backdrop */
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      outline: none;
    }

    /* Slide panel in when targeted */
    #menu:target .offcanvas__panel {
      transform: translateX(0);
    }

    /* Panel header */
    .offcanvas__header {
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:1rem;
      border-bottom:1px solid rgba(0,0,0,0.06);
      flex: 0 0 auto;
    }

    .offcanvas__close {
      margin-left:auto;
      background:transparent;
      border:0;
      cursor:pointer;
      padding:.25rem;
      text-decoration:none;
      color: inherit;
    }

    /* Navigation */
    .offcanvas__nav {
      padding:1rem;
      overflow:auto;
    }
    .offcanvas__nav ul {
      display:flex;
      flex-direction:column;
      gap:.5rem;
      list-style:none;
      margin:0;
      padding:0;
    }

    /* Focus styles for keyboard users */
    .offcanvas__panel a:focus,
    .offcanvas__panel button:focus {
      outline: 3px solid Highlight;
      outline-offset: 2px;
    }

    /* Prevent the page from jumping when opening the fragment:
       because the panel is fixed, the viewport doesn't actually scroll,
       but some browsers may focus the targeted element. Keep smooth behaviour predictable. */
    html { scroll-behavior: auto; }

    /* Small demo spacing */
    main.container { padding-top: 1rem; }