/*
  Most of these imports are derived from https://github.com/poole/poole.
  Designed, built, and released under MIT license by @mdo.
*/
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

body {
   text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

main,
article,
section {
  display: block;
}

a {
  color: #268bd2;
  text-decoration: underline;
  word-break: break-word;
}
a:hover, a:focus {
  text-decoration: underline;
}
a strong {
  color: inherit;
}

img {
  border-radius: 5px;
  display: block;
  height: auto;
  margin: 0 0 1rem;
  max-width: 100%;
}

.table {
    overflow-x: auto;
    white-space: nowrap;
}

table {
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
  font-size: 85%;
  margin-bottom: 1rem;
  width: 100%;
}

td,
th {
  border: 1px solid #e5e5e5;
  padding: 0.25rem 0.5rem;
}

th {
  text-align: left;
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

button,
input[type=text],
input[type=email],
input[type=search],
input[type=submit] {
  border: 1px solid #e5e5e5;
  border-radius: 300px;
  padding: 1em 1.5em;
}

button,
input[type=submit] {
  background: transparent;
  border-color: #e5e5e5;
  color: #268bd2;
  cursor: pointer;
  transition: color 0.6s ease-in-out, border-color 0.6s ease-in-out, background 0.6s ease-in-out;
}
button:hover,
input[type=submit]:hover {
  background: #268bd2;
  border-color: #268bd2;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  color: #313131;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
}

h4,
h5,
h6 {
  font-size: 1rem;
  margin-top: 1rem;
}

p {
  margin-bottom: 1rem;
  margin-top: 0;
}

strong {
  color: #303030;
}

ul,
ol,
dl {
  margin-bottom: 1rem;
  margin-top: 0;
}

li ul,
li ol {
  margin: 0 0 0 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 0.5rem;
}

hr {
  border: 0;
  height: 10px;
  background-image: radial-gradient(circle at center, #333 2px, transparent 3px);
  background-size: 10px 10px;
  background-repeat: repeat-x;
  margin: 1.5rem 0;
  position: relative;
}

abbr {
  color: #555;
  font-size: 85%;
  font-weight: bold;
  text-transform: uppercase;
}
abbr[title] {
  border-bottom: 1px dotted #e5e5e5;
  cursor: help;
}

blockquote {
  border-left: 0.25rem solid #e5e5e5;
  color: #7a7a7a;
  margin: 0.8rem 0;
  padding: 0.5rem 1rem;
}
blockquote p:last-child {
  margin-bottom: 0;
}
@media (min-width: 30em) {
  blockquote {
    padding-left: 1.25rem;
    padding-right: 5rem;
  }
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  display: inline-block;
  font-weight: bold;
  margin-left: 0.1rem;
}

.footnotes {
  font-size: 85%;
  margin-top: 2rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

a svg {
  fill: #268bd2;
}

a svg,
.icon svg {
  height: 1em;
}

.icon {
  vertical-align: middle;
}

code,
pre {
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
}

code {
  background-color: #f9f9f9;
  border-radius: 3px;
  color: #bf616a;
  font-size: 85%;
  padding: 0.25em 0.5em;
  word-break: break-word;
}

pre {
  margin-bottom: 1rem;
  margin-top: 0;
  max-width: 100%;
  overflow-x: auto;
}

pre code {
  background-color: transparent;
  color: inherit;
  font-size: 12px;
  padding: 0;
}

.highlight {
  background-color: #f9f9f9;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  padding: 1rem;
}
.highlight pre {
  margin-bottom: 0;
  overflow-x: auto;
}

/*
  Layout

  Styles for managing the structural hierarchy of the site.
  Hydeout features the large colored sidebar from Hyde that houses the
  site name, intro, and "footer" content. Sidebar is on top of content on
  mobile and expands into sidebar on larger width displays.

  Sidebar CSS assumes HTML looks like this for post pages:

    body
    > #sidebar
      > header (primary sidebar content -- i.e. title)
        > h1 (home page only, otherwise div or span)
      > secondary nav content we may want to hide on certain pages
    > .container
      > h1 (non-home page)
      > .content

  Basic approach is to color in body, make sidebar background transparent,
  and then fill in the .container or .content elements depending on how far
  we want the sidebar or header to stretch.
*/
body {
  background-color: #202020;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#sidebar {
  flex: 0 0 auto;
  padding: 1rem;
  text-align: center;
}
#sidebar .site-title {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.content {
  background: #fff;
  color: #000;
  padding: 2rem;
}

.container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: #fff;
  color: #000;
}
.container > header {
  color: #313131;
  margin: 0;
}
.container > header h1,
.container > header h2 {
  color: inherit;
}
.container > header h1:last-child,
.container > header h2:last-child {
  margin-bottom: 0.5rem;
}

.container > .content {
  flex-grow: 1;
  padding-bottom: 4rem;
}

/* -----------------------------------------------------------
  Tablet / Desktop view
----------------------------------------------------------- */
@media (min-width: 49rem) {
  body {
    flex-direction: row;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  body > * {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  /* Undo mobile CSS */
  #sidebar {
    text-align: left;
    width: 18rem;
    padding: 2rem;
  }
  #sidebar > *:last-child {
    margin-bottom: 0;
  }
  
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
  }
  
  #sidebar .site-title {
    font-size: 2.5rem;
    text-align: left;
    font-weight: 300;
  }

  #sidebar p.lead {
      text-align: left;
  }

  #sidebar p.lead,
  #sidebar header ~ * {
    display: block;
  }
  #sidebar header ~ nav {
    display: flex;
  }
  
  .index #sidebar {
    margin-bottom: 0;
  }
  .container {
    background: #fff;
    color: #000;
    min-height: 100vh;
    padding: 4rem 4rem 0;
    margin-left: 18rem;
  }
  
  .container > header {
    color: #313131;
    margin: 0;
  }
  
  .container > header h1,
  .container > header h2 {
    color: inherit;
  }
  
  .container > header h1:last-child,
  .container > header h2:last-child {
    margin-bottom: 0.5rem;
  }
  .container > * {
    max-width: 38rem;
    padding: 0;
  }
}
/* -----------------------------------------------------------
  Sidebar links + nav
----------------------------------------------------------- */
#sidebar a {
  color: #fff;
}
#sidebar a svg {
  fill: rgba(255, 255, 255, 0.85);
}

#sidebar a:hover svg,
#sidebar a:focus svg,
#sidebar a.active svg {
  fill: rgba(255, 255, 255, 0.85);
}

#sidebar a:hover,
#sidebar a:focus {
  text-decoration: underline;
}
#sidebar a:hover.icon,
#sidebar a:focus.icon {
  text-decoration: none;
}

#sidebar a.active {
  font-weight: bold;
}

#sidebar .site-title {
  color: #fff;
}
#sidebar .site-title a {
  color: inherit;
}

#sidebar nav {
  display: flex;
}

#sidebar-nav-links {
  flex-flow: column nowrap;
}

#sidebar-icon-links {
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 1rem;
  max-width: 100%;
}
@media (min-width: 49rem) {
  #sidebar-icon-links {
    justify-content: flex-start;
    margin-left: -0.25em;
  }
}

#sidebar-pageview-links {
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 1rem;
  max-width: 100%;
}
@media (min-width: 49rem) {
  #sidebar-pageview-links {
    justify-content: flex-start;
    margin-left: -0.25em;
  }
}

#sidebar nav > * {
  display: block;
  line-height: 1.75;
}

#sidebar nav > .icon {
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 0.25em;
}

.page-link {
  text-align: center;
}


@media (min-width: 49rem) {
  .page-link {
    text-align: left;
  }
}

@media print {
  #sidebar {
    display: none;
  }
  body {
    display: block;
  }
  .container {
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  .container > * {
    max-width: 100%;
  }
  html {
    font-size: normal;
  }
}
.masthead {
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.masthead-title {
  color: #000;
  margin-bottom: 0;
  margin-top: 0;
}
.masthead-title a {
  color: inherit;
}
.masthead-title small {
  font-size: 75%;
  font-weight: 400;
  opacity: 0.5;
}

.posts-by-tag h2 {
  text-transform: capitalize;
}

.page-title,
.post-title {
    text-align: center;
    margin-top: 0;
    margin-bottom:1rem;
}

.page-title,
.post-title,
.post-title a {
  color: #313131;
}

h2.post-title,
h2.page-title {
  font-size: 2rem;
}

.post-tags a {
  font-size: 0.8em;
  margin-right: 0.5rem;
  opacity: 0.75;
  white-space: nowrap;
}
.post-tags a .tag-name {
  text-transform: capitalize;
}
.post-tags a:hover {
  opacity: 1;
  text-decoration: none;
}

.posts-list {
  list-style: none;
  padding-left: 0;
}
.posts-list h3 {
  margin-top: 0;
}
.posts-list li small {
  color: #999;
  font-size: 75%;
  white-space: nowrap;
}
.posts-list li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.posts-list li a:hover small {
  color: inherit;
}

article + *,
.post-body ~ section {
  border-top: 1px solid #e5e5e5;
  margin-top: 2rem;
  padding-top: 2rem;
}
article + * > h2:first-child,
article + * > h3:first-child,
.post-body ~ section > h2:first-child,
.post-body ~ section > h3:first-child {
  margin-top: 0;
}

.post-meta {
  color: #767676;
  margin-bottom: 1rem;
  margin-top: -0.5rem;
}

.post .content li + li,
.page .content li + li {
  margin-top: 0.25rem;
}

@media (min-width: 49rem) {
  .pagination > a {
    box-shadow: none;
  }
  .pagination > a:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
  }
  .content .pagination:first-child {
    margin-top: 0;
  }
  .content .pagination:first-child + * {
    border-top: 1px solid #e5e5e5;
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

.message {
  background-color: #f9f9f9;
  color: #717171;
  margin-bottom: 1rem;
  padding: 1rem;
}

.search-row {
  border: 1px solid #e5e5e5;
  border-radius: 300px;
  display: flex;
  padding: 2px;
}
.search-row input {
  border: 0;
}
.search-row input + input {
  margin-left: 2px;
}
.search-row input[type=text],
.search-row input[type=search] {
  flex-grow: 1;
}

.tags-list a {
  margin-right: 0.5em;
  opacity: 0.75;
  white-space: nowrap;
}

.tags-list a .tag-count {
  background: #268bd2;
  border-radius: 1000px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75em;
  margin-left: 0.25em;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

.tags-list a:hover {
  opacity: 1;
  text-decoration: none;
}

@keyframes posts-for-tag-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.posts-for-tag {
  display: none;
}
.posts-for-tag:target {
  animation: posts-for-tag-fade-in 0.6s ease-in-out;
  display: block;
}

/* Archive */
h2.article-year {
    text-align: center;
}

dl {
  margin-bottom: 1em;
}

dt.article-date {
  font-weight: bold;
  text-align: center;
  margin-top: 1em;
}

dd.article-title {
  margin-left: 1.5em;
  text-align: center;
}


@media (min-width: 49rem) {
  h2.article-year {
      text-align: left;
  }
  
  dt.article-date {
    text-align: left;
  }
  
  dd.article-title {
    text-align: left;
  }
}