img, canvas
{
    border: 1px solid black;
}

body
{
    font-family: Sans-Serif;
    font-size: small;
    text-align: center;
    background-color: Black;
    color: White;
}

input
{
    background-color: Black;
    border: 1px solid White;
    color: White;
}

a
{
    color: White;
}

li b
{
    color: Red;
    font-size: large;
}

td.data
{
    text-align: right;
}

td.step
{ 
    text-align: center;
    border-left: 1px solid red;
    border-right: 1px solid red;
}

div.words
{
    padding: 1em;
}

.words span
{
    border: 1px solid white;
    border-radius: 10px;
    padding: 0.5em;
    margin: 0.2em;
    background-color: Red;
    color: White;
    font-weight: bold;
}

td.step .words span
{
    border: 2px solid red;
}

span.container
{
    background-color: #ccc;
    border: 1px solid black;
    padding: 0.7em 0 0.7em 0;
}

td.step .words span.container span
{
    border: 0;
}

span.container span.container
{
    background-color: White;
}

span.container span.container span.container
{
    background-color: #ccc;
}

span.empty
{
    background-color: #ccc;
    color: Black;
}

span.scope
{
    background-color: transparent;
    color: Blue;
}

span.sleep
{
    background-color: transparent;
    color: Green;
}

span.break
{
    background-color: transparent;
    color: Red;
}

span.number
{
    background-color: Black;
}

span.string
{
    background-color: Maroon;
}

span.boolean
{
    background-color: Navy;
}

span.primitive
{
    background-color: Orange;
}

span.function
{
    background-color: Purple;
}

span.operator
{
    background-color: Red;
}