/* Define rules for syntax highlight of code */

:root {
  --light-yellow: #e5c07b;
  --dark-yellow: #d19a66;
  --blue: #61afef;
  --cyan: #56b6c2;
  --light-red: #e06c75;
  --dark-red: #be5046;
  --comment-gray: #5c6370;
  --comment-green: green;
  --magenta: #c678dd;
}

/* Most code blocks are going to be inside a <pre> block: 
https://css-tricks.com/styling-code-in-and-out-of-blocks/ */
pre {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  border: 1px solid navy;
  margin: 5px;
  padding: 10px;
}

code {
  font-family: monospace;
}

/* General highlighting */
pre code .keyword,
pre code .type      { color: var(--light-yellow); }
pre code .string    { color: var(--dark-yellow); }
pre code .number    { color: var(--magenta); }
pre code .constant  { color: var(--dark-yellow); }
pre code .variable  { color: var(--light-red); }
pre code .function  { color: blue; }
pre code .comment   { color: var(--comment-green); }
pre code .delimiter { color: var(--cyan); }

/* Language-specific */ 
pre code .keyword_function, .keyword_return {color: red;}