body {
    font-family: sans-serif;
    line-height: 1.25em;
    margin: 2em;
    min-width: 350px;
    max-width: 1100px;
}

img#logo { float: left; }
img#logo, h1 { margin: 0 1em 0 0; }

li { margin-bottom: 1em; }

p, li {color: #333;}

#about {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#about > div {
  padding-right: 2em;
  flex: 1;
}

@media(max-width: 900px) {
  body {
    margin: 20px 10px;
  }

  img#logo {
    width: 64px;
    height: 64px;
  }

  #about {
    flex-direction: column;
  }

  #about > div {
    padding-right: 0;
  }

  pre {
    width: 100%;
    overflow: scroll;
  }
}

ul {
  padding-left: 1em;
}

ul li {
  margin-bottom: 0.3em;
}

table tr th { text-align: left; }

table tr td
{
    padding-right: 1em;
    vertical-align: top;
}

/* first column: icon */
table tr td:first-child
{
    padding-left: 1em;
    padding-right: .25em;
}

/* last two columns: date and size */
table tr td + td + td,
table tr td + td + td + td
{
    font-size: 90%;
    font-family: monospace;
    white-space: pre;
}

/* override a bunch of the stuff above */
table#about tr th,
table#about tr td
{
    width: 20em;
    padding: 0 1em 0 0;
    font-size: 100%;
    white-space: normal;
}

.alert {
  clear: both;
  padding: 20px;
  background-color: #ff9800; /* Orange */
  color: white;
  margin: 15px auto;
  max-width: 42em;
  border-radius: 4px;
}