/* General styles */
body {
  background-color: #222;
  color: #eee;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 20px;
}

h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Layout */
.container-fluid {
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  margin-bottom: 20px;
}

/* Code block */
.source-code {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 5px;
}

.hljs {
  background-color: transparent;
  color: #eee;
}

/* Sandbox */
.sandbox {
  background-color: #fff;
  border: 1px solid #444;
  border-radius: 5px;
  height: 400px;
  overflow: auto;
}

/* Input */
#input {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 5px;
  color: #eee;
  height: 200px;
  padding: 10px;
  resize: vertical;
}

/* Rendered HTML */
#injected-html {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
  height: 100%;
}

.hljs{display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}