@font-face {
  font-family: icons;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAW8AAsAAAAADHgAAAVvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgCDYAqLeIlLATYCJAMoCxYABCAFg3IHgQUbbQojEbaDUUKT/fPAduTGCpp0PEt1d5sP6lNXwSm9eQ6ep7X0/ZlZmrtLlgtAewUAUIlKNVsgTeBSjbYSyOUnu7c3i2gSDxJv5BI+gC2AbrZT+3Boz0Wbus8PgNWldfyYgAeQm7DiLf/FM5yxHDm+k0rZ37f2q6KVRyjipVLTzd4iI99kMT9ErRGJNCKhilmjWSJESqG0joHs6lqQFvXvtyCApWA0auLkmQup2bnu4G5aYrDWC6SDZee2LevwxQCmIVXwPS7lvANSjwPMYxkQhb8+CpcOoHA01iPmbp60kbE/5EfAWaDEuSXLgcnaNdB7OyHZSC1fjSZtvdFYrc3QH7a1k8CPoKkBP8S3N7sdCAqNwRH/4Xn4BCAuFpeReLI9gB/iEqEoEBANAmJAQBwQEBcExAMB8UFAAsRRDtY/IwVagbKgOmK5ZhIWm/WL1s1Ho2Nypd6haZ26lTiq1OdGRoaHO7u7R1xq4Qa3KJjLWLkFzqW289ekLjXMzVOQfX4RiqoofqwKgONvVQgE0roWpXJua5NRcpkEBATW1oFdzVFfvNYG+hbVkruFRcm5MnMLXGGw83MYqPaLC9GFtj5zfn66OM44b2FjS23CBHpiutim45LUhHyAT/UiyoC6gcXf6rrtmIgma4m8UPd0ZOdY1W86a9BAp57MosVLe7peYyzZ6d2oe9k7PsfEt0rTHIPo2Cm0AZEVDxiuLStf38iN57M0qoPMXhrLDLIEYtnxP9NDatt+T1VFMi30uJg3mPqGDHFRAd0p2+svxipyusvmL1UVpC3UVwebUWeAfFtwU3CpcNlw0Wfx+fzHn/rXt/D1Z/X7+41b1Q+534t7PUnPN/d6Eyk8fAgpXLunEnVwoJKJpLuRDG10J7B4r1uUiYbjYOxpNBldiiei/WgivqQcp6OJZCLSzUXzpeayed/FS9AU53ryMMlYo5MHoYUR/zOdwd0RmMiB///BGdEKYlRK2g3jX5rCfxj5BRI4msUzcXY0rvmYHR46uL0Y2Jz4d3nrRGTCOA5NJx1NxDAx0vt5TyfamiFTW1+fyVJV4wYu7nhuXfsOSRLe/Dhpc1zEu/pu/93yD5tuSOJkqqPTUWU6HZiZxutXItVpJaqjiq5sbNRuQKqzHW2fmURubPqQq47e3oYN/5QiPDSXvIvS46qqSzlV2hhCPRPSVKnOlUyq1USynLGXwiI2NOxtr64PHBgmuqpMqqo6+RQ6bLbL9vRmTBRnmtxL+cAZXslnFzek1C70qREHCUzXIRq/p3vNm+5dc3P4qgbbuzxon+VFXoQ9owMY7kVbu0W0c2dUdDQRA3cG/+uSuv+Jf9y68uMZLUa8avFyZIuZj2bU3jMfefDANnDmGVb5PjaHhS1O28sJ3GgbIKfF8mOc+Ku4zv2pKg9z7A/4MPKn34+vqR35xy9xFuDb/J7j4fTu5T6KrRDoYjjbZEXyv14xxDbM24UhrjBNm+UpPljluizQxFaGvJm6UnA6O6DwiBZQx64yYk1iZKGyRA50RVcH5Fh60fX8Egnz0IgJECwbmRxFDbtzNJaTsSbxco5DTn2Oi+VujmUxG/2frpkRd5vG2r/AbVkSY5vRP6CoD1axjLPyHTeoQJLBCHUXfXcrsxWWsIgrVoacUTTCCJpHz9wu02RpfzpqLIegsfYvcFuWxEyLzR/oqqSwtWBhZG6KvXFtLigZzHHqLui7W2HbWOE6hIXwdZjqiNlG1LjRnQialI/4AU67MNmr2a48Luwqr9fqvE7FyvOsKNFixBFXPPElECsl0g0edPrwD9gJ65DB8mfmAyg4z6/3cmgKJZnHexk7PN9DAw3q06PAflMPj7HA0zuQpP3hAA==)format("woff2")
}

.icon:before,
.copy-to-clipboard-button:before {
  font-family: icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.copy-to-clipboard-button.icon-check:before {
  content: ""
}

:root {
  --clr-code-bg: hsl(225, 31%, 18%);
  --clr-code-border: hsl(225, 30%, 31%);
  --clr-code-txt: hsl(228, 74%, 91%);
  --clr-kbd-bg: hsl(236, 17%, 18%);
  --clr-kbd-txt: hsl(240, 13%, 87%);
  --clr-kbd-border: hsl(231, 9%, 42%);
  --clr-code-block-txt: hsl(0, 69%, 67%);
  --clr-code-selection: hsl(228, 89%, 15%);
  --clr-code-scrollbar-bg: hsl(225, 28%, 13%);
  --clr-code-scrollbar-knob: hsl(225, 22%, 21%);
  --clr-code-scrollbar-knob-active: hsl(225, 20%, 25%);
  --clr-tkn-a: hsl(199, 17%, 57%);
  --clr-tkn-b: hsl(0, 0%, 74%);
  --clr-tkn-c: hsl(207, 89%, 68%);
  --clr-tkn-d: hsl(34, 100%, 50%);
  --clr-tkn-e: hsl(88, 50%, 76%);
  --clr-tkn-f: hsl(291, 47%, 71%);
  --clr-tkn-g: hsl(187, 71%, 50%);
  --clr-tkn-h: hsl(0, 69%, 67%);
}

code,
pre {
  border-radius: var(--br-md);
}

code,
kbd,
pre {
  font-size: var(--font-xs);
}

code,
code *,
code[class*="language-"],
kbd,
kbd *,
pre,
pre *,
pre[class*="language-"] {
  font-family: Roboto Mono, Menlo, Consolas, monospace;
}

code {
  background: var(--clr-code-bg);
  color: var(--clr-code-txt);
  padding: 0.125rem 0.375rem;
}

code[class*="language-"],
pre[class*="language-"] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5rem;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hypens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"] ::selection,
pre[class*="language-"]::selection {
  background: var(--clr-code-selection);
}

:not(pre)>code[class*="language-"] {
  padding: 0.125rem 0.25rem;
  white-space: normal;
}

pre {
  position: relative;
  overflow: auto;
  background: var(--clr-code-bg);
  color: var(--clr-code-block-txt);
  padding: 0.375rem;
  margin: 0.5rem 0;
  border: 0;
  white-space: pre-wrap;
  --clr-el-scrollbar-bg: var(--clr-code-scrollbar-bg);
  --clr-el-scrollbar-knob: var(--clr-code-scrollbar-knob);
  --clr-el-scrollbar-knob-active: var(--clr-code-scrollbar-knob-active);
}

pre[class*="language-"] {
  padding: 1rem 0.875rem;
}

pre[data-code-language]:not([data-code-language=""]) {
  padding-block-start: 2.625rem;
}

pre[data-code-language]:not([data-code-language=""]):before {
  font-family: Inter, Helvetica, sans-serif;
  font-size: inherit;
  color: var(--clr-txt-100);
  position: absolute;
  top: 0.8725rem;
  left: 0.8725rem;
  display: block;
  content: attr(data-code-language);
}

pre[data-code-language]:not([data-code-language=""]):not([data-code-language="Examples"]).language-shell:before {
  content: "Shell";
}

div.code-toolbar {
  position: relative;
}

div.code-toolbar>.toolbar {
  position: absolute;
  z-index: 10;
  top: 0.3em;
  right: 0.2em;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

div.code-toolbar:hover>.toolbar {
  opacity: 1;
}

div.code-toolbar:focus-within>.toolbar {
  opacity: 1;
}

div.code-toolbar>.toolbar>.toolbar-item {
  display: inline-block;
  position: relative;
}

div.code-toolbar>.toolbar>.toolbar-item>a {
  cursor: pointer;
}

div.code-toolbar>.toolbar>.toolbar-item>button {
  background: 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.code-toolbar>.toolbar>.toolbar-item>a,
/* div.code-toolbar>.toolbar>.toolbar-item>button, */
div.code-toolbar>.toolbar>.toolbar-item>span {
  color: #fff;
  font-size: 0.8em;
  padding: 0.5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, 0.2);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.25em;
}

div.code-toolbar>.toolbar>.toolbar-item>a:focus,
div.code-toolbar>.toolbar>.toolbar-item>a:hover,
div.code-toolbar>.toolbar>.toolbar-item>button:focus,
div.code-toolbar>.toolbar>.toolbar-item>button:hover,
div.code-toolbar>.toolbar>.toolbar-item>span:focus,
div.code-toolbar>.toolbar>.toolbar-item>span:hover {
  color: inherit;
  text-decoration: none;
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: var(--clr-tkn-a);
}

.token.punctuation {
  color: var(--clr-tkn-b);
}

.token.boolean,
.token.constant,
.token.deleted,
.token.function,
.token.property,
.token.symbol,
.token.tag {
  color: var(--clr-tkn-c);
}

.token.class-name,
.token.number {
  color: var(--clr-tkn-d);
}

.token.parameter,
.token.function-variable {
  color: var(--clr-code-block-txt);
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: var(--clr-tkn-e);
  /* color: #a6e22e; */
}

.language-css .token.string,
.style .token.string,
.token.atrule,
.token.attr-value,
.token.entity,
.token.interpolation-punctuation,
.token.keyword,
.token.operator,
.token.url {
  color: var(--clr-tkn-f);
}

.token.regex {
  color: var(--clr-tkn-g);
}

.token.important,
.token.variable {
  color: var(--clr-tkn-h);
}

.token.comment,
.token.italic {
  font-style: italic;
}

.token.bold,
.token.important {
  font-weight: 500;
}

p>code,
p>code[class*="language-"] {
  color: var(--clr-code-txt);
  background: var(--clr-code-bg);
}

a>code,
a>code[class*="language-"] {
  background: var(--clr-code-bg);
  color: var(--clr-primary-050);
}

div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button.active {
  animation-name: active;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition: background .25s ease;
}

div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button.active:before {
  opacity: 0;
  animation-name: active-before;
  animation-duration: .65s;
  animation-timing-function: ease-in-out
}


@keyframes active {

  0%,
  to {
    transform: scale(1)
  }

  20% {
    transform: scale(1.15) rotate(3deg)
  }

  40% {
    transform: scale(.94)
  }

  60% {
    transform: scale(.98) rotate(-3deg)
  }

  80% {
    transform: scale(1.08)
  }
}

@keyframes active-before {

  0%,
  to {
    opacity: 0
  }

  30%,
  75% {
    opacity: 1
  }
}

.copy-to-clipboard-button span {
  display: none;
}

div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button {
  --br-lg: .5rem;
  color: #fff;

  position: relative;
  top: 10px;
  right: 0;
  z-index: 1000;

  display: block;
  padding: 1.5rem;
  margin: 0 0.5rem;

  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5rem;
  cursor: pointer;
  border: 0;
  border-radius: var(--br-lg);
  transition: background .3s ease, color .3s ease, border .3s ease;
}

div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button:hover {
  --clr-el-01db: #151526;
  --clr-primary-100: hsl(217, 98%, 66%);
  display: block;
  background: var(--clr-el-01db);
  color: var(--clr-primary-100);
}

.code-toolbar:hover div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button {
  display: block;
}

.copy-to-clipboard-button::before {
  content: "\f104";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

/* https://www.30secondsofcode.org/articles/s/javascript-arrow-function-event-listeners/ */
/* https://startblogging101.com/how-to-add-prism-js-syntax-highlighting-wordpress/ */
/* https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html */