pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1.5em;
    border-radius: 10px;
  }
  
  code.hljs {
    padding: 3px 5px;
  }
  
  .hljs {
    color: #abb2bf;
    background: #000000;
  }
  
  /* Comments & quotes */
  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
    font-style: italic;
  }
  
  /* Keywords & formulas */
  .hljs-doctag,
  .hljs-formula,
  .hljs-keyword {
    color: #c3aeee;
  }
  
  /* Deletions, names, sections, tags */
  .hljs-deletion,
  .hljs-name,
  .hljs-section,
  .hljs-selector-tag,
  .hljs-subst {
    color: #c3aeee;
  }
  
  /* Literals */
  .hljs-literal {
    color: #56b6c2;
  }
  
  /* Additions, attributes, regex, strings */
  .hljs-addition,
  .hljs-attribute,
  .hljs-meta .hljs-string,
  .hljs-regexp,
  .hljs-string {
    color: #0dd3bf;
  }
  
  /* Attributes, numbers, selectors, variables */
  .hljs-attr,
  .hljs-number,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #17b6ff;
  }
  
  /* Bullets, links, IDs, symbols, titles */
  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-symbol,
  .hljs-title {
    color: #61aeee;
  }
  
  /* Built-ins, classes */
  .hljs-built_in,
  .hljs-class .hljs-title,
  .hljs-title.class_ {
    color: #c3aeee;
  }
  
  /* Emphasis / strong */
  .hljs-emphasis {
    font-style: italic;
  }
  
  .hljs-strong {
    font-weight: 700;
  }
  
  /* Links */
  .hljs-link {
    text-decoration: underline;
  }
  
  .hljs-punctuation, .hljs-tag {
    color: #ffffff;
}

.hljs-tag .hljs-attr, .hljs-tag .hljs-name {
    color: #ffffff;
}