body,
html {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  background: white;
  color: black;
}
a {
  color: #2ca089;
}
.site-header {
  background: #5aa02c;
  padding: 5px;
  margin-bottom: 15px;
  font-family: sans-serif;
  height: auto;
}
.site-header.front {
  background-size: cover;
  background-position-x: 50%;
  position: relative;
}
.site-header.front:before {
  background: rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 10;
}
.site-header.front div.frontpage {
  padding: 5vw 3vw 6vw;
  z-index: 20;
  position: relative;
}
.site-header.front #front-logo {
  display: block;
  margin: 0 auto;
  vertical-align: middle;
  max-width: 100%;
}
.site-header.front .tagline {
  text-align: center;
  font-family: sans-serif;
}
.site-header h1.site-name {
  margin: 0;
  text-align: center;
}
.site-header a.site-name {
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  margin-right: 30px;
}
.site-header a {
  color: white;
  text-decoration: none;
  text-shadow: 1px 1px 2px black;
}
.site-width {
  max-width: 1000px;
  margin: 0 auto;
}
.content-width {
  max-width: 700px;
  margin: 0 auto;
}
@media screen and (max-width: 700px) {
  div.inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}
#logo {
  display: inline-block;
  vertical-align: middle;
  height: 21px;
  width: auto;
}
nav {
  display: inline-block;
  z-index: 20;
  position: relative;
}
nav.right {
  float: right;
}
nav.right svg {
  fill: #fff;
  height: 1.6em;
  margin-bottom: 1px;
  vertical-align: middle;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline;
}
nav ul li a {
  display: inline-block;
  height: 64px;
  line-height: 64px;
  padding: 0 10px;
}
nav ul li a:hover {
  background: rgba(128, 128, 128, 0.3);
}
article p,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article hr,
article ul,
article pre {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
figure {
  max-width: 700px;
  margin: 10px auto;
}
figure.wide {
  max-width: 100%;
  margin: 10px auto;
}
figure figcaption {
  margin: 1em auto 0;
  font-size: 75%;
  line-height: 1.5em;
  text-align: center;
  max-width: 100%;
}
figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
figure.gallery {
  max-width: 100%;
  margin: 10px auto;
}
figure.gallery > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 10px;
}
figure.gallery > div img {
  width: 100%;
  height: auto;
  flex: 1 0 calc(33.332% - 10px);
}
div.index {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: masonry;
}
div.index article:nth-child(4n+1),
div.index article:first-child {
  grid-column-end: span 3;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 200px;
  grid-column-gap: 10px;
  grid-row-gap: 2px;
}
div.index article:nth-child(4n+1) a.content,
div.index article:first-child a.content {
  grid-area: 1 / 2 / 2 / 3;
}
div.index article {
  border: 1px solid black;
  border-radius: 5px;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 2px;
}
div.index article a.image {
  grid-area: 1 / 1 / 2 / 2;
  max-height: 200px;
  background: #ccc;
}
div.index article a.image img {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
}
div.index article div.tags {
  font-family: sans-serif;
  font-size: 75%;
  text-decoration: none;
  text-transform: uppercase;
}
div.index article a.content {
  text-decoration: none;
  grid-area: 2 / 1 / 3 / 2;
  padding: 5px;
}
div.index article h2 {
  margin: 0;
  color: black;
  font-family: sans-serif;
}
div.index article div.meta {
  padding-top: 10px;
  color: #555;
}
div.index article p {
  margin: 0;
  padding: 0;
  color: black;
}
div.meta {
  font-size: 75%;
}
div.meta div.author-card {
  line-height: 28px;
  display: inline-block;
}
div.meta div.author-card img {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
div.meta div.timestamp {
  display: inline-block;
  line-height: 28px;
  margin-left: 5px;
}
article.full h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  font-family: sans-serif;
}
article.full .post-full-tags a {
  text-decoration: none;
  font-family: sans-serif;
}
article.full header {
  color: #444;
}
article.full header .excerpt {
  font-size: 120%;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
article.full img.feature-image {
  max-width: 1000px;
  display: block;
  margin: 20px auto;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
header.index {
  padding-top: 64px;
  padding-bottom: 64px;
  margin-bottom: 15px;
  margin-top: -15px;
}
header.index > div {
  margin: 0 auto;
  max-width: 700px;
  padding: 10px;
  z-index: 20;
  position: relative;
}
header.index > div > div,
header.index > div p {
  text-align: center;
}
header.index > div a[rel=alternate] {
  text-align: center;
  height: auto;
}
header.index h1 {
  margin-top: 0;
  text-align: center;
}
header.index.user-cover {
  background-size: cover;
  background-position-x: 50%;
  position: relative;
}
header.index.user-cover:before {
  background: rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 10;
}
header.index div.user-profile img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin-top: 15px;
}
a[rel="alternate"] {
  display: block;
  margin: 0 auto;
  height: 64px;
}
a[rel="alternate"] svg {
  fill: #fff;
  height: 1.6em;
  margin-bottom: 1px;
  vertical-align: middle;
}
body > footer {
  margin-top: 64px;
  padding-top: 10px;
  padding-bottom: 30px;
  min-height: 200px;
  background: #6c6753;
  color: white;
}
body > footer nav a {
  color: white;
  text-decoration: none;
}