html {
  height: 100%; }

body {
  background: -webkit-radial-gradient(#804050, #501020) 100% 100%;
  background: radial-gradient(#804050, #501020) 100% 100%; }

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 300px;
  width: 400px;
  background: #e2ded5;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  .container::before, .container::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%; }
  .container::before {
    top: 5%;
    bottom: 5%;
    border-radius: 10%/50%;
    background-color: #0000f7; }
  .container::after {
    top: 100%;
    bottom: -5%;
    background: #e2ded5; }

.tinyterm {
  top: 5%;
  left: 14%;
  height: 90%;
  width: 72%;
  overflow: hidden;
  font: 18px "VT323", monospace;
  box-shadow: none; }
  .tinyterm::after {
    content: "!";
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    height: 1.5em;
    line-height: 1.5em;
    width: 2em;
    font-size: 2.4em;
    text-align: center;
    color: #00f;
    background: #ff0;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .tinyterm a {
    color: #ff0; }
  .tinyterm.flash {
    background: none; }
    .tinyterm.flash::after {
      display: block; }