iframe {
    flex: 1;
    height: 100%;
}

body {
    margin: 0;
}


div.app {
    display:flex;
    margin:0;
    height: 100vh;
}

div, div.app > div, iframe {
    align-items: stretch;
    width:100%;
}

div::before {
    height: 20px;
    position: absolute;
    display: inline-block;
    background: lightgray;
    padding: .5em;
    padding-top: .3em;
    opacity: 80%;
    border-bottom-right-radius: 10px 10px;
    border: solid 1px grey;
}

div.asciidoctor::before {
    content: "HTML (Asciidoctor)"
}

div.pagedjs::before {
    content: "Paginated HTML A5 (Paged.js)"
}

div.pdfjs::before {
    content: "PDF A4 (WeasyPrint)"
}

 /* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  height:100%;
  text-align: center;
  text-wrap: balance;
}

/* Modal Content/Box */
.modal-content {
  max-width: 30em;
  background: #eee;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: solid 1px grey;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
  height: 0;
  margin-right: -.1em;
  margin-top: -.5em;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}