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


/*
 * Contents
 *
 * Global resets
 * Masthead
 * Slide effect
 * Posts and pages
 * Reverse layout
 * Themes
 */


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

html, input, .style-root {
  font-family: Lato, Georgia, "Times New Roman", serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--color-headings);
  letter-spacing: -.025rem;
}

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

.container {
  max-width: 28rem;
}
@media (min-width: 38em) {
  .container {
    max-width: 32rem;
  }
}
@media (min-width: 56em) {
  .container {
    max-width: 38rem;
  }
}


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

.masthead {
  padding-top:    1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-ruler);
}
.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-title);
}
.masthead-title a {
  color: var(--color-title);
}
.masthead-title small {
  font-size: 75%;
  font-weight: 400;
  color: var(--color-byline);
  letter-spacing: 0;
}

@media (max-width: 48em) {
  .masthead-title {
    text-align: center;
  }
  .masthead-title small {
    display: none;
  }
}

/*
 * 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 {
  margin-bottom: 0em;
}

/* Blog post or page title */
.page-title,
.post-title,
.post-title a {
  color: var(--color-post-title);
}
.page-title,
.post-title {
  margin-top: 0;
}

/* Meta data line below post title */
.post-date {
  display: block;
  margin-top: -.5rem;
  margin-bottom: 1rem;
  color: var(--color-post-byline);
}

/* Superscript in posts (for footnotes) */
.post sup {
  font-size: x-small;
}
@media (min-width: 38em) {
  .post sup {
    font-size: small;
  }
}

/* Suggested posts */
.suggested {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid var(--color-ruler);
}
.suggested-posts {
  padding-left: 0;
  list-style: none;
}
.suggested-posts h3 {
  margin-top: 0;
}
.suggested-posts li a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.footnotes {
  padding-top: 1rem;
  border-top: 1px solid var(--color-ruler);
}

/* Footer */
.footer {
  padding-top: 1rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--color-ruler);
  font-size: 80%;
}

.footer-links {
  text-align: right;
  height: 1rem;
  margin-bottom: 0.25rem;
}

.footer-copyright {
  text-align: right;
  height: 1rem;
  margin-bottom: 0.25rem;
}

.hidden {
  display: none;
}

/*
 * Sidebars
 */

#toc {
  font-size: 0.9em;
  padding: 1em;
  border-top: 1px solid var(--color-ruler);
  border-bottom: 1px solid var(--color-ruler);
}

#toc .toc-header {
  font-weight: bold;
  font-size: larger;
}

#toc ul {
  margin-bottom: 0;
  padding: 0;
}

#toc a {
  color: var(--color-text);
}

#toc li {
  margin-left: 1em;
}

.sidenote-wrapper {
  line-height: 0;
}

.sidenote-toggle {
  display: none;
}

.sidenote-text {
  line-height: 1.3;
  clear: right;
  font-size: smaller;
}

.sidenote-text sup {
  font-size: smaller;
}

.spaceholder {
  line-height: 0;
}

@media screen and (min-width: calc(74em + 1px)) {
  #toc {
    padding: 0;
    border: none;
    width: 200px;
    float: left;
    margin: 0 0 0 -250px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  #toc ul {
    padding: 0;
  }

  .sidenote:active {
    color: var(--color-link);
  }

  .sidenote:hover .sidenote-number {
    color: var(--color-link);
  }

  .sidenote-text {
    float: right;
    width: 200px;
    margin-right: -250px;
    margin-top: 0.5em;
    margin-bottom: 1em;
  }

  .spaceholder {
    display: none;
  }
}

@media screen and (max-width: 74em) {
  .sidenote-wrapper {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    margin: 0 0;
    padding: 0 3em;
    float: left;
    clear: both;
    width: 100%;
  }

  input:checked~.sidenote-wrapper {
    max-height: 100em;
    opacity: 1;
    margin: 0.8em 0;
  }

  .sidenote-button .sidenote-number {
    color: var(--color-link);
  }
}

@media print {
  #toc, .sub-share, .suggested, .spaceholder, .footer-links {
    display: none
  }

  .sidenote-text {
    float: right;
    width: 200px;
    margin: 15px 0 0 10px!important;
    border-left: 1px solid #000;
    padding: 0 0px 0px 10px
  }

  p, li, textarea, td {
    line-height: 125%
  }

  .container {
    max-width: unset
  }

  .footer {
    border-top: 0
  }
}