@font-face {
    font-family: 'CatTextScreenFont';
    src: url('../fonts/N/N-Font_Original.TTF') format('truetype');
    //src: url('../fonts/3/SMILEBASIC.ttf') format('truetype');
}

.console {
    font-family: 'CatTextScreenFont';
    font-size: 24px;
    line-height: 24px;
    //transform: scale(0.5, 1.0);
    transform-origin: top left;
    width: 960px;
    height: 300px;
    background-color:#00000000;
}

.console .rot90 {
    display: inline-block;
    transform: rotate(90deg)
}

.console .rot180 {
    display: inline-block;
    transform: rotate(180deg)
}

.console .rot270 {
    display: inline-block;
    transform: rotate(270deg)
}

.console .cursor {
    background: linear-gradient(to right, rgba(200, 200, 200, 1.0) 20%, rgba(200, 200, 200, 1.0) 20%);
    animation-duration: 1.0s;
    animation-name: cursorAnimation;
    animation-iteration-count: infinite;
}
  
@keyframes cursorAnimation {
    from {
        background: linear-gradient(to right, rgba(200, 200, 200, 1.0) 25%, rgba(200, 200, 200, 1.0) 25%); 
    }
    to {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.0) 25%, rgba(0, 0, 0, 1.0) 25%);
    }
}

.graphicsLayer {
    width: 960px;
    height: 300px;
    transform-origin: top left;
    transform: scaleY(2.0);
}

.canvas-wrapper {
    position: relative;
    width: 960px;
    height: 600px;
}

.canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.canvas-wrapper .console {
    position: absolute;
    top: 0;
    left: 0;
}