:root {
  font-size: 10px;
  --code-font-size: 1.5rem;
  --code-padding: 1.5rem;
  --code-margin: 1.5rem;
  --code-padding: 1.5rem;
  --code-radius: 8px;
  --code-background-color: rgba(245, 245, 245, 1);
  --code-font-color: rgba(0, 0, 0, 1);
  --code-border-color: rgba(0, 0, 0, 0.2);
  --code-font-family: 'consolas', 'Courier New', Courier, monospace;
}

@media (orientation: landscape) {
  :root {
    --code-font-size: var(--code-font-size-landscape);
  }
}

pre.hljs {
  font-size: var(--code-font-size);
  font-family: var(--code-font-family);
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  padding: var(--code-padding);
  margin: var(--code-margin);
}

pre code.hljs {
  font-size: var(--code-font-size);
  font-family: var(--code-font-family);
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  padding: var(--code-padding);
  margin: var(--code-margin);
}

code.hljs {
  font-size: var(--code-font-size);
  font-family: var(--code-font-family);
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  padding: var(--code-padding);
  margin: var(--code-margin);
  border-radius: var(--code-radius);
  background-color: var(--code-background-color);
  border: 1px solid var(--code-border-color);
  color: var(--code-font-color);
}

.hljs {
  font-size: var(--code-font-size);
  font-weight: 500;
}

.hljs-comment {
  font-size: var(--code-font-size);
  color: rgba(0, 0, 0, 0.45);
}

.hljs-punctuation,
.hljs-tag {
  font-size: var(--code-font-size);
  color: rgba(50, 100, 50, 0.6);
}

.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
  font-size: var(--code-font-size);
  color: rgba(0, 0, 0, 0.5);
}

.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
  font-size: var(--code-font-size);
  font-weight: 700;
  color: rgba(50, 50, 125, 0.9);
}

.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
  font-size: var(--code-font-size);
  color: rgba(100, 100, 50, 0.9);
}

.hljs-section,
.hljs-title {
  font-size: var(--code-font-size);
  color: rgba(150, 75, 75, 0.9);
  font-weight: 700;
}

.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
  font-size: var(--code-font-size);
  color: rgba(25, 100, 25, 0.9);
}

.hljs-literal {
  font-size: var(--code-font-size);
  color: rgba(20, 40, 20, 0.7);
}

.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
  font-size: var(--code-font-size);
  color: rgba(50, 50, 100, 0.9);
}

.hljs-meta {
  font-size: var(--code-font-size);
  color: rgba(0, 0, 0, 0.3);
}

.hljs-meta .hljs-string {
  font-size: var(--code-font-size);
  color: rgba(0, 0, 0, 0.45);
}

.hljs-emphasis {
  font-size: var(--code-font-size);
  font-style: italic;
}

.hljs-strong {
  font-size: var(--code-font-size);
  font-weight: 700;
}