@charset "UTF-8";
:root {
  --font: null;
  --heading-font: null;
  --base-color: #008100;
  --text-color: #212121;
  --background-color: #f9f9f9;
  --black: #212121;
  --white: #f9f9f9;
  --light-gray: #f4f5f4;
  --gray: #f2f2f2;
  --dark-gray: #3f4b3f; }

/*! m-type.css v1.0 | GNU GPL v3.0 | https://gitlab.com/wu-mng/m-type */
/* changelog */
/*-----------------------------------------------------------------------------
  TABLE OF CONTENTS 
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
  0. SETUP 
-----------------------------------------------------------------------------*/
/* 0.1 sass components............Sass files needed to build this stylesheet */
/* 0.2 mixins and variables..................................................*/
/* 0.3 testing............................................Classes for testing*/
/*-----------------------------------------------------------------------------
  1. BASE STYLES 
-----------------------------------------------------------------------------*/
/* 1.1 Structure............<html>, <body>, <header>, <main>, <section>, <article>, <footer> */
/* 1.2 Navigation...........<nav> */
/* 1.3 Headings.............<h1><h6> */
/* 1.4 Text.................<p>,<pre>, <fig>, <code> */
/* 1.5 Links................<a> */
/* 1.6 Lists................<dl>, <ol>, <ul> */
/* 1.7 Forms................<form>, <legend>, <fieldset>, <input>, <button> */
/* 1.9 Tables...............<table>, <thead>, <tbody>, <tfoot>, <tr>, <td> */
/* 1.10 Media................<audio>, <object>, <video> */
/*-----------------------------------------------------------------------------
  2. COMPONENT STYLES 
-----------------------------------------------------------------------------*/
/* Built on base styles, they make use of visual metaphors so it's easier to 
 * interact with the website. These styles should be written to work for the 
 * majority of use cases site-wide, and any changes in styling should be 
 * delegated to a parent container.
*/
/* 2.1................................................................Alerts */
/* 2.2...............................................................Buttons */
/* 2.3.............................................................Carousels */
/* 2.4........................................................Dropdown menus */
/* 2.5................................................................Modals */
/* 2.6.........................................................Progress Bars */
/* 2.7..................................................................Tabs */
/* 2.8..............................................................Lightbox */
/*-----------------------------------------------------------------------------
  3. STRUCTURAL STYLES 
-----------------------------------------------------------------------------*/
/* Styles that contain components and their containers. They are used to create 
 * the layout of a page, and commonly define dimensions.
*/
/* 3.1 SITE LAYOUT....................Shared components used by every layout */
/* 3.1.1 ......................................................Site Header */
/* 3.1.2 .....................................................Site Wrapper */
/* 3.1.3 ............................................Post default elements */
/* 3.1.4 .......................................................Pagination */
/* 3.1.5 .............................................................Tags */
/* 3.2 INDEX LAYOUT.......................Layout for posts index and archive */
/* 3.3 POST LAYOUT..................................Layout for a single post */
/* 3.4 AUTHOR LAYOUT.............................Layout for an author's page */
/* 3.5 RELATED LAYOUT.............................Layout for suggested posts */
/*-----------------------------------------------------------------------------
  4. UTILITY STYLES 
-----------------------------------------------------------------------------*/
/* The most specific styles that should exist. Classes that get applied by 
 * JavaScript using !important belong here, as any other styles that serve a 
 * singular purpose. 
 * 
 * Think .float-right, .align-center, or .font-small for single rules; 
 * .hidden, .list-unstyled, .clearfix, for patterns. 
 * (Sometimes they’re called “helpers,” as in Bootstrap.) 
*/
/* 4.1...............................................................Spacing */
/* 4.2............................................................Visibility */
/* 4.3..............................................................Wrappers */
/* 4.4................................................................Images */
/* 4.5...............................................................Various */
/*-----------------------------------------------------------------------------
  TABLE OF CONTENTS END
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
  0. SETUP 
-----------------------------------------------------------------------------*/
/* 0.1 sass components............sass files needed to build this stylesheet */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

.highlight table td {
  padding: 5px; }

.highlight table pre {
  margin: 0; }

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #75715e;
  font-style: italic; }

.highlight .cm {
  color: #75715e;
  font-style: italic; }

.highlight .c1 {
  color: #75715e;
  font-style: italic; }

.highlight .cp {
  color: #75715e;
  font-weight: bold; }

.highlight .cs {
  color: #75715e;
  font-weight: bold;
  font-style: italic; }

.highlight .err {
  color: #960050;
  background-color: #1e0010; }

.highlight .gi {
  color: #ffffff;
  background-color: #324932; }

.highlight .gd {
  color: #ffffff;
  background-color: #493131; }

.highlight .ge {
  color: #000000;
  font-style: italic; }

.highlight .gr {
  color: #aa0000; }

.highlight .gt {
  color: #aa0000; }

.highlight .gh {
  color: #999999; }

.highlight .go {
  color: #888888; }

.highlight .gp {
  color: #555555; }

.highlight .gs {
  font-weight: bold; }

.highlight .gu {
  color: #aaaaaa; }

.highlight .k, .highlight .kv {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kc {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kd {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kp {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kr {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kt {
  color: #66d9ef;
  font-weight: bold; }

.highlight .kn {
  color: #f92672;
  font-weight: bold; }

.highlight .ow {
  color: #f92672;
  font-weight: bold; }

.highlight .o {
  color: #f92672;
  font-weight: bold; }

.highlight .mf {
  color: #ae81ff; }

.highlight .mh {
  color: #ae81ff; }

.highlight .il {
  color: #ae81ff; }

.highlight .mi {
  color: #ae81ff; }

.highlight .mo {
  color: #ae81ff; }

.highlight .m, .highlight .mb, .highlight .mx {
  color: #ae81ff; }

.highlight .se {
  color: #ae81ff; }

.highlight .sa {
  color: #66d9ef;
  font-weight: bold; }

.highlight .sb {
  color: #e6db74; }

.highlight .sc {
  color: #e6db74; }

.highlight .sd {
  color: #e6db74; }

.highlight .s2 {
  color: #e6db74; }

.highlight .sh {
  color: #e6db74; }

.highlight .si {
  color: #e6db74; }

.highlight .sx {
  color: #e6db74; }

.highlight .sr {
  color: #e6db74; }

.highlight .s1 {
  color: #e6db74; }

.highlight .ss {
  color: #e6db74; }

.highlight .s, .highlight .dl {
  color: #e6db74; }

.highlight .na {
  color: #a6e22e; }

.highlight .nc {
  color: #a6e22e;
  font-weight: bold; }

.highlight .nd {
  color: #a6e22e;
  font-weight: bold; }

.highlight .ne {
  color: #a6e22e;
  font-weight: bold; }

.highlight .nf, .highlight .fm {
  color: #a6e22e;
  font-weight: bold; }

.highlight .no {
  color: #66d9ef; }

.highlight .bp {
  color: #f8f8f2; }

.highlight .nb {
  color: #f8f8f2; }

.highlight .ni {
  color: #f8f8f2; }

.highlight .nn {
  color: #f8f8f2; }

.highlight .vc {
  color: #f8f8f2; }

.highlight .vg {
  color: #f8f8f2; }

.highlight .vi {
  color: #f8f8f2; }

.highlight .nv, .highlight .vm {
  color: #f8f8f2; }

.highlight .w {
  color: #f8f8f2; }

.highlight .nl {
  color: #f8f8f2;
  font-weight: bold; }

.highlight .nt {
  color: #f92672; }

.highlight {
  color: #f8f8f2;
  background-color: #49483e; }

/* 0.2 mixins and variables..................................................*/
/* 0.3....................................................Classes for testing*/
*:focus-visible {
  border-bottom: 3px solid #008100 !important;
  border-bottom: 3px solid var(--base-color) !important;
  outline: none;
  padding: 3px; }

/*
body {
  background: linear-gradient(to bottom, #b2e5ff 1px,transparent 1px);
  background-size: 100% $grid-points*2+px;
}
*/
/*-----------------------------------------------------------------------------
  1. BASE STYLES 
-----------------------------------------------------------------------------*/
/* 1.1 Structure............<html>, <body>, <header>, <main>, <section>, <article>, <footer> */
html {
  font-size: 100%; }
  @media screen and (min-width: 992px) {
    html {
      font-size: 112.5%; } }

body {
  background-color: #f9f9f9;
  background-color: var(--background-color);
  color: #212121;
  color: var(--text-color);
  font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }
  @media screen and (min-width: 992px) {
    body {
      line-height: 1.778rem; } }

body.fixed-header {
  margin-top: 3.75rem; }

main {
  margin: auto;
  max-width: 100%; }
  @media screen and (min-width: 768px) {
    main {
      max-width: 640px; } }

@media screen and (min-width: 1360px) {
  main.with-sidebar {
    flex: 0 0 640px;
    margin-top: 0;
    margin-left: 0;
    padding-top: 2rem;
    max-width: initial;
    min-width: 640px; } }

aside {
  background-color: #f4f5f4;
  background-color: var(--light-gray);
  border-radius: 6px;
  margin: auto;
  margin-top: 3.75rem;
  padding: 2rem 1rem;
  width: 100%; }
  @media screen and (min-width: 768px) {
    aside {
      max-width: 640px; } }
  @media screen and (min-width: 1360px) {
    aside {
      flex: 0 0 240px;
      height: 100%;
      margin: initial;
      min-width: 0; } }

article > * {
  overflow: hidden; }

footer#main-footer {
  background-color: #3f4b3f;
  background-color: var(--dark-gray);
  color: #f9f9f9;
  color: var(--white);
  padding: 0 1rem; }
  footer#main-footer p {
    font-size: 0.834rem;
    line-height: 1.5rem;
    margin: 1rem 0; }
    @media screen and (min-width: 768px) {
      footer#main-footer p {
        font-size: 0.8rem;
        line-height: 1.5rem; } }

/* 1.2 Navigation...........<nav> */
/* 1.3 Headings.............<h1><h6> */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  margin: 0;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 992px) {
    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 1.778rem; } }

h1 {
  font-size: 2.489rem;
  line-height: 3rem; }
  @media screen and (min-width: 768px) {
    h1 {
      font-size: 3.052rem;
      line-height: 4rem; } }

h2 {
  font-size: 2.074rem;
  line-height: 2.5rem; }
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 2.442rem;
      line-height: 3rem; } }

h3 {
  font-size: 1.728rem;
  line-height: 2.5rem; }
  @media screen and (min-width: 768px) {
    h3 {
      font-size: 1.954rem;
      line-height: 2.5rem; } }

h4 {
  font-size: 1.44rem;
  line-height: 2rem; }
  @media screen and (min-width: 768px) {
    h4 {
      font-size: 1.563rem;
      line-height: 2rem; } }

h5 {
  font-size: 1.2rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    h5 {
      font-size: 1.25rem;
      line-height: 1.5rem; } }

h6 {
  font-size: 1rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    h6 {
      font-size: 1rem;
      line-height: 1.5rem; } }

.small {
  font-size: 0.875rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    .small {
      font-size: 0.875rem;
      line-height: 1.5rem; } }

.smaller {
  font-size: 0.834rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    .smaller {
      font-size: 0.8rem;
      line-height: 1.5rem; } }

/* 1.4 Text.................<p>,<pre>, <fig>, <code> */
blockquote, p, ul, ol, li, dt, dd {
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 992px) {
    blockquote, p, ul, ol, li, dt, dd {
      margin-bottom: 1.778rem; } }

blockquote {
  border-left: 3px solid;
  border-color: #f4f5f4;
  border-color: var(--light-gray);
  color: #3f4b3f;
  color: var(--dark-gray);
  font-size: 1.2rem;
  line-height: 2rem;
  font-style: italic;
  font-weight: 300;
  margin: 3rem 0;
  padding-left: 1.5rem; }
  @media screen and (min-width: 768px) {
    blockquote {
      font-size: 1.25rem;
      line-height: 2rem; } }

blockquote blockquote::before {
  content: "\2014\00a0"; }

blockquote blockquote {
  border: none;
  margin-top: 0;
  text-align: right; }

blockquote blockquote p {
  display: inline; }

pre, code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; }

pre {
  border-radius: 0.1875rem;
  padding: 1rem;
  white-space: pre-wrap; }

.highlighter-rouge {
  margin-bottom: 1.5rem;
  background-color: #f4f5f4;
  background-color: var(--light-gray);
  border-radius: 3px;
  padding: 0 .5rem; }
  @media screen and (min-width: 992px) {
    .highlighter-rouge {
      margin-bottom: 1.778rem; } }

.highlight {
  background-color: #1c1c1c; }

/* correct a bug introduced by normalize, causing this to overlap the mobile menu */
sub, sup {
  padding-left: .125rem;
  position: inherit;
  vertical-align: super; }

/* 1.5 Links................<a> */
a,
a:visited,
a:focus,
a:hover,
a:active {
  color: #212121;
  color: var(--text-color);
  text-decoration: none; }

a:active, a:hover {
  color: #008100;
  color: var(--base-color); }

p a {
  border-bottom: 1px solid; }

li > a:focus,
li > a:hover {
  border-bottom: 1px solid; }

a img {
  display: block; }

/* 1.6 Lists................<dl>, <ol>, <ul> */
dt {
  font-weight: 500; }

li ul, li ol {
  margin-top: 1.5rem; }
  @media screen and (min-width: 992px) {
    li ul, li ol {
      margin-top: 1.778rem; } }

/* 1.7 Forms................<form>, <legend>, <fieldset>, <input>, <button> */
[type="checkbox"], [type="radio"] {
  margin-right: .5rem; }

button {
  background: none;
  border: none;
  margin: 0;
  padding: 0; }

.task-list {
  padding: 0; }

/* 1.8 Images...............<img>, <figure>, <figcaption> */
img::before {
  color: #3f4b3f;
  color: var(--dark-gray);
  font-size: 0.834rem;
  line-height: 1.5rem;
  padding: 1.5rem; }
  @media screen and (min-width: 768px) {
    img::before {
      font-size: 0.8rem;
      line-height: 1.5rem; } }
  @media screen and (min-width: 992px) {
    img::before {
      padding: 1.778rem; } }

img, figure {
  max-width: 100%; }

figure {
  margin: 0; }

figcaption, figcaption p {
  color: #3f4b3f;
  color: var(--dark-gray);
  font-size: 0.834rem;
  line-height: 1.5rem;
  font-style: italic;
  margin: 0; }
  @media screen and (min-width: 768px) {
    figcaption, figcaption p {
      font-size: 0.8rem;
      line-height: 1.5rem; } }

figure.align-center figcaption,
figure.float-center figcaption {
  margin: auto; }

figure.lightbox figcaption p::after {
  content: "[click to enlarge]"; }

/* 1.9 Tables...............<table>, <thead>, <tbody>, <tfoot>, <tr>, <td> */
table {
  border-collapse: collapse;
  border-top: 1px solid;
  width: 100%;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 992px) {
    table {
      margin-bottom: 1.778rem; } }

thead {
  border-bottom: 1px solid; }

th {
  font-weight: 500;
  padding: 1rem;
  text-align: left; }

tr:nth-child(even) {
  background-color: #f4f5f4;
  background-color: var(--light-gray); }

td {
  padding: 1rem; }

/* 1.10 Media................<audio>, <object>, <video> */
/*-----------------------------------------------------------------------------
  2. COMPONENT STYLES 
-----------------------------------------------------------------------------*/
/* 2.1................................................................Alerts */
/* 2.2...............................................................Buttons */
/* 2.2...............................................................Buttons */
.button-primary {
  background-color: #008100;
  background-color: var(--base-color);
  color: #f9f9f9;
  color: var(--white);
  border-radius: 0.25rem;
  display: inline-block;
  margin: 1rem 0;
  padding: 0.375rem 0.75rem !important; }

a:hover.button-primary {
  background-color: #3f4b3f;
  background-color: var(--dark-gray); }

/* 2.3.............................................................Carousels */
/* 2.4........................................................Dropdown menus */
/* 2.5................................................................Modals */
/* 2.6.........................................................Progress Bars */
/* 2.7..................................................................Tabs */
/* 2.8..............................................................Lightbox */
#lightbox {
  display: none;
  flex-direction: column;
  justify-content: center; }

.lightbox-off {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; }

.lightbox-on {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }

.lightbox img {
  cursor: pointer; }

.lightbox-close {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 5rem;
  margin: 1rem;
  text-align: right;
  position: absolute;
  top: -2rem;
  right: 0; }

.lightbox-close:hover {
  color: white; }

.lightbox-content {
  display: flex;
  flex-direction: column;
  margin: 1rem; }

.lightbox-content img {
  margin: auto;
  max-height: calc(100vh - 4rem);
  margin-bottom: 0.75rem; }
  @media screen and (min-width: 992px) {
    .lightbox-content img {
      margin-bottom: 0.889rem; } }

.lightbox-content p {
  color: #f9f9f9;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .lightbox-content p {
      font-size: 1rem;
      line-height: 1.5rem; } }

/*-----------------------------------------------------------------------------
  3. STRUCTURAL STYLES 
-----------------------------------------------------------------------------*/
/* 3.1 SITE LAYOUT....................shared components used by every layout */
/* 3.1.1 ......................................................Site Header */
#site-header {
  background-color: #f4f5f4;
  background-color: var(--light-gray);
  border-bottom: 1px solid;
  border-color: #f9f9f9;
  border-color: var(--white); }
  #site-header .site-title {
    font-size: 1.2rem;
    line-height: 2rem; }
    @media screen and (min-width: 768px) {
      #site-header .site-title {
        font-size: 1.25rem;
        line-height: 2rem; } }
  #site-header .wrapper {
    justify-content: space-between;
    align-items: center; }

#site-hero {
  background-color: #f2f2f2;
  background-color: var(--gray);
  margin: auto;
  max-width: 1920px;
  text-align: center;
  width: 100%; }
  #site-hero .wrapper {
    background-color: #f4f5f4;
    background-color: var(--light-gray);
    background-color: rgba(244, 245, 244, 0.9);
    margin: 1.5rem auto;
    padding: 2rem 1rem; }
    @media screen and (min-width: 536px) {
      #site-hero .wrapper {
        padding: 2rem; } }
    @media screen and (min-width: 768px) {
      #site-hero .wrapper {
        max-width: 640px;
        margin: 4rem auto;
        padding: 4rem 2rem; } }
  #site-hero .site-title {
    font-size: 2.987rem;
    line-height: 4.5rem;
    margin-bottom: -1.5rem; }
    @media screen and (min-width: 768px) {
      #site-hero .site-title {
        font-size: 3.815rem;
        line-height: 6rem; } }
    @media screen and (min-width: 992px) {
      #site-hero .site-title {
        margin-bottom: -1.778rem; } }
  #site-hero .site-tagline {
    color: #3f4b3f;
    color: var(--dark-gray);
    font-size: 1.44rem;
    line-height: 2.5rem;
    font-weight: 300; }
    @media screen and (min-width: 768px) {
      #site-hero .site-tagline {
        font-size: 1.563rem;
        line-height: 2.5rem; } }
  #site-hero .site-description {
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 300; }
    @media screen and (min-width: 768px) {
      #site-hero .site-description {
        font-size: 1.25rem;
        line-height: 2rem; } }

.site-title {
  font-weight: 600; }

#site-nav a {
  border-bottom: 3px solid;
  border-color: #f4f5f4;
  border-color: var(--light-gray);
  color: #3f4b3f;
  color: var(--dark-gray);
  font-variant: all-small-caps;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: calc(1rem + 3px) 0.75rem; }
  @media screen and (min-width: 768px) {
    #site-nav a {
      font-size: 1rem;
      line-height: 1.5rem; } }
#site-nav a:active {
  background-color: #f2f2f2;
  background-color: var(--gray);
  border-bottom: 3px solid #008100;
  border-bottom: 3px solid var(--base-color);
  border-color: #008100;
  border-color: var(--base-color); }
#site-nav a:hover {
  background-color: #f2f2f2;
  background-color: var(--gray);
  border-bottom: 3px solid #f4f5f4;
  border-bottom: 3px solid var(--light-gray);
  color: #212121;
  color: var(--text-color);
  text-decoration: none; }
#site-nav a.current, #site-nav a.current:visited {
  border-bottom: 3px solid #008100;
  border-bottom: 3px solid var(--base-color);
  color: #212121;
  color: var(--text-color); }
#site-nav .site-menu {
  display: none; }
  @media screen and (min-width: 992px) {
    #site-nav .site-menu {
      display: block; } }
#site-nav .hamburger {
  padding: 1rem 0;
  /* prevents text selection */
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* hamburger 'rows' */
  /* hamburger transformation into 'X' */
  /* menu slide-in */ }
  @media screen and (min-width: 992px) {
    #site-nav .hamburger {
      display: none; } }
  #site-nav .hamburger input {
    position: absolute;
    top: 1rem;
    cursor: pointer;
    display: block;
    height: 1.75rem;
    width: 2rem;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none; }
  #site-nav .hamburger input:focus-visible ~ span {
    background: #008100;
    background: var(--base-color); }
  #site-nav .hamburger span {
    background-color: #212121;
    background-color: var(--black);
    border-radius: 3px;
    display: block;
    width: 2rem;
    height: .25rem;
    margin-top: .25rem;
    position: relative;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
  #site-nav .hamburger span:first-child {
    transform-origin: 0% 0%; }
  #site-nav .hamburger span:nth-last-child(2) {
    transform-origin: 0% 100%;
    margin-bottom: .25rem; }
  #site-nav .hamburger input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(5px, -2px); }
  #site-nav .hamburger input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(45deg) translate(0px, -8px); }
  #site-nav .hamburger input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0px, 7px); }
  #site-nav .hamburger input:checked ~ .site-menu-mobile {
    transform-origin: top left;
    transform: translate(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
#site-nav .site-menu-mobile {
  background-color: #f4f5f4;
  background-color: var(--light-gray);
  list-style-type: none;
  position: absolute;
  right: -100%;
  width: 100vw;
  height: calc(100vh - 3.75rem);
  padding-top: 1.5rem;
  overflow-y: scroll;
  /* menu slide-out */
  transform: none;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
  @media screen and (min-width: 992px) {
    #site-nav .site-menu-mobile {
      padding-top: 1.778rem; } }
  #site-nav .site-menu-mobile a, #site-nav .site-menu-mobile a.current, #site-nav .site-menu-mobile a.current:visited {
    border-bottom: 1px dotted;
    display: block;
    margin: 0 1rem;
    font-size: 1.728rem;
    line-height: 3rem; }
    @media screen and (min-width: 768px) {
      #site-nav .site-menu-mobile a, #site-nav .site-menu-mobile a.current, #site-nav .site-menu-mobile a.current:visited {
        font-size: 1.954rem;
        line-height: 3rem; } }
  #site-nav .site-menu-mobile a.current {
    font-weight: 600; }
  #site-nav .site-menu-mobile a:last-child {
    border: none; }

/* 3.1.2 .....................................................Site Wrapper */
#site-wrapper {
  flex: 1;
  column-gap: 12rem;
  margin-top: 3rem;
  margin-bottom: 6rem; }
  @media screen and (min-width: 992px) {
    #site-wrapper {
      margin-top: 3.556rem; } }
  @media screen and (min-width: 992px) {
    #site-wrapper {
      margin-bottom: 7.112rem; } }
  @media screen and (max-width: 280px) {
    #site-wrapper {
      width: 90%; } }

/* 3.1.3 ..............................................Post default elements */
.post {
  margin-bottom: 4.5rem; }
  @media screen and (min-width: 992px) {
    .post {
      margin-bottom: 5.334rem; } }

.post-header {
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 992px) {
    .post-header {
      margin-bottom: 1.778rem; } }

.post-title {
  font-weight: 600;
  margin-bottom: 0.75rem; }
  @media screen and (min-width: 992px) {
    .post-title {
      margin-bottom: 0.889rem; } }

.post-title a {
  color: #212121;
  color: var(--text-color);
  border-bottom: none; }

.post-title a:active,
.post-title a:hover {
  border-bottom: 2px solid;
  border-color: #212121;
  border-color: var(--black);
  padding-bottom: 1px; }

.post-tagline {
  color: #3f4b3f;
  color: var(--dark-gray);
  font-size: 1.44rem;
  line-height: 2.5rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 300; }
  @media screen and (min-width: 768px) {
    .post-tagline {
      font-size: 1.563rem;
      line-height: 2.5rem; } }
  @media screen and (min-width: 992px) {
    .post-tagline {
      margin-bottom: 0.889rem; } }

.post-meta {
  font-size: 1rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    .post-meta {
      font-size: 1rem;
      line-height: 1.5rem; } }

.post-meta a {
  border-bottom: 1px solid; }

sup, .footnotes ol li {
  padding-top: 3.75rem;
  margin-top: -3.75rem; }

/* 3.1.4 .......................................................Pagination */
.pagination.top {
  margin: 1rem 0 4rem; }

.pagination span,
.pagination a {
  display: inline-block;
  padding: 0.5rem 1rem; }

.pagination #current-page {
  border-bottom: 3px solid #008100;
  border-bottom: 3px solid var(--base-color); }

.pagination a:hover {
  background-color: #f2f2f2;
  background-color: var(--gray);
  border-bottom: 3px solid #f4f5f4;
  border-bottom: 3px solid var(--light-gray); }

/* 3.1.5 .............................................................Tags */
.tag::before {
  content: "#"; }

.tag,
.tag:visited {
  color: #3f4b3f;
  color: var(--dark-gray);
  background-color: #f4f5f4;
  background-color: var(--light-gray);
  border-radius: 3px;
  display: inline-block;
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 1rem;
  margin: 2px 1px;
  padding: 3px 5px; }
  @media screen and (min-width: 768px) {
    .tag,
    .tag:visited {
      font-size: 0.875rem;
      line-height: 1rem; } }

.tag:hover,
.tag:active {
  color: #f4f5f4;
  color: var(--light-gray);
  background-color: #3f4b3f;
  background-color: var(--dark-gray); }

/* 3.2 INDEX LAYOUT.......................Layout for posts index and archive */
#index h1, #index h2, #index h3, #index h4, #index h5, #index h6 {
  font-weight: normal; }
#index .post {
  border-bottom: 1px dotted;
  border-color: #f4f5f4;
  border-color: var(--light-gray); }
#index .post-title {
  font-size: 2.074rem;
  line-height: 2.5rem;
  font-weight: 500; }
  @media screen and (min-width: 768px) {
    #index .post-title {
      font-size: 2.442rem;
      line-height: 3rem; } }
#index .post-tagline {
  font-size: 1.2rem;
  line-height: 2rem;
  margin-bottom: 0.375rem; }
  @media screen and (min-width: 768px) {
    #index .post-tagline {
      font-size: 1.25rem;
      line-height: 2rem; } }
  @media screen and (min-width: 992px) {
    #index .post-tagline {
      margin-bottom: 0.4445rem; } }
#index .post-meta {
  font-size: 0.834rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    #index .post-meta {
      font-size: 0.8rem;
      line-height: 1.5rem; } }
#index .post-image {
  float: left;
  margin: .5rem 1rem 0 0; }
  #index .post-image img {
    padding-top: 1rem; }
  #index .post-image figcaption {
    display: none; }
#index .tag,
#index .tag:visited {
  margin: 2px 0;
  font-size: 0.834rem;
  line-height: 1rem; }
  @media screen and (min-width: 768px) {
    #index .tag,
    #index .tag:visited {
      font-size: 0.8rem;
      line-height: 1rem; } }

#archive .tagbox {
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 992px) {
    #archive .tagbox {
      margin-bottom: 1.778rem; } }
#archive .tag-posts .tag {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 3px 10px; }
  @media screen and (min-width: 768px) {
    #archive .tag-posts .tag {
      font-size: 1rem;
      line-height: 1.5rem; } }
#archive .tag-posts .tag:hover {
  color: #3f4b3f;
  color: var(--dark-gray);
  background-color: #f4f5f4;
  background-color: var(--light-gray); }
#archive .tag-posts a {
  border: none; }

/* 3.3 POST LAYOUT..................................Layout for a single post */
#post .post-meta {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    #post .post-meta {
      font-size: 1rem;
      line-height: 1.5rem; } }
#post .post-image {
  margin-bottom: 0.75rem; }
  @media screen and (min-width: 992px) {
    #post .post-image {
      margin-bottom: 0.889rem; } }

.avatar {
  line-height: 0;
  margin-right: .5rem !important; }

.avatar > img {
  background-color: #f2f2f2;
  background-color: var(--gray);
  width: 4rem;
  height: 4rem;
  margin-right: .5rem;
  border-radius: 50%;
  object-fit: cover; }

.avatar > figcaption {
  display: none; }

/* 3.4 AUTHOR LAYOUT.............................Layout for an author's page */
#author .post-title {
  font-style: normal;
  margin-bottom: 0; }
#author .post-meta {
  display: flex;
  align-items: center; }

/* 3.5 RELATED LAYOUT.............................Layout for suggested posts */
#related-posts {
  text-align: center;
  font-weight: 300; }
  @media screen and (min-width: 1360px) {
    #related-posts {
      text-align: left; } }
  #related-posts .related-header h1 {
    font-size: 1.2rem;
    line-height: 2rem;
    color: #3f4b3f;
    color: var(--dark-gray);
    margin-bottom: 0;
    font-weight: 300; }
    @media screen and (min-width: 768px) {
      #related-posts .related-header h1 {
        font-size: 1.25rem;
        line-height: 2rem; } }
  #related-posts .related-header hr {
    border: 1px dotted; }
  #related-posts figure {
    margin-bottom: .5rem;
    margin-right: 0; }
  #related-posts img {
    float: none; }
  #related-posts .post {
    margin: 2rem auto;
    max-width: 320px; }
  #related-posts .post-header {
    margin-bottom: 0; }
  #related-posts .post-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    margin-bottom: 0; }
    @media screen and (min-width: 768px) {
      #related-posts .post-title {
        font-size: 1rem;
        line-height: 1.5rem; } }
    #related-posts .post-title a {
      color: #3f4b3f;
      color: var(--dark-gray); }
  #related-posts .post-image {
    margin-top: 0; }
    #related-posts .post-image figcaption {
      display: none; }
  #related-posts .post-footer {
    text-align: left; }
  #related-posts .tag,
  #related-posts .tag:visited {
    margin: 2px 0;
    font-size: 0.834rem;
    line-height: 1rem; }
    @media screen and (min-width: 768px) {
      #related-posts .tag,
      #related-posts .tag:visited {
        font-size: 0.8rem;
        line-height: 1rem; } }
  #related-posts .tag:focus,
  #related-posts .tag:hover,
  #related-posts .tag:active {
    color: #3f4b3f;
    color: var(--dark-gray);
    background-color: #f4f5f4;
    background-color: var(--light-gray); }

/*-----------------------------------------------------------------------------
  4. UTILITY STYLES 
-----------------------------------------------------------------------------*/
/* 4.1...............................................................Spacing */
.align-left {
  float: left;
  margin-right: 1rem; }

.align-center {
  display: block;
  margin: auto; }

.align-right {
  float: right;
  margin-left: 1rem; }

.anchor {
  position: relative;
  top: -6rem; }

.clear {
  clear: both; }

.fixed {
  position: fixed;
  top: 0;
  width: 100%; }

/* 4.2............................................................Visibility */
.hidden {
  display: none; }

.visible-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

.visible-hidden:focus {
  clip: auto;
  height: auto;
  overflow: auto;
  position: absolute;
  width: auto; }

/* 4.3..............................................................Wrappers */
.wrapper {
  margin: auto;
  max-width: 100%;
  padding: 0 1rem;
  max-width: 320px; }
  @media screen and (min-width: 536px) {
    .wrapper {
      max-width: 480px; } }
  @media screen and (min-width: 768px) {
    .wrapper {
      max-width: 640px; } }
  @media screen and (min-width: 992px) {
    .wrapper {
      max-width: 960px; } }
  @media screen and (min-width: 1360px) {
    .wrapper {
      max-width: 1144px; } }

.flex {
  display: flex; }

.flex-wrap {
  display: flex;
  flex-wrap: wrap; }

/* 4.4................................................................Images */
.img-thumb {
  margin: .5rem;
  margin-right: 1.5rem; }

.img-thumb > figcaption p {
  font-size: 0.834rem;
  line-height: 1.5rem; }
  @media screen and (min-width: 768px) {
    .img-thumb > figcaption p {
      font-size: 0.8rem;
      line-height: 1.5rem; } }

.img-thumb {
  float: left;
  text-align: left; }

.img-small {
  text-align: left; }
  @media screen and (min-width: 536px) {
    .img-small {
      float: left;
      margin: .5rem 1.5rem .5rem 0; } }

.img-small.center {
  margin: auto;
  float: none;
  text-align: center; }

.img-thumb.center {
  margin: auto;
  float: none; }

.img-thumb.right {
  float: right;
  margin-left: 1.5rem;
  margin-right: 1rem;
  text-align: right; }

@media screen and (min-width: 536px) {
  .img-small.right {
    float: right;
    margin-left: 1.5rem;
    margin-right: 1rem;
    text-align: right; } }

/* 4.5...............................................................Various */
.posts-list {
  padding: 0; }
  .posts-list > li {
    font-size: 1.2rem;
    line-height: 2rem;
    list-style-type: none; }
    @media screen and (min-width: 768px) {
      .posts-list > li {
        font-size: 1.25rem;
        line-height: 2rem; } }

.read-more {
  clear: both;
  font-size: 1.2rem;
  line-height: 2rem;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 768px) {
    .read-more {
      font-size: 1.25rem;
      line-height: 2rem; } }
  @media screen and (min-width: 992px) {
    .read-more {
      margin-bottom: 1.778rem; } }
  .read-more a {
    border-bottom: 2px solid; }
  .read-more :after {
    content: "..."; }
