#highlighting-js *, #highlighting-html *, #highlighting-css * {
  /* Also add text styles to highlighing tokens */
  font-size: 15pt;
  font-family: monospace;
  line-height: 20pt;
  tab-size: 2;
}

#ide {
  display:inline-grid;
  position: relative;
  width: 32.5%;
  height: 300px;
}

/* Move the textarea in front of the result */

#editing-js, #editing-html, #editing-css {
  margin: 10px;
  padding: 10px;
  border: solid 1px whitesmoke;
  border-radius: 8px;
  font-family: monospace;
  font-size: 20px;
  line-height: 20pt;
  width: 100%;
  height: 300px;
  grid-row:1;
  grid-column:1;
  z-index: 1;
  color: transparent;
  background: transparent;
  caret-color: limegreen;
  overflow: auto;
  white-space: pre-wrap; /* Allows textarea to scroll horizontally */
  resize: none;
}
#highlighting-js, #highlighting-html, #highlighting-css {
  margin: 10px;
  padding: 10px;
  border:0;
  font-family: monospace;
  width: 100%;
  height: 300px;
  font-size: 20px;
  line-height: 20pt;
  tab-size: 2;
  grid-row:1;
  grid-column:1;
  z-index: 0;
  overflow: auto;
  background: #282c34;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}

textarea#editing-html {
  border-radius: 8px 8px 0 0;
}

textarea#editing-html:focus {
  outline: none !important;
  border-radius: 8px 8px 0 0;
}

div#button-container {
  position: absolute;
  bottom: -2em;
  left: 10px;
  right:0;
  width: 100%;
  z-index: 1;
}

button:where(#head, #body) {
  position: absolute;
  display:inline;
  cursor: pointer;
  background: #282c34;
  font-family: monospace;
  font-size: 1rem;
  outline: none;
  width: 50%;
  bottom: 0;
  border: solid 1px whitesmoke;
  border-top: 0;
}

#head {
  left: 0;
  border-radius: 0 0 0 8px;
}

#body {
  right: 0;
  border-radius: 0 0 8px 0;
}

button.selected {
  background: #5a5f68;
}

#test {
  border: solid 1px whitesmoke;
  width: 35%;
  height: 375px;
}

span#s {
  color: #abb2bf;
}

span#el {
  color: #e06c75;
}

.hljs {
    white-space: pre-wrap;
    color: #abb2bf;
  }
  
  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
  }
  
  .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 .hljs-string {
    color: #98c379;
  }
  
  .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-built_in,
  .hljs-title.class_,
  .hljs-class .hljs-title {
    color: #e6c07b;
  }
  
  .hljs-emphasis {
    font-style: italic;
  }
  
  .hljs-strong {
    font-weight: bold;
  }
  
  .hljs-link {
    text-decoration: underline;
  }