html {
  width: 100vw; /* scroll bars don't affect window size */
  overflow-x: hidden;
  color:#d9d9d9;
  line-height: 1.6;
}

body, p {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: rgb(12, 14, 20);
  font-size: 16px;
  max-width: 800px;
  margin: 2em auto+5em;
}

code {
  background-color: rgb(9, 43, 94);
}

h1 {
  color: rgb(255, 255, 255);
  text-align: center;
}

h3 {
  color: #b0ca87;
}

img, video, figure {
  width: 100%;
}

p, pre, h2, video, ul, figure {
  max-width: 800px;
  margin: 2em auto;
}

dt {
  font-weight: bold;
}

img {
  max-width: 800px;
  margin: 0em auto;
}

pre {
  background-color: gray;
  line-height: 1.3;
}

.headerBar {
  list-style-type: none;
  margin: 2em auto;
  max-width: 800px;
  padding: 0;
  overflow: hidden;
  background-color: rgb(50, 87, 71);
}

.headerli {
  float: left;
}

.headerli a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.headerli a:hover {
  background-color: rgb(26, 26, 26);
}

/* mobile device support */
/*
@media screen and (max-width: 800px) {
  p, body, pre, ul {
    font-size: 3vw;
  }
}
*/

.link {
  color:rgb(0, 136, 194);
}

.link:visited {
  color:rgb(200, 0, 50);
}

.link:hover {
  color:rgb(144, 0, 201);
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.caption {
  text-align: center;
  font-style: italic;
}

figcaption {
  font-style: italic;
  font-size: 14px;
}

figcaption, video {
  line-height: 1.0;
}

.sameline {
  display: flex;
  justify-content: space-between;
}

/* thanks to JB for this */
a:link, a:visited {
  text-decoration:none;
  transition:.35s ease-in-out;
}

a:hover {
  text-decoration:none;
  transition:.10s ease-in-out;
}

.textimage {
  width: 24em;
  height: 6em;
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: 100%;
  position: relative;
  transition-duration: .3s, .0s, .35s;
  transition-delay: .0s, .3s, 0s;
  transition-property: background-size, background-position, color;
}
.textimage:hover {
  background-size: 110%;
  background-position: 50%;
  transition: background-size .2s ease-in-out, color .2s;
}

.textimage-content {
  position: absolute;
  bottom: 0;
  background-color: rgba(12, 14, 20, .8);
  width: 100%;
}

.link-spanner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.flexy {
  display: flex;
  align-items: flex-end;
}

.flexy-sub {
  flex: 1;
}