@import url("main.css");

:root {
  /* Use camelCase here because it works better with most autocomplete engine */
  --brandColor: #3270a1;
  --red: #f14668;
}

#page-content {
  background: url("dm.png") no-repeat 100% 4em/4em;
}

.img-border {
  border: 1px solid var(--gray);
}

kbd,
.guilabel {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid var(--gray);
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
  color: #333;
  display: inline-block;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
  font-size: 0.9em;
}

kbd.compound {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

kbd.compound kbd {
  padding: 2px 4px;
}

.guilabel {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}

.admonition > p:first-child code,
.topic > p:first-child code {
  background-color: inherit;
}

@media print {
  .section > .section {
    page-break-inside: unset;
  }

  pre {
    page-break-inside: avoid;
  }
}

.admonition.attention {
  --titleBg: var(--red);
}

.admonition > p:nth-child(2) {
  padding-left: 0.5em;
  padding-right: 0.5em;
}