.book-track {
  border-radius: 8pt;
  border: 1px gray solid;
  padding: 1.0em;

  h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
  }

  a {
    text-decoration: none;
    color: var(--fg-color)
  }
}

@media (prefers-color-scheme: dark) {
    img {
        filter: invert();
    }
    .invert-dark {
      filter: invert();
    }
}

.noinvert img, img.noinvert {
    filter: none;
}


* {
  --tooltip-hover-color: cyan;
  --tooltip-box-shadow: var(--code-box-shadow);
  --tooltip-border-color: #ccc;
}

@media(prefers-color-scheme: dark) {
  * {
    --tooltip-hover-color: white;
    --tooltip-box-shadow: 1px 1px 10px black;
    --tooltip-border-color: #555;
  }
}


.tooltipped {
    :hover {
      text-shadow: 0px 0px 5px var(--tooltip-hover-color);
    }
}

.menu-bar {
  z-index: 4;
}

.tooltip {
    padding: 1.0em;
    background-color: var(--bg-color);
    border: 3px var(--tooltip-border-color) solid;
    border-radius: 0.7em;
    box-shadow: var(--tooltip-box-shadow);
}


.explain-hint {
  display: grid;
}
.explain-hint::after {
  content: "Curious about a keyword in the examples? Click on it to learn more";
  font-size: 0.8em;
  color: gray;
  margin: 0px auto;
}

.syntax {
  background-color: var(--quote-bg);
  border-radius: 6px;
}

* {
  --warning-color: crimson;
}

@media (prefers-color-scheme: dark) {
  * {
    --warning-color: orangered;
  }
}

.warning {
  background-color: var(--quote-bg);
  border-style: none;
  border-radius: 0px;
  border-left-style: solid;
  border-left-color: var(--warning-color);
  border-left-width: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.warning-title {
    display: flex;
    align-items: center;

    color: var(--warning-color);
    margin-bottom: 8px;

    .warning-icon-light {
      display: initial;
    }
    .warning-icon-dark {
      display: none;
    }

    @media (prefers-color-scheme: dark) {
      .warning-icon-light {
        display: none;
      }
      .warning-icon-dark {
        display: initial;
      }
    }

    img {
      margin-right: 8px;
    }
}