html,body {margin:0; padding:0; overflow:auto; width:100%; height:100%; background-color:black; color:white; font-family:monospace; font-size:14px;}
body {display:grid; align-items:center;}

div {display:block; margin:0; padding:0;}
div.vga {margin:auto; z-index:10; background-color:#000000;}
div.io {position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:3; overflow:hidden;}
div.ioblank {position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:9; background-color:black;}
div.io textarea {display:block; width:50px; height:50px;}
div.io audio {display:block; width:20px; height:20px;}
div.output {z-index:4;}
div.input {z-index:5;}
div span {margin:0; padding:0; border:0;}

.vga-f0 {color:#000000;}
.vga-f1 {color:#0000AA;}
.vga-f2 {color:#00AA00;}
.vga-f3 {color:#00AAAA;}
.vga-f4 {color:#AA0000;}
.vga-f5 {color:#AA00AA;}
.vga-f6 {color:#AA5500;}
.vga-f7 {color:#AAAAAA;}
.vga-f8 {color:#555555;}
.vga-f9 {color:#5555FF;}
.vga-fA {color:#55FF55;}
.vga-fB {color:#55FFFF;}
.vga-fC {color:#FF5555;}
.vga-fD {color:#FF55FF;}
.vga-fE {color:#FFFF55;}
.vga-fF {color:#FFFFFF;}

.vga-bt {background-color:transparent;}
.vga-b0 {background-color:#000000;}
.vga-b1 {background-color:#0000AA;}
.vga-b2 {background-color:#00AA00;}
.vga-b3 {background-color:#00AAAA;}
.vga-b4 {background-color:#AA0000;}
.vga-b5 {background-color:#AA00AA;}
.vga-b6 {background-color:#AA5500;}
.vga-b7 {background-color:#AAAAAA;}
.vga-b8 {background-color:#555555;}
.vga-b9 {background-color:#5555FF;}
.vga-bA {background-color:#55FF55;}
.vga-bB {background-color:#55FFFF;}
.vga-bC {background-color:#FF5555;}
.vga-bD {background-color:#FF55FF;}
.vga-bE {background-color:#FFFF55;}
.vga-bF {background-color:#FFFFFF;}

.vga-blink {
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }