gohugo-theme-bree/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

/*
  Common Variables

  Feel free to change!
*/
/* Fonts */
/* 20px / 16px = 1.25em; support text resizing in all browsers */
/*
  Color

  Make sure to leave colorScheme in `config.toml` file empty for granular control
*/
/* Ed: the minimal edition theme.
 * ___________________
 * \_   _____/\______ \
 *  |    __)_  |    |  \
 *  |        \ |    `   \
 * /_______  //_______  /
 *         \/         \/
 * Designed, built, and released under an MIT license by @elotroalex and brill friends. See credits
 * for more info.
 * Based on the Poole and Lanyon theme by @mdo. Learn more at
 * https://github.com/minicomp/ed.
*/
/*
  To apply a different color scheme to the whole scroll down to the themes section for instructions at
  the very bottom of this file
*/
/*
  General

  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;
  overflow-x: hidden; }

html {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1em;
  /* 16px; specify in ems to support text resizing in all browsers */
  line-height: 1.5; }

@media (min-width: 38em) {
  html {
    font-size: 1.25em; } }

body {
  color: #454545;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.content {
  margin-bottom: 4rem; }

/*
  Wrapper

  The wrapper is used to position site content when the sidebar is toggled. We use an outter wrap to
  position the sidebar without interferring with the regular page content.
*/
.wrap {
  position: relative;
  width: 100%; }

/*
  Container

  Center the page content.
*/
.container {
  max-width: 32rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto; }

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

/* Links */
a, .text-title a {
  color: #841212;
  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 {
  font-family: sans-serif;
  margin-bottom: .5rem;
  font-weight: normal;
  color: #404040;
  letter-spacing: -.025rem;
  line-height: 1.25;
  text-rendering: optimizeLegibility; }

h1,
h1.text-title {
  font-size: 1.4rem; }

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

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

h3 {
  margin-top: 1.5rem; }

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

/* Lists */
ul {
  list-style: circle; }

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

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

/* Search highlighting */
mark {
  color: white;
  background-color: #841212; }

/* Quotes */
blockquote {
  padding: 0rem 1.5rem 0rem 2rem;
  margin: 0 0 20px 0;
  color: #454545;
  border-left: none;
  font-style: italic; }

blockquote p:last-child {
  margin-bottom: 0; }

@media (min-width: 30em) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem; } }

/* Images */
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: .25rem .5rem;
  border: 1px solid #e5e5e5; }

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

/*
  Masthead

  Super small header above the content for site name and short description.
*/
.masthead {
  border-bottom: 1px solid #eee;
  margin-bottom: 3rem;
  padding-top: 26px;
  padding-bottom: 1rem;
  text-align: center; }

.masthead-title {
  color: #505050;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.8rem;
  line-height: .777em;
  margin: 2em 0 0;
  text-align: center; }

.masthead-title small {
  color: #454545;
  display: none;
  /* This is an accessibility no-no */
  font-family: sans-serif;
  font-size: .88rem;
  font-weight: normal;
  letter-spacing: .05rem; }

@media (min-width: 320px) {
  .masthead-title {
    margin-top: 2px;
    margin-right: 15%;
    margin-left: 15%; } }

@media (min-width: 48em) {
  .masthead-title small {
    display: inline; } }

/*
  Sidebar

  The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner
  of the page.

  This particular sidebar implementation was inspired by Chris Coyier's "Offcanvas Menu with CSS
  Target" article, and the checkbox variation from the comments by a reader. It modifies both
  implementations to continue using the checkbox (no change in URL means no polluted browser
  history), but this uses `position` for the menu to avoid some potential content reflow issues.

  Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
*/
/* Style and "hide" the sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -14rem;
  width: 14rem;
  visibility: hidden;
  overflow-y: auto;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  font-size: .875rem;
  /* 15px*/
  color: rgba(255, 255, 255, 0.6);
  background-color: #202020;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

@media (min-width: 30em) {
  .sidebar {
    font-size: .75rem;
    /* 14px */ } }

/* Sidebar content */
.sidebar {
  background-color: #841212; }

.sidebar a {
  font-weight: normal;
  color: #fff; }

.sidebar-item {
  padding: 1rem; }

.sidebar-item p:last-child {
  margin-bottom: 0; }

/* Sidebar nav */
.sidebar-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.sidebar-nav-item {
  display: block;
  padding: .5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

a.sidebar-nav-item-toc {
  color: rgba(255, 255, 255, 0.8); }

.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent; }

@media (min-width: 48em) {
  .sidebar-item {
    padding: 1.5rem; }
  .sidebar-nav-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem; } }

/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox {
  display: none; }

/* Style the `label` that we use to target the `.sidebar-checkbox` */
.sidebar-toggle {
  position: absolute;
  top: .8rem;
  left: 1rem;
  display: block;
  padding: .25rem .75rem;
  color: #505050;
  background-color: #fff;
  border-radius: .25rem;
  cursor: pointer; }

.sidebar-toggle:before {
  display: inline-block;
  width: 1rem;
  height: .75rem;
  content: "";
  background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image: -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image: -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); }

.sidebar-toggle:active,
#sidebar-checkbox:focus ~ .sidebar-toggle,
#sidebar-checkbox:checked ~ .sidebar-toggle {
  color: #fff;
  background-color: #555; }

.sidebar-toggle:active:before,
#sidebar-checkbox:focus ~ .sidebar-toggle:before,
#sidebar-checkbox:checked ~ .sidebar-toggle:before {
  background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image: -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image: -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image: linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); }

@media (min-width: 30.1em) {
  .sidebar-toggle {
    position: fixed; } }

@media print {
  .sidebar-toggle {
    display: none; } }

/*
  Slide effect

  Handle the sliding effects of the sidebar and content in one spot, separate from the default
  styles.

  As a heads-up, we don't use `transform: translate3d()` here because, when mixed with
  `position: fixed;` for the sidebar toggle, it creates a new containing block. Put simply, the
  fixed sidebar toggle behaves like `position: absolute;` when transformed.

  Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
*/
.wrap,
.sidebar,
.sidebar-toggle {
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden; }

.wrap,
.sidebar-toggle {
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out; }

#sidebar-checkbox:checked + .sidebar {
  z-index: 10;
  visibility: visible; }

#sidebar-checkbox:checked ~ .sidebar,
#sidebar-checkbox:checked ~ .wrap,
#sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(14rem);
  -moz-transform: translateX(14rem);
  -ms-transform: translateX(14rem);
  -o-transform: translateX(14rem);
  transform: translateX(14rem); }

/*
  Reverse layout

  Flip the orientation of the page by placing the `.sidebar` and sidebar toggle on the right side.
*/
.layout-reverse .sidebar {
  left: auto;
  right: -14rem; }

.layout-reverse .sidebar-toggle {
  left: auto;
  right: 1rem; }

.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
.layout-reverse #sidebar-checkbox:checked ~ .wrap,
.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(-14rem);
  -moz-transform: translateX(-14rem);
  -ms-transform: translateX(-14rem);
  -o-transform: translateX(-14rem);
  transform: translateX(-14rem); }

/*
  Overlay sidebar

  Make the sidebar content overlay the viewport content instead of pushing it aside when toggled.
*/
.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
  box-shadow: 0 0 0 .25rem #fff; }

.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
  box-shadow: 0.25rem 0 0.5rem rgba(0, 0, 0, 0.1); }

/* Only one tweak for a reverse layout*/
.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
  box-shadow: -0.25rem 0 0.5rem rgba(0, 0, 0, 0.1); }

/*
  ED special layouts
*/
.text-center {
  text-align: center !important; }

.text-uppercase {
  text-transform: uppercase !important; }

.fs-4 {
  font-size: 1.6rem !important; }

.fs-5 {
  font-size: 1.4rem !important; }

.fs-7 {
  font-size: 0.8rem !important; }

div.poem,
.poem,
div.narrative,
.narrative {
  margin-bottom: 5rem; }

div.toc {
  margin-bottom: 4rem; }

/*
  Poem styles

  If you want your lines not to wrap on small screens, add the rule "white-space: nowrap;"; If you
  want you want to remove the hanging indent, reset the padding-left to 0 and erase text-indent
*/
.poem ul,
.poetry ul,
ul.poetry {
  list-style: none;
  list-style-type: none;
  padding-left: 1rem;
  text-indent: -1rem; }

/* This snippet helps us reset the margin for all spans with the indent- class */
.poem span[class^='indent-'],
.poetry span[class^='indent-'] {
  margin: 0;
  /* reset browsers default margin styles*/ }

/*
  To set line indentation for poetry wrap the line in a span with a class="indent-x" attribute.
  The x is represents a rem (root em) value
*/
.indent-1 {
  padding-left: 1rem; }

.indent-2 {
  padding-left: 2rem; }

.indent-3 {
  padding-left: 3rem; }

.indent-4 {
  padding-left: 4rem; }

.indent-5 {
  padding-left: 5rem; }

.indent-6 {
  padding-left: 6rem; }

.indent-7 {
  padding-left: 7rem; }

.indent-8 {
  padding-left: 8rem; }

.indent-9 {
  padding-left: 9rem; }

.indent-10 {
  padding-left: 10rem; }

.poem .byline,
.poetry .byline {
  font-style: italic;
  font-weight: normal;
  letter-spacing: 0;
  margin-top: -.5rem; }

/* Footnotes styles */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

.footnotes {
  line-height: 1.2rem;
  font-size: 0.9rem;
  letter-spacing: .01rem; }

.footnotes .foot-block {
  display: inline-block;
  padding: 0 4rem 0 2rem;
  margin-bottom: .8rem;
  font-style: italic; }

a.footnote-ref {
  padding-left: .1rem;
  font-size: .66rem; }

/* Bibliography styles */
ol.bibliography {
  list-style-type: none;
  padding-left: 1rem;
  text-indent: -1rem; }

/* Diplomatic editions */
ins,
.add {
  color: #288828;
  font-style: italic; }

del,
.delete {
  text-decoration: line-through;
  color: #AA3232; }

u,
.underline {
  text-decoration: underline; }

/*
  Line layouts for prose-poetry and theater

  To use these layouts you need to add the classes to your markdown or HTML lines.
*/
li.speaker,
li.speakerGroup {
  text-align: center;
  padding-top: 1.2em; }

li.speakerGroup {
  margin-bottom: -1.6em; }

/* To add an attribution, make sure to make a line with the attribution class */
li.attribution {
  text-align: right;
  list-style: none;
  padding: 0rem 1.5rem 0rem 2rem;
  margin: 0 0 20px 0;
  color: #454545; }

li.prose {
  list-style-position: inside;
  margin-left: -1em;
  text-indent: 0; }

li.prose-indent {
  text-indent: 2rem; }

/*
  Themes

  Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from
  Base16: http://chriskempson.com/projects/base16/
*/
/* Red */
.theme-base-red .sidebar,
.theme-base-red .sidebar-toggle:active,
.theme-base-red #sidebar-checkbox:checked ~ .sidebar-toggle {
  background-color: #ac4142; }

.theme-base-red .container a,
.theme-base-red .sidebar-toggle,
.theme-base-red .related-posts li a:hover {
  color: #ac4142; }

/* Orange */
.theme-base-orange .sidebar,
.theme-base-orange .sidebar-toggle:active {
  background-color: #d28445; }

.theme-base-orange .container a,
.theme-base-orange .sidebar-toggle,
.theme-base-orange .related-posts li a:hover {
  color: #d28445; }

/* Green */
.theme-base-green .sidebar,
.theme-base-green .sidebar-toggle:active {
  background-color: #90a959; }

.theme-base-green .container a,
.theme-base-green .sidebar-toggle,
.theme-base-green .related-posts li a:hover {
  color: #90a959; }

/* Cyan */
.theme-base-cyan .sidebar,
.theme-base-cyan .sidebar-toggle:active {
  background-color: #75b5aa; }

.theme-base-cyan .container a,
.theme-base-cyan .sidebar-toggle,
.theme-base-cyan .related-posts li a:hover {
  color: #75b5aa; }

/* Blue */
.theme-base-blue .sidebar,
.theme-base-blue .sidebar-toggle:active {
  background-color: #6a9fb5; }

.theme-base-blue .container a,
.theme-base-blue .sidebar-toggle,
.theme-base-blue .related-posts li a:hover {
  color: #6a9fb5; }

/* Magenta */
.theme-base-magenta .sidebar,
.theme-base-magenta .sidebar-toggle:active {
  background-color: #aa759f; }

.theme-base-magenta .container a,
.theme-base-magenta .sidebar-toggle,
.theme-base-magenta .related-posts li a:hover {
  color: #aa759f; }

/* Brown */
.theme-base-brown .sidebar,
.theme-base-brown .sidebar-toggle:active {
  background-color: #8f5536; }

.theme-base-brown .container a,
.theme-base-brown .sidebar-toggle,
.theme-base-brown .related-posts li a:hover {
  color: #8f5536; }

/* Transferred from poole.css */
/* Code */
code,
pre {
  font-family: Menlo, Monaco, "Courier New", monospace; }

code {
  padding: .25em .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: .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; }

/* Pygments via Hugo */
.highlight {
  margin-bottom: 1rem;
  border-radius: 4px; }

.highlight pre {
  margin-bottom: 0; }

/* Form elements */
.form-input {
  border: 1px solid #ccc;
  border-radius: .2em;
  font-family: inherit;
  font-size: 1.25em;
  color: #000;
  background-color: #fff;
  width: 100%;
  padding: 0.5em;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  @media only screen and (min-width: 768px) {
    .form-input {
      font-size: 1.15em; } }
  @media only screen and (min-width: 1220px) {
    .form-input {
      font-size: 1.1em; } }
  .form-input:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
    border-color: #5e5e5e; }

#site-contact {
  width: 100%;
  padding-bottom: 20px; }
  @media only screen and (min-width: 768px) {
    #site-contact {
      padding-bottom: 40px; } }
  @media only screen and (min-width: 1220px) {
    #site-contact {
      padding-bottom: 50px; } }
  @media only screen and (min-width: 1600px) {
    #site-contact {
      padding-bottom: 60px; } }
  #site-contact:first-child {
    margin-top: 0; }

.form-item {
  margin-top: 15px; }
  @media only screen and (min-width: 768px) {
    .form-item {
      margin-top: 20px; } }
  @media only screen and (min-width: 1220px) {
    .form-item {
      margin-top: 30px; } }
  .form-item:first-child {
    margin-top: 0; }

form input[type="number"]:-moz-submit-invalid,
form input[type="email"]:-moz-submit-invalid,
form textarea:-moz-submit-invalid,
form input[type="text"]:-moz-submit-invalid,
form select:-moz-submit-invalid,
form input:-moz-ui-invalid {
  -webkit-box-shadow: 0 0 2px 1px #D64541 !important;
  -moz-box-shadow: 0 0 2px 1px #D64541 !important;
  box-shadow: 0 0 2px 1px #D64541 !important; }

.form-item-error .form-input,
.form-item-error .form-textarea {
  -webkit-box-shadow: 0 0 2px 1px #D64541 !important;
  -moz-box-shadow: 0 0 2px 1px #D64541 !important;
  box-shadow: 0 0 2px 1px #D64541 !important; }

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #676767; }
  @media only screen and (min-width: 768px) {
    .form-label {
      font-size: 18px; } }
  @media only screen and (min-width: 1220px) {
    .form-label {
      font-size: 20px; } }
.contact-form-input,
.contact-form-textarea {
  margin-top: 8px; }

::-webkit-input-placeholder {
  color: #d4dada; }

::-moz-placeholder {
  color: #d4dada; }

:-ms-input-placeholder {
  color: #d4dada; }

:-moz-placeholder {
  color: #d4dada; }

.contact-form-textarea {
  font-size: 1.1em;
  min-height: 200px;
  resize: none; }
  @media only screen and (min-width: 768px) {
    .contact-form-textarea {
      font-size: 1.05em; } }
  @media only screen and (min-width: 1220px) {
    .contact-form-textarea {
      font-size: 1em; } }
.button {
  display: inline-block;
  padding: 9px 10px 10px;
  font-size: 13px;
  line-height: 1;
  border: 2px solid #5e5e5e;
  border-radius: 3px;
  background: #5e5e5e;
  color: #fff;
  font-weight: 600;
  cursor: pointer; }
  @media only screen and (min-width: 768px) {
    .button {
      padding: 11px 20px 12px;
      font-size: 15px; } }
  .button:hover {
    background: #404040;
    border-color: #404040;
    color: #fff; }
  .button svg {
    margin-right: 5px; }
    .button svg:last-child {
      margin-right: 0;
      margin-left: 5px; }
    @media only screen and (min-width: 768px) {
      .button svg {
        margin-right: 8px; }
        .button svg:last-child {
          margin-right: 0;
          margin-left: 8px; } }
.hide-element {
  display: none; }

#search-form .search-error.hide-element {
  display: none; }

.search-item {
  font-weight: bold;
  background-color: #ffff54; }

.search-error,
.search-error-message {
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out; }

template {
  display: none; }

.masthead-title small {
  font-size: .78rem; }

#page-contact,
#page-thanks,
.introduction {
  min-height: 40px;
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) {
    #page-contact,
    #page-thanks,
    .introduction {
      min-height: 60px;
      margin-bottom: 60px; } }
  @media only screen and (min-width: 1024px) {
    #page-contact,
    #page-thanks,
    .introduction {
      min-height: 80px;
      margin-bottom: 80px; } }
  @media only screen and (min-width: 1220px) {
    #page-contact,
    #page-thanks,
    .introduction {
      min-height: 100px;
      margin-bottom: 100px; } }
.introduction h1.accent {
  margin: 30px 0;
  font-size: 4em;
  line-height: 1;
  letter-spacing: -1px; }

#page-contact .container,
#page-thanks .container,
.introduction .container {
  margin: 10px auto;
  max-width: 600px;
  text-align: center; }

.post {
  margin-top: 40px; }
  @media only screen and (min-width: 768px) {
    .post {
      margin-top: 60px; } }
  @media only screen and (min-width: 1024px) {
    .post {
      margin-top: 80px; } }
  @media only screen and (min-width: 1220px) {
    .post {
      margin-top: 100px; } }
  .post:first-of-type {
    margin-top: 0; }

#TableOfContents ul ul,
#TableOfContents ul ul ul,
#TableOfContents ul ul ul ul,
#TableOfContents ul ul ul ul ul,
#TableOfContents ul ul ul ul ul ul,
#TableOfContents ul ul ul ul ul ul ul {
  margin-bottom: 0; }

.post-meta {
  margin-bottom: 0;
  font-size: .85rem;
  color: #676767; }

.post .byline {
  font-style: italic;
  font-weight: normal;
  letter-spacing: 0;
  margin-top: -.5rem; }

.post .byline,
.poem .byline,
.poetry .byline {
  margin-bottom: 1rem; }

nav.pagination {
  justify-content: center; }

ul.pager {
  margin: 0;
  padding: 0;
  list-style: none; }
  ul.pager li {
    display: inline;
    padding: 10px;
    margin: 5px; }

.divider {
  position: relative;
  margin: 2.5rem 0; }
  .divider:after {
    content: "";
    display: table;
    clear: both; }

.d-flex {
  display: flex; }

.footnotes hr {
  margin: 0;
  border: 0; }

.footnotes blockquote + a.footnote-backref {
  margin-bottom: 1rem;
  display: inline-block; }

.tags-wrapper {
  position: relative; }

.post-tags {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 24px;
  bottom: -12px;
  list-style: none;
  text-indent: unset; }
  .post-tags li, .post-tags a {
    font-family: sans-serif;
    float: left;
    height: 24px;
    line-height: 24px;
    position: relative;
    font-size: .75em; }
  .post-tags a {
    margin-left: 20px;
    padding: 0 10px 0 12px;
    background: #841212;
    color: #fff;
    text-decoration: none;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0; }
    .post-tags a:before {
      content: "";
      float: left;
      position: absolute;
      top: 0;
      left: -12px;
      width: 0;
      height: 0;
      border-color: transparent #841212 transparent transparent;
      border-style: solid;
      border-width: 12px 12px 12px 0; }
    .post-tags a:after {
      content: "";
      position: absolute;
      top: 10px;
      left: 0;
      float: left;
      width: 4px;
      height: 4px;
      background: #fff;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      -webkit-box-shadow: -1px -1px 2px #454545;
      -moz-box-shadow: -1px -1px 2px #454545;
      box-shadow: -1px -1px 2px #454545; }
    .post-tags a:hover {
      background: #676767; }
    .post-tags a:hover:before {
      border-color: transparent #676767 transparent transparent; }

a.external:after {
  background-color: #ac4142;
  content: "";
  display: inline-flex;
  height: 10px;
  margin-left: 4px;
  width: 10px;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url("/img/external-link.svg");
  mask-image: url("/img/external-link.svg"); }

ul.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 960px;
  margin: auto;
  padding: 2rem 0 1rem;
  list-style: none;
  border: 2px solid white;
  border-radius: 5px; }
  ul.tags-cloud .tag {
    display: flex;
    align-items: center;
    margin: 0.25rem 1rem; }
  ul.tags-cloud .tag-link {
    padding: 5px 5px 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }

#top-of-site-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 500px;
  left: 0; }

@media (max-width: 800px) {
  #top-of-site-anchor {
    top: 46px; } }

.top-of-site-link {
  visibility: hidden;
  opacity: 0;
  text-decoration: none;
  position: fixed;
  bottom: 1.2rem;
  right: 1.5rem;
  z-index: 99;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }
  .top-of-site-link:hover {
    text-decoration: none; }
  .top-of-site-link svg {
    -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    -moz-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    -o-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)); }

.top-of-site-link[data-visible=true] {
  opacity: 1;
  visibility: visible; }

.screen-reader-text {
  position: absolute !important;
  white-space: nowrap;
  border: 0;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  -moz-clip-path: inset(50%);
  -ms-clip-path: inset(50%);
  clip-path: inset(50%); }

.hypothesis-container {
  cursor: pointer; }

/* Themes */
/* Red */
.theme-base-red .post-tags a {
  background: #ac4142; }
  .theme-base-red .post-tags a:before {
    border-color: transparent #ac4142 transparent transparent; }

/* Orange */
.theme-base-orange .post-tags a {
  background: #d28445; }
  .theme-base-orange .post-tags a:before {
    border-color: transparent #d28445 transparent transparent; }

/* Green */
.theme-base-green .post-tags a {
  background: #90a959; }
  .theme-base-green .post-tags a:before {
    border-color: transparent #90a959 transparent transparent; }

/* Cyan */
.theme-base-cyan .post-tags a {
  background: #75b5aa; }
  .theme-base-cyan .post-tags a:before {
    border-color: transparent #75b5aa transparent transparent; }

/* Blue */
.theme-base-blue .post-tags a {
  background: #6a9fb5; }
  .theme-base-blue .post-tags a:before {
    border-color: transparent #6a9fb5 transparent transparent; }

/* Magenta */
.theme-base-magenta .post-tags a {
  background: #aa759f; }
  .theme-base-magenta .post-tags a:before {
    border-color: transparent #aa759f transparent transparent; }

/* Brown */
.theme-base-brown .post-tags a {
  background: #8f5536; }
  .theme-base-brown .post-tags a:before {
    border-color: transparent #8f5536 transparent transparent; }