@font-face {
  font-family: 'vt220';
  src: url('decterm.ttf') format('truetype');
}  
html {
  background-color: #333;
  width: 100%;
  overflow: hidden;
}
body {
  margin: auto;
  width: 84ch;
  padding: 1em 2em 3em 2em;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  /* font-family: 'vt220'; */
  font-family: monospace;
}
body, body:before {
  background-color: #ffe; 
  border: 0.5em #795548 solid;
  border-radius: 2em;
}  
body:after, body:before {
  content: "";
  z-index: -1;
  position: absolute;
  display: none;
}
body:after {
  width: 32em;
  height: 1em;
  right: 12em;
  bottom: -1.5em;
  background-color: #4c352d;
}
body:before {
  width: 56em;
  height: 20em;
  right: -0.5em;
  bottom: -22.5em;
}
.terminal {
  background-color: #000;
  color: #33ff33;  /* P1 green */
  box-shadow: 0 0 2em 0.5em rgba(51,255,51,0.4); /* P1 green */
/*  color: #ffb000;  /* P3 amber */
/*  box-shadow: 0 0 2em 0.5em rgba(255,176,0,0.4); /* P3 amber */
  padding: 1em 2ch;
  border-radius: 1em;
  /*
  animation: flicker steps(25) 0.04s infinite;
  animation: flicker steps(3) 0.04s infinite;
  animation: flicker steps(1) 1s infinite;
  */
}
#stdout {
  width: 80ch;
  padding: 0;
  height: 30em;
  line-height: 1.2em;
  white-space: pre-wrap;
  overflow: hidden;
}
#logo img, #logo p {
  position: absolute;
}
#logo img {
  height: 2em;
  right: 3em;
  bottom: 0.5em;
}
#logo p.postit {
  color: #333;
  font-size: 1.67em;
  font-family: 'Reenie Beanie';
  /*
  left: 32em;
  */
  right: 7em;
  bottom: -3.2em;
}
#logo p.model {
  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -0.05em 0, hsla(0,0%,100%,.6) 0 0.1em 0.05em;
/*
  color:#999;
  text-shadow: 1px 1px #666;
  box-shadow: 0 0 0.05em #795548, 2px 2px 2px #999;
  box-shadow: 0 0 0.25em 0.05em #adad8d;
*/
  left: 3em;
  font-size: 1.2em;
  font-family: Helvetica;
  font-weight: bold;
  text-transform: uppercase;
  bottom: -0.6em;
  padding: 0.35em 0.5em 0.15em 0.5em;
  border-radius: 0.25em;
  box-shadow: 0 0.1em 0.25em #ad9d9d, 
        inset 0 0 0.1em #adad8d;
}

#caret:after {
  content: '\2588';
  animation: blink steps(1) 1s infinite;
}

@keyframes blink {  
  50% { opacity: 0.0; }
}

@keyframes flicker {  
  50% { 
    /*
    opacity: 0.0;
    color: #f00; 
    */
    color: #00f000; 
    box-shadow: 0 0 2em 0.5em rgba(0,192,0,0.6);
  }
}

.postit {    
  text-align:center;     
  padding:1em;
  position:relative;
  border:0.1em solid #E8E8E8;
  font-family:'Reenie Beanie';
  border-top-right-radius: 1.5em 0.5em;
  display:inline-block;
  background: #ffff88;
  background: linear-gradient(45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
  transform: rotate(3deg);
  box-shadow:0.2em 0.2em 1em rgba(0, 0, 0, 0.40);
}

.postits:before {
  transform: rotate(-3deg);
  content: "";
  position:absolute;
  z-index:-1;
  right:0; bottom:1.3em;
  width:10em;
  height: 2em;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:0.25em 1em 0.3em rgba(0, 0, 0, 0.40);
  transform: matrix(-1, -0.1, 0, 1, 0, 0);
}