@font-face {
    font-family: 'VGA';
    src: url('Web437_IBM_VGA_9x16.woff') format('woff');
}

@font-face {
    font-family: 'ComicMono';
    src: url('ComicMono.ttf') format('truetype');
}

body, div#page {
  margin: 0px;
  /* padding: 16px; */
  /* width: 720px; */
  width: 100%;
  height: 100%;
  background-color: #111111;

  background: #2A7B9B;
  background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);

  background: #752a9b;
  background: linear-gradient(90deg,rgba(117, 42, 155, 1) 0%, rgba(78, 45, 87, 1) 50%, rgba(4, 128, 217, 1) 100%);

  background: #4b1e61;
  background: linear-gradient(90deg,rgba(75, 30, 97, 1) 0%, rgba(94, 16, 105, 1) 50%, rgba(1, 0, 59, 1) 100%);



  background: url("background.webp");
  background-size: cover;
  background-position: center;
}

div#out {

  margin: 0px;
  padding: 16px;
  padding-bottom: 48px;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 12px;
  line-height: 150%;
  /* border: 1px solid gray; */

  /* height: calc(100% - 32px); */
  height: calc(100% - (16px + 48px));
  /* height: 100%; */
  /* padding-bottom: 64px; */
  display: flex;
  flex-direction: column;
}

span.out {
    /* white-space:pre; */
    word-wrap: normal;
    /* font-family: SimSun; */
    font-family: ComicMono;
    font-size: 16px;
    color: #C0C0C0;
    display: block;
    /* min-height: 18px; */
}

span.input {
    word-wrap: normal;
    /* word-wrap: break-word; */
    font-family: ComicMono;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #404040;
    background-color: rgba(40, 40, 40, 0.5);

    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 4px;
    margin-bottom: 4px;

    display: block;
}

div#cmd {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  height: 32px;
}

input#cmd {
  font-size: 18px;
  /* padding: 5px; */


  /* 96 times number of buttons */
  width: calc(100% - 192px - 16px);
  height: 32px;
  padding: 0px;
  margin: 0px;
  border: 0px;

  padding-left: 16px;
}

button.cmd {
  font-size: 18px;
  /* width: 80px; */
  /* padding: 7px; */
  /* margin: 1px; */


  width: 42px;
  height: 32px;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

input.cmdUploader {
  font-size: 18px;
  /* width: 80px; */
  /* padding: 7px; */
  /* margin: 1px; */


  width: 16px;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

div.dummy_element_squisher
{
    flex-grow: 1;
}

html
{
    height: 100%;
}





div.popup_overlay
{
    position: absolute;
    display: none;
    /* width: 512px; */
    max-width: calc(100% - 64px);
    /* top: 25%; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    /* margin: 32px; */

    background-color: white;
}

div.close_button
{
    float: right;
    cursor: pointer;
    padding: 8px;
    background-color: #E0E0E0;

    border-radius: 8px;
}



.editor_buffer
{
    width: 256px;
    height: 256px;
}