@font-face {
    font-family: 'dejavu_sans_monobook';
    src: local("DejaVu Sans Mono"),
        url('/css/dejavusansmono-webfont.woff2') format('woff2'),
        url('/css/dejavusansmono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
    font-size:100%;
    font-family:"dejavu_sans_monobook", monospace;
}
body {
    font-size:.80rem;
    color: #151515;
/*  color: #202020; */
/*  color: #404040;*/
    background: radial-gradient(circle farthest-side at 0% 50%,#FFF 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#f8f8f8 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#FFF 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#FFF 0)0 0, linear-gradient(150deg,#FFF 24%,#f8f8f8 0,#f8f8f8 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#f8f8f8 0,#f8f8f8 76%,#FFF 0)0 0, linear-gradient(30deg,#FFF 24%,#f8f8f8 0,#f8f8f8 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#f8f8f8 0,#f8f8f8 76%,#FFF 0)0 0, linear-gradient(90deg,#f8f8f8 2%,#FFF 0,#FFF 98%,#f8f8f8 0%)0 0 #FFF;
    background-size: 40px 60px;
}

a:visited {
    color: #404040;
}
header {
    border-bottom:1px solid #969595;
    display: flex;
    justify-content: space-between;
}
header nav {
    margin: auto 0 0 auto;
    text-align:right;
}
header nav a {
    font-size:1.3rem;
    font-weight:bold;
    text-transform:uppercase;
}
footer {
    margin-top:3rem;
    padding:.5rem 0 1.2rem 0;
    border-top:1px solid #969595;
    font-size:.8rem;
    color:#555;
}
h1 {
    font-variant-caps: small-caps;
}
h2 {
    font-variant-caps: small-caps;
}

h3 {
    font-style: italic;
    font-variant-caps: small-caps;
    font-weight: 100;
  }

h1.title{
    margin-bottom: 4px;
    padding: .7rem;
}

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

li ul {
  padding-left: 1.2rem;
}

li {
  line-height: 1.5;
}

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

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

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

main.article .title {
    border-bottom: double 3px #d5d5d5;
    border-left: double 3px #d5d5d5;
    border-radius: 6px;
    background-color: #a9a9a924;

}

@media (min-width: 1280px) {
  #bee-emoji-svg, #bee-emoji-svg::before {
    display: inline-block !important;
  }
  .logo:hover, .logo:hover::after { 
    display: inline !important;
  }
    article {
      width: 43rem;
    }
    main {
        z-index: 1;
        min-width: 78rem;
        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: [left-sideline] auto [body] auto [right-sideline] auto;
        grid-column-gap: 10px;
        grid-row-gap: 3px;
        grid-auto-rows: auto;
    }

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

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

main.article article {
    line-height: 1.4;
    text-decoration-color: #0000001a;
    grid-column: body;
    grid-row: 2 / 3;
    order:1;
    max-width: 41rem;
}

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

main section.header {
    color:#555;
    font-size:0.8rem;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    max-width: 50rem;
    padding-bottom: .5rem;
}

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:#131516;
  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;
}
*/

code { 
  font-weight: 800;
  color: #006266;
}

kbd.□.▭ {
  width: auto;
  font-weight: 800;
  padding: 13px 5px;
 /* box-shadow: 2px 3px #8e897a; */
  box-shadow: 3px 5px #8e897a, 2px 0px 2px -1px inset #bbb, -1px 0px 2px -1px inset #bbb, -2px 3px #8e897a, -3px 5px #8e897a, 3px 5px #8e897a, -2px 3px #8e897a, 2px 3px #8e897a, 2px 3px #8e897a;
  margin-bottom:4px;
  margin-right:4px;
}

kbd.□.▭:active {
  box-shadow: 1px 0px 1px #c1c0c0 inset,-1px 0px 1px #c1c0c0 inset, -3px 3px #a29b9b, 3px 3px #a29b9b, -2px 2px #a29b9b, 2px 2px #a29b9b, -1px 1px #a29b9b, 1px 1px #a29b9b;
  top: 3px;
  position: relative;
}

kbd.□:active {
  color: black;
  box-shadow: 1px 1px 0px #ddd inset;
  top: 1px;
  position: relative;
}

kbd.□ {
  font-weight: 800;
  border: 1px solid #cecece;
  background: #f7f7e7;
  /* box-shadow: 2px 1px #8e897a;*/
  box-shadow: 1px 3px darkgray, -1px 3px darkgray, 1px 2px darkgray, -1px 2px darkgray;
  border-radius: 3px;
  display: inline-block;
  font-size: .85em;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
  user-select: none;
  cursor:pointer;
}

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

.sourceCode code  { 
    font-weight: 300;
}

@media (min-width:320px) {
  #bee-emoji-svg, #bee-emoji-svg::before, .logo:hover, .logo:hover::after {
    display: none;
  }
    body {
        width:90%;
        margin:0;
        padding:0 5%;
    }
    header {
        margin:1.7rem 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;
    }
    .screenshots {
      flex-direction: column;
    }
}
@media (min-width:1140px) {
    main {
        z-index: 1;
        padding:0;
    }
    header nav a {
        margin:0 0 0 1.2rem;
        display:inline;
    }
    footer {
        text-align:right;
    }
    .screenshots {
      flex-direction: row;
    }
}

    

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

img.full-width {
    width: 100%;
    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;
    color: #5b5e60;
    background: #f6f6f6;
    border: 1px solid #ededed;
    border-radius: 0 0 2px 2px;
    width: calc(98% - 2px);
    margin-top: -3px;
    padding-bottom: 7px;
    padding-left: 2%;
    padding-top: 5px;
}

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);
}

.wrapper h2 {
  border-bottom: 2px inset #000;
  border-left: 1px solid #b2b2b2;
  border-right: 1px solid #b2b2b2;
  padding-left: .5rem;
  padding-right: .5rem;
  border-top: 1px solid #b2b2b2;
  padding: .5rem;
  border-radius: 2px;
  background: white;
}
@media (max-width:1280px) {
.wrapper > *:first-child  {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1;
  grid-row: 1 / 1;
}
section.index-intro {
  width: 100vw;
}

section.index-intro, 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"
  "term term features build"
  "screenshots screenshots features announcements"
  "screenshots screenshots features announcements";
  grid-column-gap: 4rem;
}

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

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

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

section h1 {
  font-size: 1.21rem;
  font-variant-caps: normal;
  margin-top: 0px;
}

h1 {
  border-bottom: 2px inset #000;
  max-width: max-content;
  border-left: 1px solid #b2b2b2;
  border-right: 1px solid #b2b2b2;
  padding-left: .5rem;
  padding-right: .5rem;
  border-top: 1px solid #b2b2b2;
  padding: .5rem;
  border-radius: 2px;
  background: white;
}

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

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 {
  padding-left: 0px;
}

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

}


section.index-install details > summary {
	display: inline-block;
	margin: .4rem auto;
	padding: .2rem;
  background: #d7d7d7;
  border: 3px double white;
  color: #56BAE6;
}

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

section.index-install details > summary > code {
  color: #014446;
	font-size: 119%;
}

.index-screenshots {
  display:flex;
  flex-wrap: wrap;
  grid-area: screenshots;
}

.index-screenshots > * {
  flex: initial;
}

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

.index-screenshots img {
  object-fit: contain;
 width: 100%;
 height:inherit;
 background: #444;
}
/* 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;
}
.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;
}


div.mandoc {
  max-width: 100vw;
  min-width: 100vw;
}

nav.nav-doc {
  /* fallback in case max-content is not supported by the browser */
  max-width: 100%;
  max-width: max-content;
  border: 1px solid black;
  padding: .4rem 1rem .4rem 2rem;
  background: white;
  box-shadow: 5px 5px darkgrey;
}

nav.nav-doc ul {
list-style: square;
}

article.article-doc {
  max-width: 43rem;
  background: white;
}

.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: " 🐝";
  filter: hue-rotate(170deg) grayscale(42%);
}


/* Documentation */

span.notice-info {
  padding: .5rem;
  border: 2px dashed grey;
  margin-bottom: 15px;
  background: white;
  display: inline-block;
}



/*! * * * * * * * * * * * * * * * * * * * *\
  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: 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');
  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;*/
}


.sakura {
  opacity: 0;
  position: fixed;
}
.envelope {
  filter: grayscale();
  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); } 
}


.xterm_title {
    background: #22AA99;
    color: white;
  font-size: .8rem;
    padding: 0.3em;
    padding-left: 2px;
    padding-right: 2px;
    width: auto;
    border: 1px ridge black;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom:0px;
    margin-bottom:0px;
    min-width: inherit;

  display: grid;
        grid-template-columns: [symbol] 40px [title] 1fr [buttons];
        grid-template-rows: auto;
}
  .xterm {
    overflow: hidden;
    font-size: 12px;
    direction: ltr;
    text-align: left;
    background: #22AA99;
    padding: 1px;
    border: 1px solid black;
    width: inherit;

    max-width: min-content;
    min-width: min-content;
}

.xterm-title {
  grid-column: title;
    grid-row: 1 / 1;
  font-weight:800;
  margin-top: 3px;
}

.xterm-symbol {
  cursor:pointer;
  grid-column: symbol;
    grid-row: 1 / 1;
  font-size: 1rem;
  line-height: initial;
  padding-left: 2px;
  padding-right: 0px;
  border-right: 3px double #cbebe7;
  margin-right: 13px;
  margin-left: 4px;
}
#main_svg {
  max-width: 85vw;
  width: inherit;
  border: 1px solid black;
}