/* TODO: convert all px to rems. This is partially done.
    Pixels are here instead of rems because cursor mgmgt on
    mobile and desktop is not working with relative distances.
*/
  
  /* Apple //e font simulation. special glyphs like our cursor
     are mapped in upper addresses */
  @font-face {
    font-family: "Apple2Forever";
    src: url("/fonts/Apple2Forever.eot");
    src: url("/fonts/Apple2Forever.ttf") format('truetype');
  }
  
  /* Currently not used, but I keep it here for testing */
  @font-face {
    font-family: "EurostileBoldExtended";
    src: url("/fonts/EurostileExtended.ttf") format('truetype');
  }
  
  @font-face {
    font-family: "Apple2Forever";
    src: url("/fonts/Apple2Forever.eot");
    src: url("/fonts/Apple2Forever.ttf") format('truetype');
  }
  
  * {
    background-color: black;
    color: #00ff00;
    /*font-family: 'Apple2Forever', monospace;*/
    font-family: 'EurostileExtended', monospace;
    font-size: 14px;
    line-height: 125%;
  }
  
  body {
    margin: 10% 10%;
  }
  
  a {
      text-decoration: none;
      border-bottom: 1px dotted;
  }
  
  .hide {
    display: none;
  }

  /* svg paths */
  .cat {
    fill: none;
    stroke: #0f0;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 10px;
  }
  
  #catContainer {
    height: 5rem; 
  }
  
  .prompt {
    display: inline-block;
  }
  
  .prompt:before {
    content: "\005d";
  }

  .cursor {
    position: relative;
    display: inline-block;
    right: -10px;
    color: green;
  }
  
  .cursor:before {
    right: -15px;
    content: "\00ff";
    /* content: "\007f" for the cooler-looking cursor that only displys in Chrome */
    display: inline-block;
    
    /* this particular CSS animation does not work in Firefox 60.x and some other very modern browsers, so we emulate it with a javascript timer instead
    animation: flash 1s step-end infinite; */
  }

  /* this particular CSS animation does not work in Firefox 60.x and some other very modern browsers, so we emulate it with a javascript timer instead
  @-webkit-keyframes flash {
    0% {opacity: 1.0;}
    50% {opacity: 0.0;}
    100% {opacity: 1.0;}
  } */
  
  /* this particular CSS animation does not work in Firefox 60.x and some other very modern browsers, so we emulate it with a javascript timer instead
  @keyframes flash {
    0% {opacity: 1.0;}
    50% {opacity: 0.0;}
    100% {opacity: 1.0;}
  } */

  #cmdContainer {
    position: relative;
    min-width: 30px;
    display: inline-block;
    margin-left: -10px;
  }
  
  /* The input cmd box */
  #cmd {
    border: none;
    width: 100%;
    height: 2em;
    color: transparent; /* hide the default cursor blinking vertical line */
    text-shadow: 0px 0px 0px #00ff00; /* but show text when typed */
  }
  
  #cmd:focus {
    outline: none;
  }
  
  /* ascii graphics */
  #eric {
    color: lawngreen;
    font-size: 2px;
    line-height: 1px;
    letter-spacing: 0px;
    display: block;
    font-family: monospace;
    white-space: pre;
  }

/*
playback timings (ms):
  esindex: 0.018
  PetaboxLoader3.datanode: 168.426 (4)
  exclusion.robots: 0.309
  captures_list: 188.158
  CDXLines.iter: 37.484 (3)
  load_resource: 112.896
  RedisCDXSource: 1.415
  exclusion.robots.policy: 0.287
  LoadShardBlock: 143.544 (3)
  PetaboxLoader3.resolve: 34.487
*/