/*
 *                        ___
 *                       /\_ \
 *  _____     ___     ___\//\ \      __
 * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
 * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
 *  \ \ ,__/\ \____/\ \____//\____\ \____\
 *   \ \ \/  \/___/  \/___/ \/____/\/____/
 *    \ \_\
 *     \/_/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/poole.
 */

/*
 * Contents
 *
 * Body resets
 * Custom type
 * Messages
 * Container
 * Masthead
 * Posts and pages
 * Pagination
 * Reverse layout
 * Themes
 */

/*
 * Body resets
 *
 * Update the foundational and global aspects of the page.
 */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

body {
  color: #515151;
  /* background-color: #e5e5e5;
  background: radial-gradient(
      circle at 100% 50%,
      transparent 20%,
      rgba(255, 255, 255, 0.03) 21%,
      rgba(255, 255, 255, 0.03) 34%,
      transparent 35%,
      transparent
    ),
    radial-gradient(
        circle at 0% 50%,
        transparent 20%,
        rgba(255, 255, 255, 0.03) 21%,
        rgba(255, 255, 255, 0.03) 34%,
        transparent 35%,
        transparent
      )
      0 -50px;
  background-color: rgb(112, 128, 144, 0.8);
  background-size: 75px 100px; */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* No `:visited` state is required by default (browsers will use `a`) */
a {
  color: #268bd2;
  text-decoration: none;
}
/* `:focus` is linked to `:hover` for basic accessibility */
a:hover,
a:focus {
  text-decoration: underline;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-weight: bold;
  line-height: 1.25;
  color: #313131;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 1.9rem;
}
h2 {
  margin-top: 2rem;
  font-size: 1.5rem;
}
h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
}
h4,
h5,
h6 {
  margin-top: 1.5rem;
  font-size: 1rem;
}

/* Body text */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

strong {
  color: #303030;
}

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

dt {
  font-weight: bold;
}
dd {
  margin-bottom: 0.5rem;
}

/* Misc */
hr {
  position: relative;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

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

/* Code */
code,
pre {
  font-family: "Fira Code", Menlo, Monaco, "Courier New", monospace;
}
code {
  padding: 0.25em 0.5em;
  font-size: 85%;
  color: #bf616a;
  background-color: #f9f9f9;
  border-radius: 3px;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f9f9f9;
}
pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}
.highlight {
  margin-bottom: 1rem;
  border-radius: 4px;
}
.highlight pre {
  margin-bottom: 0;
}
.highlight > pre.highlight {
  padding: 15px 20px;
}

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

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

/* Tables */
table {
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
}
td,
th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #e5e5e5;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

/*
 * Custom type
 *
 * Extend paragraphs with `.lead` for larger introductory text.
 */

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

/*
 * Messages
 *
 * Show alert messages to users. You may add it to single elements like a `<p>`,
 * or to a parent if there are multiple elements to show.
 */

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

/*
 * Container
 *
 * Center the page content.
 */

.container {
  max-width: 42rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.container.content {
  background-color: #fff;
  /* box-shadow: 0 0 10px 1px #ccc; */
}

/*
 * Masthead
 *
 * Super small header above the content for site name and short description.
 */

.masthead {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #999;
}
.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
  font-size: 1rem;
}
.masthead-title a {
  color: #505050;
}
.masthead-title small {
  font-size: 1rem;
  font-weight: 400;
  color: #c0c0c0;
}

/*
 * Posts and pages
 *
 * Each post is wrapped in `.post` and is used on default and post layouts. Each
 * page is wrapped in `.page` and is only used on the page layout.
 */

.page,
.post {
  padding-bottom: 4em;
}

/* Blog post or page title */
.page-title,
.post-title,
.post-title a {
  color: #303030;
}
.page-title,
.post-title {
  margin-top: 0;
}

/* Meta data line below post title */
.post-date {
  display: block;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  color: #9a9a9a;
  font-size: 0.8rem;
}

/* Related posts */
.related {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #eee;
}
.related > h2,
.related a {
  font-size: 1rem;
}
.related-posts {
  padding-left: 0;
  list-style: none;
}
.related-posts h3 {
  margin: 0;
}
.related-posts li small {
  font-size: 75%;
  color: #999;
  font-weight: normal;
}
.related-posts li a:hover {
  color: #268bd2;
  text-decoration: none;
}
.related-posts li a:hover small {
  color: inherit;
}

/*
 * Pagination
 *
 * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 * there are no more previous or next posts to show.
 */

.pagination {
  overflow: hidden; /* clearfix */
  margin-left: -1rem;
  margin-right: -1rem;
  /* font-family: "PT Sans", Helvetica, Arial, sans-serif; */
  color: #ccc;
  text-align: center;
}

/* Pagination items can be `span`s or `a`s */
.pagination-item {
  display: block;
  padding: 1rem;
  border: 1px solid #eee;
}
.pagination-item:first-child {
  margin-bottom: -1px;
}

/* Only provide a hover state for linked pagination items */
a.pagination-item:hover {
  background-color: #f5f5f5;
}

@media (min-width: 30rem) {
  .pagination {
    margin: 3rem 0;
  }
  .pagination-item {
    float: left;
    width: 50%;
  }
  .pagination-item:first-child {
    margin-bottom: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .pagination-item:last-child {
    margin-left: -1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.archive {
  margin-top: 1rem;
}
.archive .item {
  margin-bottom: 0.5rem;
}
.archive .item a {
  display: block;
}
.archive .date {
  font-size: 0.8rem;
  display: block;
  color: #888;
}

code.highlighter-rouge {
  font-size: 75%;
  background-color: #f0f0e9e7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #515151;
  padding: 0.2em 0.3em 0.1em 0.3em;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  /* background-color: #393c2e; */
  /* color: #dedede; */
}

a:hover {
  text-decoration: none;
  background-color: #def;
  box-shadow: 0 1px 0 0px #268bd2, 0px 0px 1px 5px #def;
  box-sizing: border-box;
}

.hero-image {
  height: 200px;
  position: absolute;
  left: -32px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  right: -32px;
}

.hero-image + .page-title {
  position: relative;
  margin: -26px -32px 25px;
  padding: 32px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  height: 200px;
  display: flex;
  align-items: center;
}

.hero-image + .page-title > h1 {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.98), 0px 0px 6px rgba(0, 0, 0, 0.98),
    0px 0px 6px rgba(0, 0, 0, 0.98), 0px 0px 6px rgba(0, 0, 0, 0.98),
    0px 0px 30px rgba(0, 0, 0, 0.99), 0px 0px 30px rgba(0, 0, 0, 0.99),
    0px 0px 30px rgba(0, 0, 0, 0.99);
  text-transform: uppercase;
  color: white;
  width: 100%;
  margin: 0;
}

.page,
.post {
  position: relative;
}