:root {
	--code-bg: #dbdbdb;
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color: #118bee;
  --color-accent: #bcdde3;
  --color-bg: #fff;
  --color-bg-secondary: #f8f8f8;
  --color-secondary: #920de9;
  --color-secondary-accent: #555;
  --color-shadow: #f4f4f4;
  --color-text: #151515;
  --color-hyperlink: #133c8a;
  --logo-color: #131516;
  --color-petrol: #014446;
  --color-text-secondary: #999;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
  --font-serif: serif;
  --font-sans-serif: "Liberation Sans", "DejaVu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-monospace: "Liberation Mono", "DejaVu Sans Mono", monospace;
  --bee-emoji-svg: url('data:image/svg+xml,%3Csvg enable-background="new 0 0 47.5 47.5" version="1.1" viewBox="0 0 47.5 47.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="c"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3CclipPath id="b"%3E%3Cpath d="m8.719 17c0-6.133 4.603-13 10.281-13 5.679 0 10.281 6.867 10.281 13s-4.602 8.923-10.281 8.923c-5.678 0-10.281-2.79-10.281-8.923"/%3E%3C/clipPath%3E%3CclipPath id="a"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform="matrix(1.25,0,0,-1.25,0,47.5)"%3E%3Cg clip-path="url(%23c)"%3E%3Cg transform="translate(20,4)"%3E%3Cpath d="m0 0c0-1.657-0.447-3-1-3-0.552 0-1 1.343-1 3s0.448 3 1 3c0.553 0 1-1.343 1-3" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(26.753 35.753)"%3E%3Cpath d="m0 0c-0.586 0.586-1.693 0.428-2.475-0.354-0.611-0.611-1.948-2.53-2.222-3.619-0.884 0.195-1.93 0.22-3.056 0.22-1.125 0-2.172-0.025-3.055-0.219-0.275 1.089-1.611 3.007-2.223 3.618-0.781 0.782-1.888 0.94-2.474 0.354s-0.428-1.693 0.353-2.475c0.511-0.51 1.937-1.529 3.027-2.011-0.82-0.533-1.315-1.451-1.315-3.032 0-3.589 2.546-7.312 5.687-7.312 3.142 0 5.688 3.723 5.688 7.312 0 1.581-0.496 2.499-1.316 3.032 1.091 0.482 2.517 1.5 3.027 2.011 0.782 0.782 0.94 1.889 0.354 2.475" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(29.281 17)"%3E%3Cpath d="m0 0c0-6.134-4.603-13-10.281-13s-10.281 6.866-10.281 13c0 6.133 4.603 8.923 10.281 8.923s10.281-2.79 10.281-8.923" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23b)"%3E%3Cpath d="m30 18h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 10h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 2h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647-7.858-10-12-10s-6 5.354-6 8 1.858 1.584 6 1.584c4.143 0 12 3.061 12 0.416" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647 7.857-10 12-10s6 5.354 6 8-1.857 1.584-6 1.584-12 3.061-12 0.416" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23a)"%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647-7.858-8.584-12-8.584s-6 2.443-6 5.089 1.858 4.495 6 4.495c4.143 0 12 1.645 12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647 7.857-8.584 12-8.584s6 2.443 6 5.089-1.857 4.495-6 4.495-12 1.645-12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(3,18)"%3E%3Cpath d="m0 0c-0.552 0-1 0.447-1 1 0 0.551 0.446 0.999 0.998 1 0.048 0 4.948 0.07 13.596 3.914 0.505 0.227 1.095-2e-3 1.32-0.508 0.224-0.505-3e-3 -1.095-0.508-1.32-9.089-4.039-14.193-4.086-14.406-4.086" fill="%2399aab5"/%3E%3C/g%3E%3Cg transform="translate(35,18)"%3E%3Cpath d="m 0,0 c -0.213,0 -5.316,0.047 -14.406,4.086 -0.505,0.225 -0.732,0.815 -0.508,1.32 0.225,0.505 0.817,0.732 1.32,0.508 C -4.946,2.07 -0.046,2 0.003,2 0.554,1.997 1,1.548 0.999,0.997 0.997,0.446 0.551,0 0,0" fill="%2399aab5"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A');
}

@media (prefers-color-scheme: dark) {
  :root {
		--code-bg: #515151;
    --color-accent: #424242;
    --color-bg: #333333;
    --color-bg-secondary: #424242;
    --color-secondary: #6df216;
    --color-secondary-accent: #f4f4f4;
    --color-shadow: #bbbbbb20;
    --color-text: #fff;
    --color-text-secondary: #666;
    --color-hyperlink: #6c98ff;
    --logo-color: white;
    --color-petrol: #0b3435;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  font-family: var(--font-sans-serif);
  height: 100%;
}

body {
  font-size: 1em;
  color: var(--color-text);
/*  color: #202020; */
/*  color: #404040;*/
  background: radial-gradient(circle farthest-side at 0% 50%,var(--color-bg) 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,var(--color-bg-secondary) 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(var(--color-bg) 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,var(--color-bg) 0)0 0, linear-gradient(150deg,var(--color-bg) 24%,var(--color-bg-secondary) 0,var(--color-bg-secondary) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--color-bg-secondary) 0,var(--color-bg-secondary) 76%,var(--color-bg) 0)0 0, linear-gradient(30deg,var(--color-bg) 24%,var(--color-bg-secondary) 0,var(--color-bg-secondary) 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,var(--color-bg-secondary) 0,var(--color-bg-secondary) 76%,var(--color-bg) 0)0 0, linear-gradient(90deg,var(--color-bg-secondary) 2%,var(--color-bg) 0,var(--color-bg) 98%,var(--color-bg-secondary) 0%)0 0 var(--color-bg);
  background-size: 40px 60px;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

a {
  color: var(--color-hyperlink);
}

a:visited {
  color: var(--color-hyperlink);
}

em {
  letter-spacing: 0.011em;
}

header {
  border-bottom: 1px solid #969595;
  display: flex;
  justify-content: space-between;
}

header nav {
  margin: auto 0 0 auto;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}

header nav a {
  font-size: 1.3rem;
  font-family: var(--font-sans-serif);
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

header nav a::after {
  border: 1px solid var(--color-bg-secondary);
  filter: invert(10%);
  content: " ";
  width: 100%;
  height: 0 !important;
  display: block;
  margin-top: -2px;
}

@media (prefers-color-scheme: dark) {
  header nav a:first-child::after, header nav a + a:not(:last-child)::after {
    filter: invert(20%);
  }
}

footer {
  margin-top: 1rem;
  padding: .5rem 0 1.2rem 0;
  border-top: 1px solid #969595;
  font-size: 1rem;
  color: var(--color-secondary-accent);
}

h1, h2, h3, h4 {
  font-variant-caps: small-caps;
}

h5, h6 {
  color: var(--color-text-secondary);
  text-transform: lowercase;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans-serif);
  max-width: max-content;
  padding-right: .5rem;
  background: var(--color-bg);
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
}

h1.title {
  margin-bottom: 4px;
  padding: .7rem;
  min-width: 100%;
  width: 100%;
}

ul {
  list-style: square;
  padding-left: 0px;
  list-style-position: inside;
}

li ul {
  padding-left: 1.2rem;
}

li::marker {
  color: #2A9;
}

.subtitle {
    /* Add extra padding to align with the title above */
  padding-left: .7rem;
}

/* Article/posts styling */
main.article {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0;
}

main.article article > :first-child {
 /* header div already has padding-bottom */
  margin-top: 0;
  padding-top: 0;
}

main.article article p {
  overflow-x: hidden;
}

main.article article p:hover {
  overflow-x: initial;
}

main.article .title {
  border-bottom: double 3px #d5d5d5;
  border-left: double 3px #d5d5d5;
  border-radius: 6px;
  background-color: var(--color-bg-secondary);
}

@media (min-width: 1280px) {
  #bee-emoji-svg, #bee-emoji-svg::before {
    display: inline-block !important;
  }

  .logo:hover, .logo:hover::after {
    display: inline !important;
  }

  main {
    z-index: 1;
    margin: 0 auto;
    padding: 0;
  }

  header {
    margin: 2.0rem 0 3.5rem 3rem;
    padding: 0.2rem 0;
  }

  header nav a {
    margin: 0 0 0 1.2rem;
    display: inline;
  }

  footer {
    text-align: right;
  }

  .logo {
    text-align: left;
  }

  .logo a {
    font-size: 6rem;
  }

  img.fit {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  main.article {
    display: grid;
    grid-template-columns: 2fr minmax(50em, 1fr) 2fr;
    grid-column-gap: 10px;
    grid-row-gap: 3px;
    grid-auto-rows: minmax(auto, 0fr);
  }

  main.article article {
    padding-right: 4rem;
  }
}

main.article div.left {
  grid-column: 1/ span 1;
  grid-row: 2 / 3;
  min-width: 180px;
  order: 2;
  padding-left: 2em;
  padding-right: 2em;
}

main.article article {
  line-height: var(--line-height);
  text-decoration-color: #0000001a;
  grid-column: 1 / span 3;
  grid-row: 2 / 3;
  order: 1;
  display: grid;
  grid-template-columns: minmax(5vw, 1fr) minmax(auto, 65ch) minmax(5vw, 1fr);
}

article > * + * {
  margin-bottom: 1rem;
  margin-top: 0;
}

main.article div.right {
  grid-column: 3/ span 1;
  grid-row: 2 / 3;
  min-width: 180px;
  order: 3;
  padding-left: 2em;
  padding-right: 2em;
}

main.article article > figure,video,div.sourceCode {
  grid-column: 1/ span 3;
  margin: 0 auto 1rem auto;
  max-width: max-content;
  width: 100%;
  overflow-x: auto;
  background: var(--color-bg);
}

main.article article > p,hr,blockquote,dl,ul,ol,h1,h2,h3,h4,h5,h6,table,div.manual-text {
  grid-column: 2/ span 1;
  background: var(--color-bg);
}

main section {
  background: var(--color-bg);
}

main section.header {
  color: var(--color-secondary-accent);
  font-size: 0.8rem;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: 100%;
  padding-bottom: .5rem;
  place-self: center;
  margin-bottom: 1rem;
}

main.article article p:first-child {
  margin-top: 0;
}

main.article article > p:first-child::first-letter {
  float: left;
  font-size: 500%;
/*  font-style: italic;*/
  height: 1rem;
  line-height: 1rem;
  margin: 0px;
  padding: 0 .05em 0 0;
  text-shadow: #d9d4d4 .05em .05em;
}

.logo a {
  font-size: 3.5rem;
  color: var(--logo-color);
  font-weight: bold;
  text-decoration: none;
}
/*
.sidenote-left, .sidenote-right {
    display: inline-block;
    width: 48%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 7pt;
    line-height: 1.3;
    vertical-align: baseline;
}
*/

/* Typography */
code {
  vertical-align: baseline;
  display: inline-block;
  padding: 2px 3px 4px 3px;
  font-weight: 800;
  color: #006266;
  line-height: 1;
  font-family: var(--font-monospace);
}

code,
samp {
  background-color: var(--code-bg);
  color: black;
  border-radius: var(--border-radius);
  text-align: var(--justify-normal);
  vertical-align: baseline;
  padding: .15rem .3em .15rem .3rem;
}

code:not(.sourceCode) {
  display: inline-flex;
}

p {
  text-align: justify;
  text-align-last: left;
  text-justify: none;
  hyphens: auto;
}

kbd:hover {
  box-shadow: 0 1px 0 0.5px var(--color-text-secondary);
  transform: scale(95%) translateY(2px);
}

kbd {
  font-family: monospace;
  border: var(--color-text) 1px solid;
  border-radius: 0.25rem;
  box-shadow: 0 2px 0 1px var(--color-text-secondary);
  cursor: default;
  line-height: 1em;
  min-width: 0.75rem;
  display: inline-flex;
  text-align: center;
  padding: 2px 5px;
  /*! position: relative; */
  top: -1px;
  transform: scale(95%);
}

/* for keys that aren't entirely square */
.thin-kbd.□.▭ {
  padding-right: 7px;
  padding-left: 8px;
}

.sourceCode code  {
  font-weight: unset;
}

@media (min-width:320px) {
  #bee-emoji-svg, #bee-emoji-svg::before, .logo:hover::after {
    display: none;
  }
    body {
        padding:0 8px;
    }
    header {
        margin:.5rem 0 2.0rem 0;
    }
    footer {
        text-align:center;
    }
    .logo a {
        font-size:3.5rem;
    }
    header nav {
        padding-bottom: .7rem;
    }
    header nav a {
        display:inline;
        margin:0 0.6rem;
        font-size:1.3rem;
        width: min-content;
    }
    .screenshots {
      flex-direction: column;
    }
}

@media (min-width:1140px) {
    main {
        z-index: 1;
        padding:0;
    }
    body {
        padding:0 5%;
      }
    header nav a {
        margin:0 0 0 1.2rem;
        display:inline;
        white-space: nowrap;
    }
    footer {
        text-align:right;
    }
    .screenshots {
      flex-direction: row;
    }
}


img.fit {
    width: 100%;
    height: auto;
    object-fit: cover;
}

img.full-width {
    width: 100%;
	max-width: max-content;
    height: auto;
    object-fit: cover;
}

.fit-right {
    margin-left: 10%;
}
.fit-left {
    margin-right: 10%;
}

.logo {
    margin: auto auto 0 0;
}

.logo-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

figure {
    margin: 0 1.2rem 1.2rem 0;
}


.bold {
    font-weight: 800;
}

figcaption {
  font-size: 8pt;
  font-weight:bolder;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px outset var(--color-bg-secondary);
  border-radius: 0 0 2px 2px;
  margin-top: -3px;
  padding-bottom: 7px;
  padding-left: 2%;
  padding-right: 5px;
  padding-top: 5px;
  min-width: 100%
}

figcaption a {
  text-decoration: inherit;
  color: inherit;
}

figcaption a:visited {
  color: inherit;
}

/* Index styling */
.wrapper {
  display: grid;
  grid-auto-columns: minmax(100px, auto);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

 h1, h2, h3, h4, h5, h6 {
  /*border-bottom: 2px inset #000;
  border-left: 1px solid #b2b2b2;
  border-right: 1px solid #b2b2b2;
  border-top: 1px solid #c8c8c8;
  border-style: outset;
    border-radius: 3px;*/
  background: var(--color-bg);
  margin-top: 0;
  max-width: inherit;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  background: var(--color-bg);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  background: var(--color-bg);
  color: var(--color-text);
}

@media (max-width:1280px) {
/*.wrapper > *:first-child  {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1;
  grid-row: 1 / 1;
}*/
section.index-intro {
  width: 100%;
}

section.index-intro, section.index-why, section.index-install, section.index-build, section.index-features, section-announcements {
  /*border-bottom: 2px solid #6c6e6f;*/
  min-width: 100%;
  margin-bottom: 10px;
}
}

@media (min-width:1280px) {
.wrapper > *:first-child  {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 1;
  grid-template-areas:
  "term term install install build"
  "term term why why why"
  "screenshots screenshots features features announcements"
  "screenshots screenshots features features announcements";
  grid-column-gap: 3rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(2, min-content) repeat(2, auto);
  grid-template-rows: repeat(2, min-content) repeat(2, auto);
}
section.index-why > div {
  display: grid;
  grid-template-columns: 11fr 8fr;
  box-sizing: border-box;
  grid-column-gap: 3rem;
  padding: 0 1rem 0 0;
}
section.index-why > div > * + * {
  margin-bottom: .5rem;
  margin-top: 0;
}


section.index-install ol {
  margin-bottom: 0px;
}

section.index-install ol > li + li {
  margin-bottom: .2rem;
  margin-top: 0;
}

section.index-install, section.index-build {
  margin-bottom: 20px;
}

section.index-intro {
  width: 37vw;
}
}

section h1 {
  margin-top: 0px;
}

h1 {
/*  border-bottom: 2px inset #000;*/
  max-width: max-content;
/*border-left: 1px solid #b2b2b2;*/
 /* border-radius: 2px;*/
  background: var(--color-bg);
}

section.index-intro {
  grid-area:term;
}

section.index-why {
  grid-area: why;
}

section.index-features {
  grid-area: features;
}

section.index-install {
  grid-area: install;
}

section.index-build {
  grid-area: build;
}

section.index-announcements {
  grid-area: announcements;
}

ul.index-announcement-list {
  margin-bottom: 0;
  height: min-content;
}

section.index-install > h2 {
  margin-bottom: 0;

}

section.index-install details > summary {
    display: inline-block;
}

section.index-install details > summary::after {
    content: " (help) ";
    color: var(--color-hyperlink);
    font-size: .6rem;
    cursor: pointer;
}

section.index-install details > summary > code {
  color: var(--color-petrol);
    font-size: 119%;
}

.index-screenshots {
  grid-area: screenshots;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 5px;
  align-items: stretch;
  margin: 0;
}

.index-screenshots > * {
  flex: initial;
  flex: 0 22%;
  flex-shrink: 1;
}

.index-screenshots a {
  height: 100%;
}

.index-screenshots img {
  object-fit: contain;
  width: 100%;
  height:inherit;
  background: #444;
}

.xterm-title {
  margin: initial;
  background: #22AA99;
  color: var(--color-bg);
  font-size: .8rem;
  padding: 0.4em 0rem;
  width: auto;
  min-width: inherit;
  font-weight:800;
  word-break: keep-all;
  padding-left: .5rem;
	font-family: var(--font-sans-serif);
  text-shadow: 0px 1px var(--color-secondary-accent);
}
h1.xterm {
  font-family: revert;
  font-variant-caps: initial;
  max-width: initial;
  width: initial;
  border: initial;
  padding: initial;
  overflow: hidden;
  font-size: 12px;
  direction: ltr;
  text-align: left;
  background: #22AA99;
  padding: 0px;
  border: 1px solid black;
  width: inherit;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

#main_svg {
  width: inherit;
  border: 1px solid black;
  display: block;
}
/* Index styling end */







/* lightbox */




/*Eliminates padding, centers the thumbnail */

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

figure:not(.lightbox-target) {
    display: flex;
    flex-direction: column;
	max-width: max-content;
	background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23b9b9b9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-color: #ccc;
}
figure:not(.lightbox-target) > * {
    align-self: center;
}
.lightbox-target {
    z-index:5;
    pointer-events: none;
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* overflow: hidden; */
    overflow-x: scroll;

    padding: 0;
    text-align: center;
    margin:0;
}


/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
    margin: auto;
    max-height: 0%;
    max-width: 0%;
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    box-sizing: border-box;
    z-index: 2;
}

.lightbox-target figcaption {
    margin: auto;
    padding: 18px;
    color: #5b5e60;
    background: #f6f6f6;
    border: 3px solid #ededed;
    z-index: 3;
    font-size: 2rem;
    pointer-events: none;
    /* fallback in case max-content is not supported by the browser */
    max-width: 100%;
    max-width: max-content;
    width: auto;
    height: min-content;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
    width:50px;
    height:50px;
    color: white;
    opacity: 1;
    text-decoration: none;
    pointer-events: auto;
    z-index: 4;
    font-size: 2.5rem;
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
}

.lightbox-target:target img {
    max-height: 80vh;
    /* fallback in case max-content is not supported by the browser */
    max-width: 100%;
    max-width: max-content;
    height: auto;
    width: auto;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}


/* IBM's colorblind safe palette */

.cornflower-blue {
  color: #648FFF;
}

.purple {
  color: #785EF0;
}

.cerise {
  color: #DC267F;
}

.blaze-orange {
  color: #FE6100;
}

.amber {
  color: #FFB000;
}

.dull-red {
  color: #CC6677;
}

.cyan {
  color: #44AA99;
}

.green {
  color: #117733;
}

.float_left_img {
  max-width: 25%;
  min-width: 5vw;
  float: left;
  padding: .4em;
}

.screenshots-page {
  display: flex;
  flex-wrap: wrap;
}

.screenshots-page > * {
  flex: 1 0 30%;
  min-width: 200px;
}

.screenshots-page > figure > a {
  height: 100%;
  background: #1c1c1c;
}

.screenshots-page > figure > a > img {
  height: inherit;
  width: 100%;
  object-fit: contain;
  background: #444;
}

.screenshots-page > figure:not(.lightbox-target):nth-child(odd) > a > img {
  background-color: #cccccc;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23b9b9b9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

code.Nm::after {
  /*content: " 🐝";*/
  content: "  ";
  background-image: var(--bee-emoji-svg);
  background-repeat: no-repeat;
  height: .9rem;
  width: .9rem;
  filter: hue-rotate(170deg) grayscale(42%);
  transform: translate(1px, -1px);
  margin-bottom: -2px;
}


/*! * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-little
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
code.Nm::after {
  display: inline-block;
  transform-origin: center center;
}

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused;
}

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, code.Nm:hover::after,
.shake-trigger:hover code.Nm::after {
  animation-play-state: running;
}

@keyframes shake-little {
  2% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  4% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  6% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  8% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  10% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  12% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  14% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  16% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  18% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  20% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  22% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  24% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  26% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  28% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  30% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  32% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  34% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  36% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  38% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  40% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  42% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  44% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  46% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  48% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  50% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  52% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  54% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  56% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  58% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  60% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  62% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  64% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  66% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  68% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  70% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  72% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  74% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  76% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }

  78% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  80% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  82% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  84% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  86% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  88% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  90% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  92% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }

  94% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  96% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }

  98% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}

code.Nm:hover::after,
.shake-trigger:hover code.Nm::after, .shake-little.shake-freeze, .shake-little.shake-constant {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#bee-emoji-svg:hover::before,
.shake-trigger:hover .shake-little.shake-freeze, .shake-little.shake-constant {
  animation: shake-little 50ms ease-in-out running 120,  harvest 10s 5500ms running steps(8, jump-both) infinite;
}

.logo::after {
  transition: all 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}

.logo:hover::after {
  content: "🌸";
  height: 3.5rem;
  width: 3.5rem;
  font-size: 2rem;
  position: relative;
  right: 3rem;
  z-index: -1;
  transition: all 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}

#bee-emoji-svg:hover::before {
  transform: translateY(26px) scale(.5);
  transition: transform 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}

#bee-emoji-svg::before {
  content: " ";
  filter: hue-rotate(170deg) grayscale(42%);
  background-image: var(--bee-emoji-svg);
  background-repeat: no-repeat;
  height: 3.5rem;
  width: 3.5rem;
  transition: transform 6.1s cubic-bezier(.68,-0.55,.27,1.55);
}

#bee-emoji-svg {
  height: 3.5rem;
  width: 3.5rem;
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="25px" height="25px"%3E%3Cpath fill="%2377B255" d="M28.938 27.441c-2.554-.89-8.111-.429-9.938 1.331V17c0-.553-.447-1-1-1s-1 .447-1 1v11.772c-1.827-1.76-7.384-2.221-9.938-1.331-.741.259 5.264 8.749 9.507 4.507.168-.168.306-.33.431-.49V35c0 .553.447 1 1 1s1-.447 1-1v-3.542c.125.16.263.322.431.49 4.243 4.242 10.248-4.248 9.507-4.507z"/%3E%3Cpath fill="%23CCD6DD" d="M12.562 25.65c-.619-.266-1.107-.837-1.378-1.513l-1.266-3.306-3.258-1.393c-1.336-.574-1.876-1.922-1.304-3.259l1.362-3.181-1.364-3.269c-.541-1.35.15-2.868 1.5-3.408l3.272-1.281 1.449-3.384C12.148.32 13.496-.22 14.833.352l3.258 1.396L21.358.382c.675-.271 1.411-.276 2.03-.011.619.265 1.114.819 1.385 1.494l1.274 3.29 3.309 1.417c1.336.572 1.875 1.921 1.305 3.258l-1.451 3.384 1.365 3.267c.541 1.35-.15 2.866-1.5 3.407l-3.271 1.281-1.363 3.183c-.572 1.336-1.922 1.877-3.258 1.305l-3.308-1.417-3.267 1.364c-.676.271-1.427.311-2.046.046z"/%3E%3Cpath fill="%23E1E8ED" d="M29.356 6.572l-3.309-1.417-.055-.143c-1.565 1.337-5.215 4.354-5.215 4.354l.007.123C20.015 8.879 19.057 8.5 18 8.5V1.709L14.833.353c-1.337-.572-2.685-.032-3.258 1.304l-1.449 3.384-.061.024 4.753 4.754c-.814.813-1.318 1.938-1.318 3.181H6.717l-1.361 3.178c-.572 1.337-.032 2.686 1.304 3.259l3.258 1.394.002.006 4.496-5.142c.822 1.09 2.115 1.805 3.584 1.805h.005c.006 1.979.015 5.273.012 6.801l3.164 1.356c1.336.572 2.686.031 3.258-1.305l1.362-3.18-5.192-4.517c1.14-.816 1.89-2.145 1.89-3.654 0-.071-.018-.137-.021-.208 1.802.182 4.951.472 6.822.642l-.092-.22L30.66 9.83c.571-1.337.031-2.686-1.304-3.258z"/%3E%3Ccircle fill="%23F4900C" cx="18" cy="13" r="5"/%3E%3C/svg%3E'), auto;
}

#bee-emoji-svg:hover {
  animation: flowercursor 0.65s infinite;
}

.sakura {
  opacity: 0;
  position: fixed;
}

.envelope {
  filter: grayscale(1);
  opacity: 0;
  position: fixed;
}

#bee-emoji-svg:hover .sakuraA, .sakuraA:hover {
  opacity: 1;
  animation-name: none;
  transition: opacity 0.01s linear;
  font-size: 1em;
}

#bee-emoji-svg:hover #envelopeA, #envelopeA:hover {
  animation-name: envelope-flyA;
  animation-delay: 3.5s;
}

#bee-emoji-svg:hover #envelopeB, #envelopeB:hover {
  animation-name: envelope-flyB;
  animation-delay: 3.55s;
  margin-top: 2rem;
}

#bee-emoji-svg:hover #envelopeC, #envelopeC:hover {
  animation-name: envelope-flyC;
  animation-delay: 3.6s;
  margin-top: 3rem;
}

#bee-emoji-svg:hover #envelopeD, #envelopeD:hover {
  animation-name: envelope-flyD;
  animation-delay: 3.65s;
  margin-top: 2rem;
}

#bee-emoji-svg:hover .envelope, .envelope:hover {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: running;
  font-size: 2em;
}

@keyframes envelope-flyA {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }

  20% {
    transform: translate(15px, -15px) rotate(-45deg);
  }

  40% {
    transform: translate(30px, -30px) rotate(-45deg);
    opacity: .4;
  }

  60% {
    transform: translate(45px, -45px) rotate(-45deg);
    opacity: .1;
  }

  80% {
    transform: translate(60px, -60px) rotate(-45deg);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes envelope-flyB {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(45deg);
  }

  20% {
    transform: translate(15px, 15px) rotate(45deg);
  }

  40% {
    transform: translate(30px, 30px) rotate(45deg);
    opacity: .4;
  }

  60% {
    transform: translate(45px, 45px) rotate(45deg);
    opacity: .1;
  }

  80% {
    transform: translate(60px, 60px) rotate(45deg);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes envelope-flyC {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(60deg);
  }

  20% {
    transform: translate(15px, 30px) rotate(60deg);
  }

  40% {
    transform: translate(30px, 60px) rotate(60deg);
    opacity: .4;
  }

  60% {
    transform: translate(45px, 90px) rotate(60deg);
    opacity: .1;
  }

  80% {
    transform: translate(60px, 120px) rotate(60deg);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes envelope-flyD {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  20% {
    transform: translate(15px, 0);
  }

  40% {
    transform: translate(30px, 0);
    opacity: .4;
  }

  60% {
    transform: translate(45px, 0);
    opacity: .1;
  }

  80% {
    transform: translate(80px, 0);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes harvest {
  0% {
    transform: rotate(5deg) translateY(3px) translateX(3px);
    transition: transform linear;
  }

  40% {
    transform: translateY(3px) translateX(7px) rotate(12deg);
    transition: transform linear;
  }

  40% {
    transform: translateY(3px) translateX(4px) rotate(12deg);
    transition: transform linear;
  }

  60% {
    transform: translateY(3px)  rotate(12deg);
    transition: transform linear;
  }

  70% {
    transform: translateY(3px)  rotate(10deg);
    transition: transform linear;
  }

  80% {
    transform: translateY(3px) translateX(2px) rotate(7deg);
    transition: transform linear;
  }

  100% {
    transform: translate(3px, 3px) rotate(5deg);
  }
}

@keyframes flowercursor {
  0% {
    cursor: url("/css/flowercursor.svg"), auto;
  }

  10% {
    cursor: url("/css/flowercursor1.svg"), auto;
  }

  20% {
    cursor: url("/css/flowercursor1.svg"), auto;
  }

  30% {
    cursor: url("/css/flowercursor1.svg"), auto;
  }

  60% {
    cursor: url("/css/flowercursor.svg"), auto;
  }

  70% {
    cursor: url("/css/flowercursor5.svg"), auto;
  }

  80% {
    cursor: url("/css/flowercursor5.svg"), auto;
  }

  90% {
    cursor: url("/css/flowercursor5.svg"), auto;
  }
}

.window {
  box-shadow: inset -1px -1px #0a0a0a,
    inset 1px 1px #ffffff, inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
  background: #c0c0c0;
  padding: 3px;
  padding-bottom: 0px;
}

.window> div:last-child {
  margin: 0;
}

button,
label,
input,
textarea,
select,
option,
ul.tree-view,
.window,
.title-bar {
  -webkit-font-smoothing: none;
  font-size: 11px;
}

.title-bar {
  background: #163339;
  font-family: var(--font-sans-serif);
  border-bottom: 1px solid #fff;
  height: initial;
  max-height: min-content;
  flex: initial;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar-text {
  text-shadow: 1px 0px #424;
  user-select: none;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button[aria-label="Minimize"] {
  background-position: top -1px center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M5 7h6M6 8h4M7 9h2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.title-bar-controls button[aria-label="Maximize"] {
  background-position: top -2px center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M7 7h2M6 8h4M5 9h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 14px;
  min-height: 12px;
  box-sizing: border-box;
  border: none;
  background: #c0c0c0;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-image: none;
  background-size: auto;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  border-radius: 0;
}

.title-bar-controls button:disabled {
  background-blend-mode: overlay;
  color: #808080;
  text-shadow: 1px 1px 0 #fff;
}

.title-bar-controls button[aria-label="Close"] {
  background-position: top -2px center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath stroke='%23000' d='M4 5h2m4 0h2M4 6h3m2 0h3M5 7h6M6 8h4M6 9h4m-5 1h6m-7 1h3m2 0h3m-8 1h2m4 0h2'/%3E%3C/svg%3E");
  margin-left: 2px;
  background-repeat: no-repeat;
}