* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    border-collapse: collapse;
}

body {
    background-color: #888;
}

#output {
    width: 100%;
    height: calc( 100% - 24px );
    position: absolute; 
    background-color: #080810;
    overflow-y: auto;
    overflow-x: wrap;
    color: #eef;
    white-space: pre;
    font-size: 16px;
    line-height: 16px;
    font-family: proggyvector, terminal, courier, "small fonts";
}

#prompt {
    width: 100%;
    height: 24px;
    position: absolute;
    bottom: 0px;
    color: #eef;
    background-color: #101030;
    border: none;
    outline: none;
    font-family: proggyvector, terminal, courier, "small fonts";
}
div.row {
    height: 16px !important;
    line-height: 16px !important;
    max-height: 16px !important;
}

div.cell {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    line-height: 16px;
    /*border: 1px solid #fff4;*/
    text-align: center;
    font-family: arial;
}

.cell_1 ,
.cell_2 ,
.cell_3 ,
.cell_4 ,
.cell_5 ,
.cell_6 ,
.cell_7 ,
.cell_8 ,
.cell_9 ,
.cell_0 ,
.cell_H ,
.cell_V ,
.cell_F {
    border      : none !important;
    color       : #ff0;
    background  : #f0f;
}

.cell_D {
    color: #fff;
    background: #0f0;
}

.cell_A {
    color: #888;
    background: #00f;
}

.cell_P {
    color: #ff0;
    background: #f00;
}

.cell_ { /* Empty */
    color           : #444;
    background      : #000;
    border          : none !important;
}

.cell_1 {        
    border-left     : 1px #fff solid !important;
    border-bottom   : 1px #fff solid !important;
}
.cell_2 {        
    border-bottom   : 1px #fff solid !important;
}
.cell_3 {        
    border-right    : 1px #fff solid !important;
    border-bottom   : 1px #fff solid !important;
}
.cell_7 {        
    border-left     : 1px #fff solid !important;
    border-top      : 1px #fff solid !important;
}
.cell_8 {        
    border-top      : 1px #fff solid !important;
}
.cell_9 {        
    border-right    : 1px #fff solid !important;
    border-top      : 1px #fff solid !important;
}
.cell_4 {        
    border-left     : 1px #fff solid !important;
}
.cell_5 {        
    border          : 1px #fff solid !important;    
}
.cell_6 {        
    border-right    : 1px #fff solid !important;
}
.cell_H {
    border-top      : 1px #fff solid !important;
    border-bottom   : 1px #fff solid !important;
}
.cell_V {
    border-left     : 1px #fff solid !important;
    border-right    : 1px #fff solid !important;
}
.cell_C { 
    border-top      : 1px #fff solid !important;
    border-left     : 1px #fff solid !important;
    border-right    : 1px #fff solid !important;
}

.red {
    color: #b00;
    animation: glow-red 125ms ease-in-out 0s infinite normal forwards;
}

.yellow {
    color: #eb0;
    animation: glow-yellow 125ms ease-in-out 25ms infinite normal forwards;
}

.orange {
    color: #f80;
    animation: glow-orange 125ms ease-in-out 25ms infinite normal forwards;
}

.green {
    color: #0c0;
    animation: glow-green 125ms ease-in-out 50ms infinite normal forwards;
}

.blue {
    color: #00c;
    animation: glow-blue 125ms ease-in-out 50ms infinite normal forwards;
}

@keyframes glow-red {
    0%   { text-shadow: 0px 0px 3px #f00; }
    50%  { text-shadow: 0px 0px 1px #f00; }
    100% { text-shadow: 0px 0px 3px #f00; }
}
@keyframes glow-yellow {
    0%   { text-shadow: 0px 0px 3px #ff0; }
    50%  { text-shadow: 0px 0px 1px #ff0; }
    100% { text-shadow: 0px 0px 3px #ff0; }
}
@keyframes glow-green {
    0%   { text-shadow: 0px 0px 3px #0f0; }
    50%  { text-shadow: 0px 0px 1px #0f0; }
    100% { text-shadow: 0px 0px 3px #0f0; }
}
@keyframes glow-blue {
    0%   { text-shadow: 0px 0px 3px #00f; }
    50%  { text-shadow: 0px 0px 1px #00f; }
    100% { text-shadow: 0px 0px 3px #00f; }
}
@keyframes glow-orange {
    0%   { text-shadow: 0px 0px 3px #f80; }
    50%  { text-shadow: 0px 0px 1px #f80; }
    100% { text-shadow: 0px 0px 3px #f80; }
}