@charset "UTF-8";
body {
  color: #000;
  background-color: #eee;
  background-repeat: repeat;
  background-attachment: scroll;
  font-family: "Anonymous Pro", "Courier New", monospace;
  margin: 0;
  padding: 12px;
  text-align: center; }

@media (prefers-color-scheme: dark) {
  body {
    color: #fec;
    background: #222;
  }
}

p, h1, h2, h3, h4, h5, h6, ul, ol {
  display: block;
  margin: 1em 0 1em 0;
  font-weight: normal; }

p {
  font-size: 1em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1em;
  font-weight: bold; }

nav a {
  margin: 0;
  padding: 8px;
  display: inline-block;
  color: #000;
  text-decoration: none; }
  nav a.active {
    font-weight: bold; }
  nav a:hover, nav a:focus, nav a.active {
    color: #eee;
    background-color: #080;
    outline: none;
    text-decoration: none; }

a {
  color: #080; }
  a:link, a:active {
    text-decoration: none; }
  a:hover {
    text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  a {
    color: #8e8;
  }
  nav a {
    color: #fec;
  }
  nav a:hover, nav a:focus, nav a.active {
    color: #fec;
    background-color: #372;
  }
}

ol {
  padding-left: 2em; }

ul {
  padding-left: 0;
  list-style-type: none; }
  ul li:before {
    content: '⇥ '; }

table {
  margin-top: 1em;
  margin-bottom: 1em;
  /*font-size: 1em;*/
}

table, th, td {
  border: none;
  border-collapse: collapse; }

th, td {
  padding-bottom: 0.1em;
  padding-right: 2em;
}

.wrapper {
  text-align: left;
  margin: auto;
  padding: 0 0.5em 0 0.5em;
  min-width: 100px;
  max-width: 1000px;
  /* -webkit-text-size-adjust: auto; */
}

@media (orientation: landscape) {
  .wrapper {
    -webkit-text-size-adjust: 150%;
  }
}

.table {
    display: table;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    padding-right: 1.5em;
}

.navbar {
  margin-bottom: 2em; }

.footer {
  border-top: 1px solid #ccc;
  padding: 4px 0 4px 0;
  margin-top: 2em; }

.project, .hlog {
  background-color: #ddd;
  margin: 1em 0;
  padding: 0.5em 0.8em; }

@media (prefers-color-scheme: dark) {
  .project, .hlog {
    background-color: #333;
  }
}

.project {
  border: 1px solid #ccc; }
  .project .metadata, .project .body {
    display: block; }
    .project .metadata:after, .project .body:after {
      clear: both;
      content: '';
      display: block; }
  .project .title, .project .date {
    margin: 4px 0 4px 0;
    padding: 0; }
  .project .title {
    display: inline-block;
    font-weight: bold;
    float: left; }
  .project .date {
    display: inline-block;
    float: right; }
  .project img.screenshot {
    padding: 0;
    margin-left: 1em;
    margin-bottom: 1em;
    max-width: 100px;
    height: auto;
    float: right; }

.collapsible-control {
  cursor: pointer; }

.collapsible-button {
  color: #888;
  margin-left: 8px; }

.hlog {
  background-color: #ddd; }
  .hlog .header {
    font-size: 1.5em;
    margin-bottom: 0.5em; }
    .hlog .header .id {
      width: 50%; }
    .hlog .header .date {
      width: 50%;
      text-align: right;
      float: right;
      clear: both; }
  .hlog .attachment {
    text-align: center;
    margin-top: 1.75em;
    margin-bottom: 1.25em; }
    .hlog .attachment .caption {
      color: #888; }
    .hlog .attachment img {
      max-width: 100%;
      max-height: 600px; }
  .hlog .attachment + .attachment {
    margin-top: 2.25em; }
  .hlog a.hlog-header-link, .hlog a.hlog-header-link:link {
    color: #000; }
    .hlog a.hlog-header-link:hover, .hlog a.hlog-header-link:focus, .hlog a.hlog-header-link.active, .hlog a.hlog-header-link:link:hover, .hlog a.hlog-header-link:link:focus, .hlog a.hlog-header-link:link.active {
      text-decoration: none;
      color: #080; }

#avatars div {
  max-height: 100px;
  display: inline-block;
  margin-bottom: 6px;
  margin-right: 6px;
  border: 1px solid transparent;
}

#avatars div:hover {
  border: 1px solid green;
}


#avatars div a:hover {
  text-decoration: none; }