:root {
  --bg-color: #fff;
  --fg-color: #111;
  --link-color: darkblue;
}

* {box-sizing: border-box; margin:0;padding:0}
html, body {
  position: fixed;
  width: 100%;
  height: 100%;
  color: var(--fg-color);
  background: var(--bg-color);
  font-family: sans-serif
}
body[data-theme="dark"] {
  --bg-color: #111;
  --fg-color: #fff;
  --link-color: cyan;
}

header {position: absolute; top: 0; left: 0; padding-left: 1px; width: 100%; height: 26px; border-bottom: 1px solid var(--fg-color); vertical-align: middle}
main {position: absolute; top: 26px; left: 0; width: 100%; height: calc(100% - 46px);font-size: 16px}
footer {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 4px; height: 20px; border-top: 1px solid var(--fg-color); font-size: 14px}

header>* {display:inline-block; font-size: 18px; padding: 2px; vertical-align: middle;line-height:22px}
header .addr {text-overflow: ellipsis; overflow: hidden; max-width: 87%; white-space: nowrap}
footer .status {width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap}

.content {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  overflow: scroll;
  line-height:1.5em;
  white-space: pre;
}

.content[data-wrap="1"] {
  white-space: pre-wrap;
}

.content[data-format="plain"] {
  font-family: "Droid Sans Mono", monospace;
  font-size: 15px;
}

.content pre {
  font-family: "Droid Sans Mono", monospace;
  font-size: 15px;
  white-space: inherit!important;
}

.content a:before {
  content: "\21d2  ";
  color: var(--link-color);
  text-decoration: none;
}
.content a, .content a:visited, .content a:active {
  color: var(--link-color);
  text-decoration: none;
}
.content a[data-focused="1"] {text-decoration: underline}