body {
  background-color: #647086;
  color: #191722;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 16pt;
  line-height: 21pt;
  padding: 0;
  margin: 0;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  text-rendering: optimizeLegibility;
}
h2 {
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

a:hover {
  text-decoration: underline;
}

body.blog header,
body.about header {
  background-color: #191722;
  color: #ffffff;
  text-shadow: #191722 1px 0 10px;
  height: 30vh;
}
body.blog.front header,
body.about header {
  height: 80vh;
}
body.blog header::before,
body.about header::before {
  content : '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('../img/mdpi/hawaii.jpg');
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30vh;
  width: 100vw;
  opacity : 0.3;
}
body.blog.front header::before,
body.about header::before {
  height: 80vh;
}

body.blog header .container,
body.about header .container {
  position: relative;
  height: 30vh;
  width: 60vw;
  margin-left: 2em;
  margin-right: auto;
  box-sizing: border-box;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-evenly;
}
body.blog header .container h1,
body.about header .container h1 {
  font-size: 8vmin;
  line-height: 10vmin;
}
body.blog.front header .container,
body.about header .container {
  height: 80vh;
  padding-top: 2em;
  padding-bottom: 2em;
}
body.blog.front header .container h1,
body.about header .container h1 {
  font-size: 12vmin;
  line-height: 15vmin;
  margin: 0;
  padding: 0;
}
body.blog header .container a,
body.about header .container a {
  color: #ffffff;
  text-decoration: none;
}
body.blog header .container a:hover,
body.about header .container a:hover {
  color: #d2b2b9;
}
body.blog header .container p a,
body.about header .container p a {
  font-weight: bold;
}
body.blog.front header .container h1 a,
body.about header .container h1 a {
  font-weight: 100;
}
body.blog.front header .container p,
body.about header .container p {
  font-size: 5vmin;
  line-height: 8vmin;
  margin: 0;
  padding: 0;
}
body.blog .about {
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  color: #ffffff;
}
body.blog .about a {
  color: #ffffff;
}
body.blog .articles {
  width: 100vw;
  box-sizing: border-box;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #d2b2b9;
}
body.blog .articles article {
  width: 50%;
  box-sizing: border-box;
  padding: 1em;
  margin-bottom: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.blog .articles article h1 {
  margin: 0;
  padding: 0;
  font-size: 28pt;
  line-height: 32pt;
}
body.blog .articles article .metadata {
  margin-top: 1em;
  margin-bottom: 1em;
  font-style: italic;
  font-size: smaller;
}
body.blog .articles article h1 {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}
body.blog .articles article a {
  color: #191722;
  text-decoration: none;
}
body.blog .articles article a:hover {
  text-decoration: underline;
}
body.blog .articles article img.cover,
body.blog .articles article div.no-cover {
  object-fit: cover;
  width: 100%;
  height: 30vmin;
  margin-bottom: 1em;
  filter: grayscale(60%);
  opacity: 0.8;
}
body.blog.front .articles article:nth-child(1) {
  width: 100vw;
  background-color: #647086;
  color: #ffffff;
  margin-top: -1em;
  margin-left: -1em;
  margin-right: -1em;
  padding: 2em;
}
body.blog.front .articles article:nth-child(1) a {
  color: #ffffff;
}
body.blog.front .articles article:nth-child(1) div.no-cover {
  display: none;
}
body.blog ul.pager {
  margin-left: 2em;
  margin-right: 2em;
  padding: 0;
  text-align: center;
  line-height: 42pt;
}
body.blog ul.pager li {
  list-style: none;
  display: inline;
  margin: 0.5em;
  white-space: nowrap;
}
body.blog ul.pager li a {
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}
body.blog ul.pager li a:hover {
  text-decoration: underline;
}

body.post article {
  margin-left: 2em;
  margin-right: 2em;
  background-color: #d2b2b9;
  margin-top: 0px;
  box-sizing: border-box;
  padding: 2em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

body.post img#cover,
body.post #no-cover {
  width: 35%;
  min-height: 17em;
  max-height: 23em;
  object-fit: cover;
  padding-left: 2em;
  box-sizing: border-box;
  filter: grayscale(60%);
  opacity: 0.8;
}

body.post article header {
  width: 65%;
  text-align: right;
  align-items: stretch;
  box-sizing: border-box;
  padding-bottom: 2em;
}

body.post article header h1 {
  font-size: 42pt;
  line-height: 50pt;
  margin-top: 0;
  padding-top: 0;
}
body.post article .content {
  width: 65%;
}
body.post article .categorymeta {
  width: 35%;
  padding-left: 2em;
  box-sizing: border-box;
  font-size: smaller;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.post .related {
  margin-top: 2em;
  font-size: smaller;
}
body.post .related h2 {
  text-align: center;
}
body.post .related .articles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: stretch;
  font-size: smaller;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: -1em;
  margin-right: -1em;
}
body.post .related article {
  display: block;
  width: 50%;
  padding: 1em;
  margin: 0;
  box-sizing: border-box;
}
body.post .related article h1 {
  margin: 0;
  padding: 0;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-weight: bold;
}
body.post .related article h1 a {
  color: #191722;
  text-decoration: none;
}
body.post .related article h1 a:hover {
  text-decoration: underline;
}
body.post .related article .metadata {
  font-style: italic;
  font-size: smaller;
  display: block;
}
body.post .related article img.cover,
body.post .related article div.no-cover {
  object-fit: cover;
  width: 100%;
  height: 20vmin;
  margin-bottom: 1em;
  filter: grayscale(60%);
  opacity: 0.8;
}

body.post article img,
body.post article iframe {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body.post article pre {
  max-width: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
  font-size: 12pt;
  line-height: 16pt;
}

body.post article a {
  color: #191722;
}

body.post article .metadata {
  font-style: italic;
}

body.page article {
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1em;
  margin-bottom: 0px;
  padding: 1em;
  background-color: #d2b2b9;
}
body.page article header {
  box-sizing: border-box;
  margin-top: -2em;
  margin-left: -3em;
  margin-right: -3em;
  padding: 3em;
  background-color: #191722;
  color: #ffffff;
  line-height: 42pt;
}
body.page article h1 {
  margin-top: 0;
  margin-bottom: 0;
}
body.page article a {
  color: #191722;
}
body.page article img {
  max-width: 60%;
  display: block;
}

body.about .about {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: stretch;
  flex-wrap: wrap;
  margin-left: 2em;
  margin-right: 2em;
  padding-top: 1em;
  padding-bottom: 2em;
}
body.about article {
  width: calc(50% - 1em);
  margin-right: 1em;
  padding-top: 10px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 18pt;
  line-height: 28pt;
}
body.about article a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}
body.about article a:hover {
  text-decoration: underline;
}
body.about article p {
  margin-top: 0px;
  margin-bottom: 1em;
  padding: 0;
}

body.about .gallery {
  width: calc(50% - 1em);
  box-sizing: border-box;
  margin: 0;
  margin-left: 1em;
  padding: 0;
}
body.about .gallery li {
  list-style: none;
  margin: 10px;
  padding: 0;
  float: left;
}
body.about .gallery li img {
  width: 160px;
  height: 106px;
  object-size: contain;
}
body.about .gallery li.size4 img {
  width: 339px;
  height: 239px;
}

body.about .lightbox {
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
}
body.about .lightbox img {
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}
body.about .lightbox:target {
  outline: none;
  display: flex;
}

hr {
  height: 80px;
  background-image: url('../img/mdpi/flyingpig.png');
  background-size: 89px 80px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  margin-bottom: 2em;
  border: none;
}

footer {
  background-color: #3f4050;
  color: #ffffff;
}

footer .container {
  margin-left: 1em;
  margin-right: 1em;
  padding: 1em;
  padding-top: 2em;
  box-sizing: border-box;
}
footer .container .card {
  display: flex;
  flex-direction: row;
  align-content: center;
}

footer .avatar div.photo {
  background-image: url('../img/mdpi/bergie_wetplate.jpg');
  width: 120px;
  height: 120px;
  background-size: 120px 120px;
  background-repeat: no-repeat;
  opacity : 0.8;
  margin-right: 1em;
}

footer a {
  color: #d2b2b9;
  font-weight: bold;
  text-decoration: none;
}
footer a:hover {
  color: #bd937b;
}

footer p {
  margin-top: 0px;
  padding-top: 0px;
  margin-bottom: 1em;
}

footer nav ul {
  clear: left;
  margin-left: 0px;
  padding-left: 0px;
  text-align: center;
}
footer nav ul li {
  list-style: none;
  display: inline;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 42pt;
}

@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 5/8) {
  body.blog.front header .container p,
  body.about header .container p {
    font-size: 3vmin;
    line-height: 5vmin;
  }
}

@media (max-aspect-ratio: 8/5) {
  body.blog header:before,
  body.about header:before {
    background-position: 70% 50%;
  }
  body.blog.front header .container,
  body.about header .container {
    width: 75vw;
    padding-top: 2em;
    padding-bottom: 1em;
  }
}
@media (max-width: 977px) {
  body.about .about {
    margin-left: calc(2em - 10px);
    margin-right: calc(2em - 10px);
  }
  body.about article,
  body.about .gallery {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body.about article {
    margin-bottom: 1em;
  }
  body.about article {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 767px), (orientation: portrait) {
  body.post article .content,
  body.post article .categorymeta {
    width: 100%;
    padding: 0;
  }
}
@media (max-width: 767px) {
  body.blog header .container,
  body.about header .container {
    margin-left: 1em;
  }
  body.blog .articles article {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  body.blog.front .articles article:nth-child(1) {
    padding-left: 1em;
    padding-right: 1em;
  }
  body.blog .articles article div.no-cover {
    display: none;
  }
  body.blog .about {
    padding-left: 1em;
    padding-right: 1em;
  }
  body.post article {
    margin: 0;
    padding: 1em;
  }
  body.post img#cover,
  body.post #no-cover {
    display: none;
  }
  body.post article header,
  body.post .related article {
    width: 100%;
    padding: 0;
    text-align: left;
  }
  body.post .related .articles {
    margin-left: 0;
    margin-right: 0;
  }
  body.post .related article {
    margin-bottom: 1em;
  }

  body.page article {
    margin-left: 0;
    margin-right: 0;
  }
  body.page article header {
    margin-left: -1em;
    margin-right: -1em;
    padding-left: 1em;
  }
  body.about .about {
    margin-left: calc(1em - 10px);
    margin-right: calc(1em - 10px);
  }
  footer .container {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-moz-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-resolution: 120dpi) {
  hr {
    background-image: url('../img/hdpi/flyingpig.png');
  }
  body.blog header::before,
  body.about header::before {
    background-image: url('../img/hdpi/hawaii.jpg');
  }
  footer .avatar div.photo {
    background-image: url('../img/hdpi/bergie_wetplate.jpg');
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  hr {
    background-image: url('../img/xhdpi/flyingpig.png');
  }
  body.blog header::before,
  body.about header::before {
    background-image: url('../img/xhdpi/hawaii.jpg');
  }
  footer .avatar div.photo {
    background-image: url('../img/xhdpi/bergie_wetplate.jpg');
  }
}
@media (prefers-color-scheme: dark) {
  body {
    color: #ffffff;
    background-color: #3f4050;
  }
  footer {
    background-color: #191722;
  }
  body.blog .articles,
  body.page article,
  body.post article {
    background-color: #647086;
    color: #ffffff;
  }
  body.post .related article h1 a,
  body.blog .articles article a,
  body.post article a,
  body.page article a {
    color: #ffffff;
  }
  body.post article img {
    filter: grayscale(30%);
  }
  body.post article img:hover {
    filter: none;
  }
}