.chroma {
  background-color: unset !important;
}

.chroma .hl {
  display: block;
  width: 100%;
}

.chroma .lnt {
  padding: 0 0 0 12px;
}

.chroma .lntd:last-of-type {
  width: 100%;
}

pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

pre code {
  white-space: pre;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
}

.highlight,
.code-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.highlight pre.chroma {
  max-height: 18rem;
  overflow: auto;
  background: #111;
  padding: 2.5rem;
  border-radius: 1.5rem;
  border: 0.2rem solid #2d4650;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.highlight pre.chroma code {
  display: block;
  white-space: pre;
  background: transparent;
  padding: 0;
}

.highlight pre.chroma .line .cl,
.chroma .ln {
  padding: 0 10px;
}

.code-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}