:root {
  --bg: hsl(220, 13%, 18%);
  --comment: #999;
  --fg: hsl(220, 14%, 71%);
  --line-number: hsl(218, 5%, 37%);
  --yellow: #f8c555;
  --orange: hsl(29, 54%, 61%);
  --red: hsl(5, 48%, 51%);
  --magenta: hsl(355, 65%, 65%);
  --purple: #cc99cd;
  --blue: hsl(207, 82%, 66%);
  --cyan: hsl(187, 47%, 55%);
  --green: #7ec699;
  --border: hsl(221, 9%, 26%);
}

span.code { white-space: pre; border: 0px; padding: 2px; }

table.code { border-collapse: collapse; width: 100%; padding: 2px; }
table.code td { padding: 2px 4px; vertical-align: top; }

pre.code { background-color: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--fg); margin: 5px 0; }
pre.code pre { margin: 0px; background-color: var(--bg); color: var(--fg); border: 0px solid var(--border); }
pre.code .line-numbers { background-color: var(--line-number); color: var(--comment); text-align: right; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
pre.code .line-numbers a { background-color: var(--line-number) !important; color: var(--comment) !important; text-decoration: none !important; }
pre.code .line-numbers a:target { color: var(--blue) !important; }
pre.code .line-numbers pre { word-break: normal; }
pre.code .line-numbers .highlighted { color: var(--red) !important; }
pre.code .line-numbers .highlighted a { color: var(--red) !important; }
pre.code span.line-numbers { padding: 0px 4px; }
pre.code .line { display: block; float: left; width: 100%; }
pre.code .code { width: 100%; }
pre.code .debug { color: var(--bg) !important; background: var(--blue) !important; }
pre.code .annotation { color: var(--blue); }
pre.code .attribute-name { color: var(--orange); }
pre.code .attribute-value { color: var(--green); }
pre.code .binary { color: var(--purple); }
pre.code .binary .char { color: var(--purple); }
pre.code .binary .delimiter { color: var(--purple); }
pre.code .char { color: var(--red); }
pre.code .char .content { color: var(--red); }
pre.code .char .delimiter { color: var(--red); }
pre.code .class { color: var(--yellow); }
pre.code .class-variable { color: var(--red); }
pre.code .color { color: var(--green); }
pre.code .comment { color: var(--comment); font-style: italic; }
pre.code .comment .char { color: var(--fg); }
pre.code .comment .delimiter { color: var(--fg); }
pre.code .constant { color: var(--yellow); }
pre.code .decorator { color: var(--magenta); }
pre.code .definition { color: var(--cyan); }
pre.code .delimiter { color: var(--comment); }
pre.code .directive { color: var(--cyan); }
pre.code .docstring { color: var(--orange); }
pre.code .doctype { color: var(--blue); }
pre.code .done { text-decoration: line-through; color: var(--comment); }
pre.code .entity { color: var(--red); }
pre.code .error { color: var(--bg); background-color: var(--red); }
pre.code .escape { color: var(--comment); }
pre.code .exception { color: var(--red); }
pre.code .float { color: var(--orange); }
pre.code .function { color: var(--blue); }
pre.code .function .delimiter { color: var(--blue); }
pre.code .global-variable { color: var(--orange); }
pre.code .hex { color: var(--blue); }
pre.code .id { color: var(--blue); }
pre.code .include { color: var(--magenta); }
pre.code .inline { color: var(--green); }
pre.code .inline-delimiter { color: var(--magenta); }
pre.code .instance-variable { color: var(--magenta); }
pre.code .integer { color: var(--orange); }
pre.code .imaginary { color: var(--red); }
pre.code .important { color: var(--red); }
pre.code .key { color: var(--cyan); }
pre.code .key .char { color: var(--cyan); }
pre.code .key .delimiter { color: var(--cyan); }
pre.code .keyword { color: var(--purple); }
pre.code .label { color: var(--yellow); }
pre.code .local-variable { color: var(--fg); }
pre.code .map .content { color: var(--purple); }
pre.code .map .delimiter { color: var(--purple); }
pre.code .namespace { color: var(--purple); }
pre.code .octal { color: var(--purple); }
pre.code .predefined { color: var(--blue); }
pre.code .predefined-constant { color: var(--orange); }
pre.code .predefined-type { color: var(--green); }
pre.code .preprocessor { color: var(--purple); }
pre.code .pseudo-class { color: var(--blue); }
pre.code .regexp .content { color: var(--purple); }
pre.code .regexp .delimiter { color: var(--purple); }
pre.code .regexp .modifier { color: var(--purple); }
pre.code .reserved { color: var(--green); }
pre.code .shell .content { color: var(--green); }
pre.code .shell .delimiter { color: var(--green); }
pre.code .string .char { color: var(--green); }
pre.code .string .content { color: var(--green); }
pre.code .string .delimiter { color: var(--green); }
pre.code .string .modifier { color: var(--orange); }
pre.code .symbol { color: var(--cyan); }
pre.code .symbol .content { color: var(--cyan); }
pre.code .symbol .delimiter { color: var(--cyan); }
pre.code .tag { color: var(--red); }
pre.code .type { color: var(--purple); }
pre.code .value { color: var(--orange); }
pre.code .variable { color: var(--blue); }
pre.code .insert { background-color: rgba(0, 255, 0, 0.2); }
pre.code .insert .insert { color: var(--green); }
pre.code .insert .eyecatcher { background-color: rgba(0, 255, 0, 0.2); border: 1px solid rgba(0, 128, 0, 0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
pre.code .delete { background: rgba(255, 0, 0, 0.12); }
pre.code .delete .delete { color: var(--red); background: transparent; }
pre.code .delete .eyecatcher { background-color: rgba(255, 0, 0, 0.2); border: 1px solid rgba(230, 0, 0, 0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
pre.code .change { color: var(--purple); background: var(--blue); }
pre.code .change .change { color: var(--purple); }
pre.code .head { color: var(--purple); }
pre.code .head .head { color: var(--purple); }
pre.code .head .filename { color: var(--purple); }