:root {
  --light-yellow: #e5c07b;
  --dark-yellow: #d19a66;
  --blue: #61afef;
  --cyan: #56b6c2;
  --light-red: #e06c75;
  --dark-red: #be5046;
  --comment-gray: #5c6370;
  --magenta: #c678dd;
}

.code-pre {
  position: relative;
  overflow-y: auto;
  /* padding: 0.6em 0.4em; */
  background-color: color-mix(in srgb, grey, transparent 90%);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 8px;
  border-color: #a1aaa577;
  border-width: 0.1em;
  border-style: solid;
}

.code-header-outer {
  display: block;

  font-family: "Zilla Slab", serif;
  font-weight: 400;
  font-style: normal;
  /* margin-block: 0.5rem; */

  font-size: 0.9rem;

  background-color: color-mix(in srgb, grey, transparent 80%);
  border-color: #a1aaa577;
  border-bottom-style: solid;
  border-width: 0.1em;
}

.code-header-inner {
  margin-left: 0.2em;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
}

.code-header-inner button {
  font-family: "Zilla Slab", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
  position: sticky;
  top: 0;
  left: 100%;
}

.code-header-inner button:hover {
  background-color: #bcbabb;
}

.code-content-wrapper {
  margin: 0.2em;
  /* background-color: #bcbabb; */
  /* padding: 0.5em; */
}

code.ziggy {
  color: var(--cyan);
}

code.ziggy .keyword,
code.ziggy .type {
  color: var(--light-yellow);
}

code.ziggy .string {
  color: var(--dark-yellow);
}

code.ziggy .numeric.constant {
  color: var(--magenta);
}

code.ziggy .function {
  color: var(--blue);
}