:root {
  --code-bg-color: var(--lt-color-gray-800);
  --code-fg-color: var(--lt-color-gray-300);
  --md-primary-fg-color: var(--lt-color-gray-900);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--md-code-fg-color);
}

div.smile-logo {
  display: flex;
  font-size: 0.7rem;
}

div.smile-logo img {
  width: 100px;
}

button.md-clipboard::after {
  transition: all 0.5s ease;
  color: var(--lt-color-gray-500);
}
button.md-clipboard:hover::after {
  color: var(--md-primary-bg-color);
}

article a,
article a:visited {
  color: var(--md-code-hl-number-color) !important;
}

.md-center {
  text-align: center;
  margin: auto;
}

.md-center img {
  max-width: 200px;
}

.md-nav__item .md-nav__link--active {
  color: var(--md-code-hl-string-color) !important;
  opacity: 0.7;
}

.go-logo {
  font-size: 4em;
}

/* HLJS */
pre code.hljs {
  background-color: var(--code-bg-color);
  color: var(--code-fg-color);
}

table tbody code {
  text-align: left;
  white-space: nowrap;
  font-size: 1em !important;
  background-color: transparent !important;
  color: var(--md-code-hl-special-color) !important;
}

h3[id*="katenaryio"] {
  color: var(--md-code-hl-special-color);
}

#logo {
  background-image: url("logo-vertical.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 8em;
  width: 100%;
  margin: 0 auto 2rem auto;
}

/*Zoomable images*/
.zoomable svg {
  background-color: var(--md-default-bg-color);
  padding: 1rem;
}

[data-md-color-scheme="slate"] .zoomable svg {
  background-color: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] .zoomable svg .colorize {
  fill: var(--md-typeset-color) !important;
}

.zoomable input[type="checkbox"] {
  display: none;
}

@media all and (min-width: 1399px) {
  .zoomable label > * {
    cursor: zoom-in;
    transition: all 0.2s ease-in-out;
  }
  .zoomable input[type="checkbox"]:checked ~ label > * {
    transform: scale(2);
    cursor: zoom-out;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    z-index: 1;
  }
}

#klee {
  filter: drop-shadow(0 0 16px var(--md-default-fg-color));
  text-align: center;
  padding: 1rem;
}
#klee svg {
  zoom: 2;
}