.display .comment {
    color: slategrey;
    font-style: italic;
}

.display .keyword {
    font-weight: bold;
}

.display .keyword.Axiom,
.display .keyword.Angle {
    color: darkcyan;
}

.display .keyword.Model  {
    color: rebeccapurple;
}

.display .keyword.Step {
    color: deeppink;
}

.display .keyword.Rule {
    color: forestgreen;
}

.display .keyword.Rule::after {
    content: "\BB";
    position: absolute;
    font-weight: bold;
}

.display .keyword.Color {
    color: olive;
}

.display .value.Axiom,
.display .value.Rule {
    color: steelblue;
}

.display .value.Angle,
.display .value.Model,
.display .value.Step {
    color: firebrick;
}

.display .value.Color {
    color: chocolate;
}
.display .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 4px;
    border: 1px outset grey;
}


#editor-wrapper {
    width: 100%;
    min-height: 300px;
    overflow-y: scroll;
    overflow-x: auto;

    position: relative;
}

#editor-wrapper .editor,
#editor-wrapper .display {
    position: absolute;
    top: 0;
    left: 0;
    font-family: monospace;
    width: 100%;
    min-height: 300px;
    border: 1px solid transparent;
    padding: 2px 5px;
}

#editor-wrapper .editor {
    color: transparent;
    caret-color: black;
}

#editor-wrapper .editor::selection,
#editor-wrapper .editor *::selection{
    background-color: yellow;
}

#editor-wrapper .display {
    pointer-events: none;
    background: transparent;
    border-color: grey;
}