div[code-example] {
  font-size: 24px;
  line-height: 28px;
  font-family: 'JetBrains Mono';
}

code-example-title:before {
  display: inline;
  position: relative;
  background-color: #7F2CCB;
  text-align: left;
  text-justify: auto;
  color: white;
  font-family: 'JetBrains Mono';
  font-size: inherit;
  left: 0;
  padding: 0 0.5em 0.1em 0.5em;

  content: attr(message);
}

button[code-example-collapse] {
  background-color: #7F2CCB;
  font-family: 'JetBrains Mono';
  display: inline;
  font-weight: 700;
  font-size: inherit;
  border: none;
  outline: none;
  color: white;
  position: relative;
  left: 0;
  padding: 0 1em 0.1em 1em;
  appearance: none;
}

button[code-example-collapse]:hover {
  cursor: pointer;
  background-color: #f5c43d;
  border: none;
  color: #7F2CCB;
}

code-block {
  display: block;
  z-index: -1;
  background-color: #212121;
  font-family: 'JetBrains Mono';
  font-size: 15px;
  color: #abe2ff;
  transform-origin: top;
  line-height: 20px;
  border: none;
  padding-left: 20px;
  overflow: hidden;
  max-height: 0;
  text-align: left;
  text-justify: auto;
  transition: max-height 0.5s ease-out;
}

code-warning {
  font-size: inherit;
  font-family: inherit;
  background-image:
    linear-gradient(45deg, transparent 65%, #f5c43d 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, #f5c43d 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, #f5c43d 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, #f5c43d 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 18px 6px;
  background-position:0 95%;
}

code-error {
  font-size: inherit;
  font-family: inherit;
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 18px 6px;
  background-position:0 95%;
}

br[code-block-line] {
  font-size: inherit;
  line-height: inherit;
}

code-comment:before {
  display: inline;
  font-size: inherit;
  color: #808080;
  content: "// " attr(message);
}

code-class:before {
  font-size: inherit;
  display: inline;
  color: #f5c43d;
  content: attr(type);
}

code-struct:before {
  display: inline;
  font-size: inherit;
  content: attr(type);
  color: #f5c43d;
  text-decoration: underline;
}

code-keyword:before {
  display: inline;
  font-size: inherit;
  color: #c473fa;
  content: attr(type);
}

code-class:before {
  display: inline;
  font-size: inherit;
  color: #f5c43d;
}

code-white:before {
  display: inline;
  color: white;
  font-size: inherit;
  content: attr(message);
}

code-doubledot:before {
  color: white;
  font-size: inherit;
  content: "::";
}

code-type:before {
  display: inline;
  font-size: inherit;
  color: #f5c43d;
}

code-func:before {
  display: inline;
  font-size: inherit;
  color: #5fa8f2;
  content: attr(name);
}

code-local-var:before {
  display: inline;
  font-size: inherit;
  color: #fc8383;
  content: attr(name);
}

code-var:before {
  display: inline;
  font-size: inherit;
  color: white;
  content: attr(name);
}

code-func-body:before {
  display: inline;
  color: #abe2ff;
}

code-namespace:before {
  display: inline;
  color: white;
  content: attr(name) "::";
}

code-marco-var:before {
  display: inline;
  color: #86da8c;
  content: attr(name);
}

code-enum-member:before {
  display: inline;
  color: #86da8c;
  content: attr(name);
}

code-string:before {
  display: inline;
  color: #86da8c;
  content: '\0022' attr(message) '\0022';
}

code-char:before {
  display: inline;
  color: #86da8c;
  content: '\0022';
}

code-int:before {
  display: inline;
  color: #fc8383;
  content: attr(value);
}

code-indent {
  display: inline;
  border-left: 2px solid #4f4f4f;
  padding-left: 2em;
  height: 5px;
  left: 50%;
  top: 0;
}

code-macro:before {
  display: inline-block;
  color: #d091fa;
  content: attr(macro);
  font-weight: 700;
}

code-backslash:before {
  display: inline;
  color: #82cad9;
  content: '\005C' attr(char);
}

[static] {
  font-style: italic;
}

[bold] {
  font-weight: 700;
}

/*
   =================================================================
                        Mobile Version of CSS
   =================================================================
 */

@media (pointer: none), (pointer: coarse) {
  code-example-title {
    font-size: 48px;
  }

  button[code-example-collapse] {
    font-size: 48px;
    border: none;
  }

  code-example-title {
    padding: 0 0.5em 0 0;
    border: none;
    font-size: 48px;
    line-height: 56px;
  }

  div[code-example] {
    font-size: 24px;
    line-height: 28px;
    font-family: inherit;
  }

  code-block {
    display: block;
    z-index: -1;
    background-color: #212121;
    font-family: 'JetBrains Mono';
    font-size: 32px;
    color: #abe2ff;
    transform-origin: top;
    line-height: 34px;
    border: none;
    padding-left: 20px;
    overflow: hidden;
    max-height: 0;
    text-align: left;
    text-justify: auto;
    transition: max-height 0.5s ease-out;
  }

  br[code-block-line] {
    font-size: inherit;
    line-height: inherit;
  }

  code-comment:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: #808080;
    content: "// " attr(message);
  }

  code-class:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #f5c43d;
    content: attr(type);
  }

  code-struct:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    content: attr(type);
    color: #f5c43d;
    text-decoration: underline;
  }

  code-keyword:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: #c473fa;
    content: attr(type);
  }

  code-class:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: #f5c43d;
  }

  code-white:before {
    display: inline;
    color: white;
    font-size: inherit;
    line-height: inherit;
    content: attr(message);
  }

  code-doubledot:before {
    color: white;
    font-size: inherit;
    line-height: inherit;
    content: "::";
  }

  code-type:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #f5c43d;
  }

  code-func:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: #5fa8f2;
    content: attr(name);
  }

  code-local-var:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: #fc8383;
    content: attr(name);
  }

  code-var:before {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    color: white;
    content: attr(name);
  }

  code-func-body:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #abe2ff;
  }

  code-namespace:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: white;
    content: attr(name) "::";
  }

  code-marco-var:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #86da8c;
    content: attr(name);
  }

  code-enum-member:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #86da8c;
    content: attr(name);
  }

  code-string:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #86da8c;
    content: '\0022' attr(message) '\0022';
  }

  code-char:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #86da8c;
    content: '\0022';
  }

  code-int:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #fc8383;
    content: attr(value);
  }

  code-indent {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    border-left: 2px solid #4f4f4f;
    padding-left: 2em;
    height: 5px;
    left: 50%;
    top: 0;
  }

  code-macro:before {
    font-size: inherit;
    line-height: inherit;
    display: inline-block;
    color: #d091fa;
    content: attr(macro);
    font-weight: 700;
  }

  code-backslash:before {
    font-size: inherit;
    line-height: inherit;
    display: inline;
    color: #82cad9;
    content: '\005C' attr(char);
  }

}