a, a:focus, a:hover {
    color: #e25e6a;
    text-decoration: none;
}
a:hover  { color: #41b990; }

.hidden  { display: none; }

.container {
  max-width: 80ch;
  font-size: 130%;
}

html, body {
  height: 100%;
  background: #fff;
  font-family: "Nunito", sans-serif;
}
body {
  color: #333;
  text-align: left;
}

nav  { margin-top: 2em; }
nav dt  { margin-top: 1.2rem; }
nav time {
  font-style: italic;
  color: #607d8b;
  font-size: 80%;
}

nav dl a, nav dl a:focus {
  color: #41b990;
  text-decoration: none;
  font-size: 120%;
}
nav dl a:hover  { text-decoration: none; }
nav dt  { font-weight: normal; }

h1  { color: #265483; }

h1 .rss  { font-size: 50%; }

h1, h2, h3, h4, h5, h6 {
  color: #265483;
  margin-top: 1.2em;
  margin-bottom: 1em;
  font-weight: 700;
  font-size: 160%;
}

code {
  font-size: 100%;
  color: #c35b7d;
  font-family: "IBM Plex Mono", monospace;
}

pre {
  font-family: "IBM Plex Mono", monospace;
  padding: 20px;
  margin: 2em 0 !important;
}

pre.lang-c::before,
pre.lang-python::before,
pre.lang-python3::before,
pre.lang-bash::before,
pre.lang-json::before,
pre.lang-text::before {
  display: block;
  float: right;
  color: #1bc5e0;
  font-size: 75%;
  user-select: none;
}

/* TODO: figure out what is going on here, probably pygments? */
pre.lang-c::before  { content: "C"; }
pre.lang-python::before  { content: "Python"; }
pre.lang-python3::before { content: "Python"; }
pre.lang-bash::before  { content: "sh"; }
pre.lang-json::before  { content: "json"; }
pre.lang-text::before  { content: "plaintext"; }

article  { margin-top: 2em; }
article aside  { font-size: 80%; }
article time {
  font-style: italic;
  color: #607d8b;
}
article aside.timestamp {
  text-align: right;
}
article aside a, article aside a:focus, article aside a:hover {
  color: #41b990;
}

article blockquote {
  border-left: 0.1em solid #8768bb;
  padding-left: 1em;
  color: #545b62;
  margin: 2em 0;
}

article img, article video {
  max-width: 90%;
  margin: 0 auto;
  display: block;
  padding: 2em 0;
  max-height: 80vh;
}
article img.small  { width: 30%; }

article iframe {
  margin: 2em auto;
  display: block;
  max-width: 90%;
}

article .twitter-tweet  { margin: 0 auto; }  /* TODO: remove? */

footer {
  margin-top: 2.2em;
  padding-top: 2em;
  margin-bottom: 2em;
  border-top: 1px solid #433e56;
}

.img-me-container {
  padding-right: 0px;
  margin-top: -10px;
}

.disclaimer {
  text-align: right;
  font-size: 70%;
  color: #999;
}

.info {
  font-family: "IBM Plex Mono", monospace;
  font-size: 75%;
}
.info a, .info a:focus {
  color: #41b990;
  text-decoration: none;
  white-space: nowrap;
}
.info a:hover { color: #63c8f6; }

.name  { color: #c35b7d; }
.location  { color: #666; }

@media (max-width: 768px) {
  .disclaimer, .info  { text-align: center; }
  .disclaimer  { margin-top: 1em; }
}

.image-caption {
  display: block;
  text-align: center;
  margin-top: -2em;
  margin-bottom: 3em;
}

/* TODO: Figure out what is happening here: */
figure[data-layered]  { margin: 1rem auto; }

figure[data-layered] img {
  display: none;
  max-height: 90vh;
  max-width: 100%;
}

figure[data-layered] img.active {
  display: block;
}

figure[data-layered] .buttons {
  margin-top: -1.5em;
  margin-bottom: 2em;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
figure[data-layered] .buttons button {
  border: 1px solid transparent;
  background: #17a2b8;
  color: white;
  padding: 0.2rem 1rem;
}
figure[data-layered] .buttons button:hover, figure[data-layered] .buttons button:focus {
  background: #19e0ff;
}
figure[data-layered] .buttons button:first-child {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
figure[data-layered] .buttons button:last-child {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.pure-form input[readonly] {
  background-color: #dfe;
  font-weight: bold;
  color: black;
  border: none;
  box-shadow: none;
}
.pure-form {
  width: 90%;
  max-width: 500px;
  margin: 2em auto;
}
.pure-form input, .pure-form select  { width: 100%; }
.pure-form .pure-form-message {
  color: #046;
  text-align: right;
}
#form-warning {
  color: red;
  font-weight: bold;
}