html,
body {
  font-size: 0.9rem;
  font-family: consolas, monospace;
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

#html-editor {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
  caret-color: red;
  background: #000;
  line-height: 1.6;
  color: red;
}

#html-editor::selection {
  color: white;
  background: red;
}

#html-editor.is-composing {
  box-shadow: 0 0 0 0.25rem red;
}

.token-openTagStart,
.token-openTagEnd,
.token-closeTagStart,
.token-closeTagEnd,
.token-selfClose {
  background: rgb(7 53 92);
  margin: 0 2px;
  color: white;
  border-radius: 0.25rem;
}

.token-equal {
  color: white;
}

.token-tagName {
  font-weight: bold;
  color: rgb(117, 186, 242);
}

.token-attributeName {
  color: rgb(207, 81, 198);
}

.token-attributeValue {
  font-style: italic;
  color: rgb(127 230 127);
  border: 1px dashed #8c8c8c;
  border-width: 1px 0 1px 0;
}

.token-quoteStart,
.token-quoteEnd {
  font-weight: bold;
  color: rgb(127 230 127);
  border: 1px solid #8c8c8c;
  border-width: 1px 0 1px 1px;
  border-radius: 0.25rem 0 0 0.25rem;
}

.token-quoteEnd {
  border-width: 1px 1px 1px 0;
  border-radius: 0 0.25rem 0.25rem 0;
}

.token-text {
  color: #6a6a6a;
  padding: 0 0.25rem;
}

::highlight(ime-solid-thin) {
  text-decoration: underline 1px;
}

::highlight(ime-solid-thick) {
  text-decoration: underline 2px;
}

::highlight(ime-dotted-thin) {
  text-decoration: underline dotted 1px;
}

::highlight(ime-dotted-thick) {
  text-decoration: underline dotted 2px;
}

::highlight(ime-dashed-thin) {
  text-decoration: underline dashed 1px;
}

::highlight(ime-dashed-thick) {
  text-decoration: underline dashed 2px;
}

::highlight(ime-wavy-thin) {
  text-decoration: underline wavy 1px;
}

::highlight(ime-wavy-thick) {
  text-decoration: underline wavy 2px;
}

::highlight(ime-squiggle-thin) {
  text-decoration: underline wavy 1px;
}

::highlight(ime-squiggle-thick) {
  text-decoration: underline wavy 2px;
}