body {

display: flex;
flex-flow: column nowrap;
min-height: 100vh;
max-width: var(--container);
margin: var(--gap) auto;
padding-left: calc(var(--gap) / 2);
padding-right: calc(var(--gap) / 2);

}

/*

Site Header

*/

.masthead {

margin-bottom: calc(var(--gap) * 2);
.site-title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: var(--gap);
  text-align: center;
  color: var(--color-link);
  overflow: visible;
  .logo {
    display: inline-block;
    max-width: 250px;
    margin: calc(var(--gap) / 4);
    box-shadow: none;
    filter: drop-shadow(0 0 var(--gap) var(--color-details-lighter));
  }
  &:hover,
  &:focus {
    text-decoration: none;
  }
}

}

.site-menu {

display: flex;
flex-flow: row wrap;
justify-content: center;
@media screen and (max-width: 600px) {
  flex-flow: row nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  margin-left: calc(var(--gap) / -2);
  margin-right: calc(var(--gap) / -2);
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  &::-webkit-scrollbar {
    display: none;
  }
}
&::before,
&::after {
  content: " ";
  display: block;
}
&::before {
  margin-left: auto;
  padding-left: calc(var(--gap) / 2);
}
&::after {
  margin-right: auto;
  padding-right: calc(var(--gap) / 2);
}

}

.menu-item {

flex: 0 0 auto;
color: rgba(255, 255, 255, 0.7);
background-color: var(--color-link);
border-radius: 1.5rem;
font-weight: bolder;
padding: 0.5rem 1rem;
&:not(:last-child) {
  margin-right: var(--gap);
  @media screen and (max-width: 600px) {
    margin-right: calc(var(--gap) / 2);
  }
}
&:hover,
&:focus {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

}

/*

Content

*/

.content {

background-color: var(--color-bg);
padding: calc(var(--gap) * 2);
margin-bottom: var(--gap);
@media screen and (max-width: 600px) {
  padding-left: var(--gap);
  padding-right: var(--gap);
}
& > *:last-child {
  margin-bottom: 0;
}

}

.content-header {

margin-bottom: var(--gap);
text-align: center;
.content-title {
  font-size: 2rem;
  a {
    color: var(--color-text);
  }
}
.content-meta {
  font-size: 0.75rem;
  a {
    color: var(--color-details);
    display: inline-block;
    &:not(:last-child) {
      margin-right: calc(var(--gap) / 2);
    }
  }
}

}

.content-body > :last-child {

margin-bottom: 0;

}

.content-footer {

margin-top: var(--gap);
font-size: 0.75rem;
color: var(--color-details);
.content-tags {
  display: block;
  list-style: none;
  margin-left: 0;
  li {
    display: inline-block;
    font-size: 0.875rem;
    &:not(:last-child) {
      &::after {
        padding-left: calc(var(--gap) / 4);
        padding-right: calc(var(--gap) / 4);
        content: "/";
        color: var(--color-details-lighter);
      }
    }
    a {
      color: var(--color-details-darker);
    }
  }
}

}

.content-navigation {

 display: flex;
 align-items: center;

 @media screen and (max-width: 600) {
   flex-flow: column nowrap;
}

 .nav-link {
   background: var(--color-bg);
   padding: calc(var(--gap) / 2) var(--gap);

   @media screen and (max-width: 600px) {
     width: 100%;
     margin-bottom: var(--gap);
   }

   &.prev-link {
     justify-self: flex-start;
     margin-right: auto;
   }

   &.next-link {
     justify-self: flex-end;
     margin-left: auto;
     text-align: right;
   }
 }

}

// The Blog Layout .layout-blog, .layout-post, .layout-archive, .layout-home {

.container {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "content sidebar"
    "content sidebar"
    "content .";
  @media screen and (max-width: 600px) {
    grid-template-columns: 100%;
    grid-template-areas:
      "search"
      "content"
      "sidebar";
  }
}

}

.blog-page {

grid-area: content;
min-width: 0;

}

// The Archive Layout .archive-header {

padding: var(--gap);
background: var(--color-bg);
margin-bottom: var(--gap);
h1 {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-details);
  strong {
    font-size: 1.75rem;
    color: var(--color-text);
    text-transform: uppercase;
  }
}

}

// Sidebar .widget {

background-color: var(--color-bg);
padding: var(--gap);

}

.-search {

grid-area: sidebar;
grid-row: 1;
@media screen and (max-width: 600px) {
  grid-area: search;
}

}

.-sidebar {

grid-area: sidebar;
grid-row: 2;
@media screen and (max-width: 600px) {
  grid-row: auto;
}
& > *:not(:last-child) {
  margin-bottom: calc(var(--gap) * 2);
}

}

.social-links {

margin-left: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
.link {
  display: inline-block;
  margin: calc(var(--gap) / 2);
  margin-top: 0;
  svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

}

.blogroll {

.blogroll-title {
  font-weight: normal;
  margin-bottom: calc(var(--gap) / 2);
}
.blogroll-list {
  list-style: none;
  margin-left: 0;
  .link {
    padding-top: calc(var(--gap) / 2);
    padding-bottom: calc(var(--gap) / 2);
    border-bottom: 1px solid var(--color-details-lighter);
    &:first-child {
      border-top: 1px solid var(--color-details-lighter);
    }
    a {
      color: var(--color-details);
      &:hover,
      &:focus {
        color: var(--color-details-darker);
      }
    }
  }
}

}

// Search Form

label {

display: inline-block;
margin-bottom: calc(var(--gap) / 2);

}

.search-controls {

display: flex;
flex-flow: row nowrap;
font-size: 0.75rem;
input[name="q"] {
  max-width: 400px;
  width: 100%;
}

}

// Comments

.comments-title {

margin-bottom: var(--gap);

}

.comments-notice {

margin-top: calc(var(--gap) / 2);
margin-bottom: calc(var(--gap) / 2);
color: var(--color-details-darker);

}

.comments-list {

list-style: none;
margin-left: 0;
margin-bottom: var(--gap);
.comment-item {
  margin-bottom: var(--gap);
  padding-bottom: var(--gap);
  border-bottom: 3px dotted var(--color-details-lighter);
}

}

.comment {

font-size: 95%;
.comment-meta {
  margin-bottom: 1rem;
}
.author-avatar {
  width: 2.5rem;
  border-radius: 5px;
  box-shadow: 0 0 2px var(--color-details);
  float: left;
  margin-right: 1rem;
}
.comment-body > *:not(:last-child) {
  margin-bottom: 0.5rem;
}

}

.comment-message-area {

margin-bottom: calc(var(--gap) / 2);

}

.message-area {

width: 100%;
resize: vertical;

}

.comment-fields {

display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: calc(var(--gap) / 2);
margin-bottom: calc(var(--gap) / 2);
@media screen and (max-width: 800px) {
  grid-template-columns: 1fr;
  flex-flow: column nowrap;
}
input {
  min-width: 0;
  width: auto;
}

}

.comment-actions {

display: flex;
justify-content: flex-end;

}

/*

Site Footer

*/

.colophon {

margin-top: calc(var(--gap) * 2);
font-size: 0.875rem;
h5 {
  a {
    color: currentColor;
  }
}
.site-info {
  text-align: center;
}
.external-links {
  text-align: center;
  list-style: none;
  margin: calc(var(--gap) / 2) 0;
  .link {
    display: inline-block;
    a {
      color: var(--color-details-darker);
      display: inline-block;
    }
    &:not(:last-child) {
      &::after {
        content: "/";
        color: var(--color-details-lighter);
        display: inline-block;
        margin-left: calc(var(--gap) / 4);
        margin-right: calc(var(--gap) / 4);
      }
    }
  }
}

}