header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header nav {
  flex-wrap: wrap;
}

.nav-left {
  order: 1;
}

.nav-right {
  order: 2;
  margin-top: 0.5em;
}

#brand {
  display: flex;
}

#brand .text {
  margin-left: 10px;
}

@media (max-width: 767px) {
  header nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nav-left {
    order: 1;
  }

  .nav-right {
    order: 2;
    margin-top: 0.5em;
  }

  #brand {
    flex-direction: row !important;
    justify-content: center;
    display: flex;
  }

  #brand .text {
    margin-left: 10px;
  }

  #brand .icon {
    width: 75px;
  }
}

body {
  max-width: 860px;
  line-height: 1.4;
  font-size: 16px;
}

a.tag,
a.tag:link,
a.tag:visited {
  background-color: #326f97;
  border-radius: 4px;
  color: #ffffff;
  margin-left: 5px;
  padding: 1px 5px;
  text-decoration: none;
  vertical-align: middle;
}

a.tag:hover {
  background-color: #245577;
  color: #ffffff;
  text-decoration: none;
}

a,
a:visited {
  color: #55bbff;
}

p>code {
  background: #1a1a1a;
  position: relative;
  font-size: 14px;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  vertical-align: baseline;
  background: #1a1a1a;
  color: lightblue;
}

pre {
  padding: 1px;
  border-radius: 8px;
  background: #111;
  border: 1px solid #2a2a2a;
}

pre code {
  display: block;
  overflow-x: auto;
  font-size: 10px;
  padding: 2px;
  border-radius: 8px;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
}
/*
Source - https://stackoverflow.com/a/14747656
Posted by Tieme, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-12, License - CC BY-SA 4.0
*/

img[alt=icon] { width: 27px; display: flex;}


/* Chroma — minimal dark, derived from blog palette */
.chroma { color:#888;background-color:#111;display:block;overflow-x:auto;font-size:10px;padding:15px;border-radius:8px; }
/* comments — barely there */
.chroma .c,.chroma .ch,.chroma .cm,.chroma .c1,.chroma .cs,.chroma .cp,.chroma .cpf { color:#454550 }
/* keywords — muted violet (#a78bfa desaturated) */
.chroma .k,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr,.chroma .kc { color:#7a6898 }
/* types/builtins — blue-gray */
.chroma .kt,.chroma .nb,.chroma .bp,.chroma .nc { color:#607a9a }
/* strings — muted teal (#3c96a3 darkened) */
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .se,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss { color:#3d7880 }
/* numbers — warm gray */
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,.chroma .mo { color:#7a7a60 }
/* functions — muted blue (#5bf darkened) */
.chroma .nf,.chroma .fm { color:#3d6e8a }
/* operators — subtle */
.chroma .o,.chroma .ow { color:#555 }
/* line highlight */
.chroma .hl { background-color:#1c1c1c }
/* line numbers */
.chroma .lnt,.chroma .ln { color:#333;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em }
.chroma .line { display:flex; }
.chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
.chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
.chroma .lnlinks { outline:none;text-decoration:none;color:inherit }