:root {
  /* invert toggle */
  --invert-content: 'invert'; /* could also read "☼ / ☽" */
  --invert-content-width: 2em;
  --invert-font-size: 1.2em;

  /* light palette */
  --light-fg: #000;
  --light-bg: #fff;
  --light-link: #00e;
  --light-visited: #551A8B;
  --light-td-bg: #eee;

  /* dark palette */
  --dark-fg: #eee;
  --dark-bg: #121212;
  --dark-link: #d3cec4;
  --dark-visited: #a39e93;
  --dark-td-bg: #504a40;

  /* default to light (autodetect later) */
  --fg: var(--light-fg);
  --bg: var(--light-bg);
  --link: var(--light-link);
  --visited: var(--light-visited);
  --td-bg: var(--light-td-bg);
}

html {
  height: 100%;
}

body {
  color: var(--fg);
  background-color: var(--bg);
  margin: 0em;
  display: flex;
  min-height: 100%;
}

#main {
  color: var(--fg);
  background-color: var(--bg);
  padding: 0.5em;
  margin: 0em;
  flex: 1;
}

header img {
  float:right;
  height: 80px;
  margin-right: 0.5em;
}

header h1 {
  margin-left: 0em;
  font-size: 2em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  max-width: calc(100% - var(--invert-content-width));
}

main h1 {
  margin-left: 0em;
  font-size: 2em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  max-width: calc(100% - var(--invert-content-width));
}

main h2 {
  margin-left: 0em;
  font-size: 1.5em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  max-width: calc(100% - var(--invert-content-width));
}

main h3 {
  margin-left: 0em;
  font-size: 1.5em;
  margin-block-start: 1em;
  margin-block-end: 0em;
  max-width: calc(100% - var(--invert-content-width));
}

table tr:nth-child(even) {
   background-color: var(--td-bg);
}

td.ml {
  text-align: left;
  font-weight: bold;
  White-space: nowrap;
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--visited);
}

pre {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  overflow-x: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: inherit;
}

dfn {
  font-weight: bold;
}

.head:after {
  content: '';
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

.foot:before {
  content: '';
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

table {
  margin-left:2em;
}

th {
  font-style:italic;
}

#mid {
  font-size:0.9em;
}

#received {
  float:right;
  padding-top: 0.6em;
  padding-bottom: 1em;
}

#invert {
  position: absolute;
  top: 0px;
  right: 0px;
  visibility: hidden;
}

.invert_label
{
  position: absolute;
  top: 0.3em;
  right: 0.6em;
  text-decoration: none;
  cursor: pointer;
  color: var(--fg);
  background-color: var(--bg);
  font-weight: bold;
  font-size: var(--invert-font-size);
}

.invert_label:after {
  content: var(--invert-content);
}

#invert:checked ~ #main {
  --fg: var(--dark-fg);
  --bg: var(--dark-bg);
  --link: var(--dark-link);
  --visited: var(--dark-visited);
  --td-bg: var(--dark-td-bg);

  background-color: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
  --fg: var(--dark-fg);
  --bg: var(--dark-bg);
  --link: var(--dark-link);
  --visited: var(--dark-visited);
  --td-bg: var(--dark-td-bg);
  }

  #invert:checked ~ #main {
  --fg: var(--light-fg);
  --bg: var(--light-bg);
  --link: var(--light-link);
  --visited: var(--light-visited);
  --td-bg: var(--light-td-bg);

  background-color: var(--bg);
  }
}

@media screen and (max-device-width: 480px){
  body {
    text-size-adjust: auto;
    -webkit-text-size-adjust: auto;
  }

  table {
    font-size: 1.8em;
  }

  pre {
    font-size: 1.5em;
  }
  
  #main {
    padding: 1.5em;
  }

  .invert_label
  {
    position: absolute;
    top: 1em;
    right: 1.5em;
  }
}