/**
 * Some variables the user can overwrite
 */
:root {
  --spacing: 1rem;
  --body-bg: var(--oc-white);
  --body-fg: var(--oc-gray-1);
  --body-color-light: var(--oc-gray-6);
  --body-color: var(--oc-gray-8);
  --body-color-dark: var(--oc-black);
  --accent-color: var(--oc-orange-8);
  --message-color: var(--oc-green-8);
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --title-font: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --code-font: "Courier New", Courier, monospace;
  --line-height: 1.5;
  --body-font-size: 16px;
  --border-radius: .5em;
  --header-color: var(--oc-white);
  --header-color-dark: var(--oc-gray-4);
  --header-bg: var(--oc-black);
  --post-card-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
  --post-card-hover-shadow: 0 0 1px rgba(39, 44, 49, 0.10), 0 3px 16px rgba(39, 44, 49, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: var(--oc-gray-9);
    --body-fg: var(--oc-gray-8);
    --body-color-light: var(--oc-gray-6);
    --body-color: var(--oc-gray-3);
    --body-color-dark: var(--oc-white);
    --accent-color: var(--oc-blue-3);
    --message-color: var(--oc-green-3);
    --post-card-shadow: rgba(181, 205, 228, 0.06) 8px 14px 38px, rgba(181, 205, 228, 0.03) 1px 3px 8px;
    --post-card-shadow: 0 0 1px rgba(181, 205, 228, 0.10), 0 3px 16px rgba(181, 205, 228, 0.07);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --body-font-size: 18px;
  }
}
/**
 * Some base settings for common tags
 */
* {
  box-sizing: border-box;
}

body {
  color: var(--body-color);
  background-color: var(--body-bg);
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}

figure {
  margin: 0;
}

figcaption {
  font-size: 0.8em;
}

article img {
  display: block;
  max-width: 100%;
  margin: 1em 0;
  border-radius: var(--border-radius);
}

article img.emoji {
  display: inline-block;
  margin: 0 0.2em;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}

blockquote {
  border-left: 0.2em solid var(--body-color-light);
  padding-left: var(--spacing);
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
}
blockquote i, blockquote em {
  font-style: normal;
}

ul, ol {
  padding-left: calc(2 * var(--spacing));
  margin: var(--spacing) 0;
}

li ul, li ol {
  margin: 0;
}
li > p {
  margin-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing) 0;
}

td, th {
  padding: 0.25em 0.5em;
  border-bottom: 1px solid var(--body-color-light);
}

thead th {
  border-bottom-color: currentColor;
}

hr {
  border: 0;
  border-top: 1px solid var(--body-color-light);
}

code, pre {
  font-family: var(--code-font);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.25em;
  background-color: var(--body-fg);
  border-radius: var(--border-radius);
}

pre {
  overflow: auto;
  padding: 1em;
  margin: 1em 0;
}
pre code {
  padding: 0;
  background-color: inherit;
}

.highlight {
  border-radius: var(--border-radius);
  background-color: var(--body-fg);
}

.rouge-table {
  border: 0;
  margin: 0;
}
.rouge-table td,
.rouge-table th {
  border: 0;
  padding: 0;
}
.rouge-table pre {
  padding: 0;
  margin: 0;
}
.rouge-table .gutter {
  user-select: none;
  opacity: 0.5;
  padding-right: 1em;
}

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

.footnotes {
  font-size: 0.8em;
}

#markdown-toc {
  font-size: 0.8em;
  padding: 2em 3em;
  margin: 2em 0;
  border: solid var(--body-color-light);
  border-width: 1px 0;
}
#markdown-toc::before {
  display: block;
  margin-left: -3em;
  content: "TOC";
}

.task-list {
  list-style: none;
  padding-left: 0;
}
.task-list .task-list-item-checkbox {
  margin-right: 0.5em;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  z-index: 10;
}

.outer {
  padding: 0 4vw;
}

.inner {
  margin: 0 auto;
  max-width: 1024px;
  width: 100%;
}

.site-header {
  color: var(--header-color);
  background: var(--header-bg) no-repeat center center;
  background-size: cover;
}

.site-header-shield {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.site-header-content {
  text-align: center;
  padding: calc(var(--spacing) * 4) 0;
}

.site-title {
  margin: 0;
}

.site-title a {
  color: inherit;
}
.site-title a:hover, .site-title a:focus {
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  opacity: 0.8;
}

.nav {
  padding: calc(var(--spacing) * 2) 0;
  font-weight: bold;
  font-size: 0.8em;
  overflow-x: auto;
  white-space: nowrap;
}
.nav .active {
  color: var(--header-color);
}

.nav-item {
  margin-right: var(--spacing);
  color: var(--header-color-dark);
}
.nav-item:hover, .nav-item:focus {
  text-decoration: none;
  color: var(--header-color);
}

.site-header-small-content {
  display: flex;
}
.site-header-small-content .site-title {
  padding: var(--spacing) 0;
  margin-right: var(--spacing);
  white-space: nowrap;
}
.site-header-small-content .nav {
  display: flex;
  align-items: center;
  padding: var(--spacing) 0;
}

@media screen and (min-width: 480px) {
  .site-header-content {
    padding: calc(var(--spacing) * 6) 0;
  }
}
@media screen and (min-width: 768px) {
  .site-header-content {
    padding: calc(var(--spacing) * 8) 0;
  }
  .large-header .nav {
    position: relative;
    top: -70px;
  }
}
.page-title,
.post-title {
  text-align: center;
  padding: var(--spacing) 0;
}

.post-title {
  margin-top: 0;
  padding-top: 0;
}

.post-meta {
  color: var(--body-color-light);
  font-size: 0.8em;
}

.post-meta-top {
  text-align: center;
  margin-top: calc(var(--spacing) * 4);
}

.post-meta-bottom {
  margin: var(--spacing) 0;
}

a.post-category {
  color: inherit;
}
a.post-category:hover, a.post-category:focus {
  text-decoration: none;
  color: var(--body-color-dark);
}

.post-tag {
  background-color: var(--accent-color);
  color: var(--body-bg);
  padding: 0.2em 0.5em;
  border-radius: var(--border-radius);
  opacity: 0.7;
}

a.post-tag:hover, a.post-tag:focus {
  text-decoration: none;
  color: var(--body-fg);
  opacity: 1;
}

.post-cover {
  background: var(--body-fg) center center;
  background-size: cover;
  margin: 0 -12vw var(--spacing);
  height: 400px;
  border-radius: var(--border-radius);
}

.post-content {
  background-color: var(--body-bg);
  min-height: 230px;
}

.message {
  padding: var(--spacing);
  border-radius: var(--border-radius);
  background-color: var(--message-color);
  color: var(--body-bg);
}

@media screen and (min-width: 480px) {
  .page,
  .post {
    padding: 0 var(--spacing);
  }
}
@media screen and (min-width: 768px) {
  .page,
  .post {
    padding: 0 calc(var(--spacing) * 2);
  }
  .post-meta {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }
  .post-cover {
    height: 600px;
    margin-bottom: -160px;
  }
  .post-content {
    padding: var(--spacing) calc(var(--spacing) * 2);
  }
}
@media screen and (min-width: 1024px) {
  .page,
  .post {
    padding: 0 calc(var(--spacing) * 4);
  }
}
.post-feed {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin-top: var(--spacing);
}

.post-card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 var(--spacing);
  min-height: 300px;
  background: var(--body-fg) center center;
  background-size: cover;
  border-radius: var(--border-radius);
  box-shadow: var(--post-card-shadow);
  transition: all 0.5s ease;
}

.post-card:hover {
  box-shadow: var(--post-card-hover-shadow);
  transition: all 0.3s ease;
  transform: translate3D(0, -1px, 0);
}

.post-card-image-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.post-card-image {
  width: auto;
  height: 200px;
  background: var(--body-fg) no-repeat center center;
  background-size: cover;
}

.post-card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-card-content-link {
  display: block;
  position: relative;
  padding: var(--spacing) var(--spacing) 0;
  color: inherit;
}

.post-card-content-link:hover {
  text-decoration: none;
}

.post-card-categories {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--body-color-light);
}

.post-card-title {
  margin-top: 0;
}

.post-card-meta {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--body-color-light);
  padding: 0 var(--spacing) var(--spacing);
}

@media screen and (min-width: 480px) {
  .post-feed {
    margin: calc(var(--spacing) * 2) calc(0px - var(--spacing)) 0;
  }
  .post-card {
    margin: 0 var(--spacing) calc(var(--spacing) * 2);
  }
  .post-card:nth-child(6n+1) {
    flex: 1 1 100%;
    flex-direction: row;
  }
  .post-card:nth-child(6n+1) .post-card-image-link {
    position: relative;
    flex: 1 1 auto;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
  .post-card:nth-child(6n+1) .post-card-image {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .post-card:nth-child(6n+1) .post-card-content:not(.no-cover) {
    flex: 0 1 357px;
  }
}
@media screen and (min-width: 768px) {
  .post-feed {
    position: relative;
    top: -70px;
    margin-top: 0;
  }
}
.footer {
  text-align: center;
  color: var(--header-color-dark);
  background-color: var(--header-bg);
  margin-top: auto;
  padding-top: var(--spacing);
  padding-bottom: calc(var(--spacing) * 2);
}

.columns {
  margin-bottom: calc(var(--spacing) * 2);
}

.column {
  margin: var(--spacing) 0;
}

.footnav-item {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--header-color-dark);
  margin: 0 calc(var(--spacing) * 0.5);
}
.footnav-item:hover, .footnav-item:focus {
  text-decoration: none;
  color: var(--header-color);
}

.social a {
  display: inline-block;
  font-size: 1.2em;
  color: inherit;
  margin: 0 calc(var(--spacing) * 0.5);
}
.social a:hover, .social a:focus {
  text-decoration: none;
  color: var(--header-color);
}

.copyright {
  font-size: 0.8em;
}

@media screen and (min-width: 768px) {
  .columns {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: calc(var(--spacing) * 2);
    text-align: left;
  }
  .footnav-item {
    display: block;
    margin-bottom: var(--spacing);
  }
  .footer-bottom {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .copyright {
    text-align: left;
  }
  .social {
    text-align: right;
  }
}
.pagination {
  margin: var(--spacing) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 0.8em;
}
.pagination .prev, .pagination .next {
  padding: var(--spacing);
  border: 1px solid;
}
.pagination .prev {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.pagination .next {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.pagination .home-prev, .pagination .home-next {
  text-align: center;
}
.pagination .unable {
  color: var(--body-color-light);
  border-style: dashed;
}
.pagination a {
  color: var(--body-color-light);
}
.pagination a:hover, .pagination a:focus {
  text-decoration: none;
  background-color: var(--body-fg);
}

.post-prev {
  text-align: left;
}

.post-next {
  text-align: right;
}

@media screen and (min-width: 480px) {
  .post-pagination {
    padding: 0 var(--spacing);
  }
}
@media screen and (min-width: 768px) {
  .post-pagination {
    padding: 0 calc(var(--spacing) * 4);
  }
  .pagination:not(.post-pagination) {
    position: relative;
    top: -70px;
  }
}
@media screen and (min-width: 1024px) {
  .post-pagination {
    padding: 0 calc(var(--spacing) * 6);
  }
}
/**
 * Styles for the archive pages
 */
.taxonomies {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing);
  margin-top: calc(2 * var(--spacing));
  margin-bottom: calc(2 * var(--spacing));
}

.taxonomy {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--body-color-light);
  font-weight: bold;
  color: inherit;
}
.taxonomy:hover, .taxonomy:focus {
  text-decoration: none;
  color: var(--body-color-dark);
}

.archive-date {
  font-family: var(--code-font);
}

@media screen and (min-width: 768px) {
  .taxonomies {
    grid-template-columns: repeat(3, 1fr);
  }
}
.post-comments {
  margin: var(--spacing) 0;
}

@media screen and (min-width: 480px) {
  .post-comments {
    padding: 0 var(--spacing);
  }
}
@media screen and (min-width: 768px) {
  .post-comments {
    padding: 0 calc(var(--spacing) * 4);
  }
}
@media screen and (min-width: 1024px) {
  .post-comments {
    padding: 0 calc(var(--spacing) * 6);
  }
}
/**
 * rougify style gruvbox.light
 */
.highlight table td {
  padding: 5px;
}

.highlight table pre {
  margin: 0;
}

.highlight, .highlight .w {
  color: #282828;
}

.highlight .err {
  color: #9d0006;
  background-color: #fbf1c7;
  font-weight: bold;
}

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #928374;
  font-style: italic;
}

.highlight .cp {
  color: #427b58;
}

.highlight .nt {
  color: #9d0006;
}

.highlight .o, .highlight .ow {
  color: #282828;
}

.highlight .p, .highlight .pi {
  color: #282828;
}

.highlight .gi {
  color: #79740e;
  background-color: #fbf1c7;
}

.highlight .gd {
  color: #9d0006;
  background-color: #fbf1c7;
}

.highlight .gh {
  color: #79740e;
  font-weight: bold;
}

.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
  color: #9d0006;
}

.highlight .kc {
  color: #8f3f71;
}

.highlight .kt {
  color: #b57614;
}

.highlight .kd {
  color: #af3a03;
}

.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
  color: #79740e;
  font-style: italic;
}

.highlight .si {
  color: #79740e;
  font-style: italic;
}

.highlight .sr {
  color: #79740e;
  font-style: italic;
}

.highlight .sa {
  color: #9d0006;
}

.highlight .se {
  color: #af3a03;
}

.highlight .nn {
  color: #427b58;
}

.highlight .nc {
  color: #427b58;
}

.highlight .no {
  color: #8f3f71;
}

.highlight .na {
  color: #79740e;
}

.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #8f3f71;
}

.highlight .ss {
  color: #076678;
}

@media (prefers-color-scheme: dark) {
  /**
   * rougify style gruvbox.dark
   */
  .highlight table td {
    padding: 5px;
  }
  .highlight table pre {
    margin: 0;
  }
  .highlight, .highlight .w {
    color: #fbf1c7;
  }
  .highlight .err {
    color: #fb4934;
    background-color: #282828;
    font-weight: bold;
  }
  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
    color: #928374;
    font-style: italic;
  }
  .highlight .cp {
    color: #8ec07c;
  }
  .highlight .nt {
    color: #fb4934;
  }
  .highlight .o, .highlight .ow {
    color: #fbf1c7;
  }
  .highlight .p, .highlight .pi {
    color: #fbf1c7;
  }
  .highlight .gi {
    color: #b8bb26;
    background-color: #282828;
  }
  .highlight .gd {
    color: #fb4934;
    background-color: #282828;
  }
  .highlight .gh {
    color: #b8bb26;
    font-weight: bold;
  }
  .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
    color: #fb4934;
  }
  .highlight .kc {
    color: #d3869b;
  }
  .highlight .kt {
    color: #fabd2f;
  }
  .highlight .kd {
    color: #fe8019;
  }
  .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
    color: #b8bb26;
    font-style: italic;
  }
  .highlight .si {
    color: #b8bb26;
    font-style: italic;
  }
  .highlight .sr {
    color: #b8bb26;
    font-style: italic;
  }
  .highlight .sa {
    color: #fb4934;
  }
  .highlight .se {
    color: #fe8019;
  }
  .highlight .nn {
    color: #8ec07c;
  }
  .highlight .nc {
    color: #8ec07c;
  }
  .highlight .no {
    color: #d3869b;
  }
  .highlight .na {
    color: #b8bb26;
  }
  .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
    color: #d3869b;
  }
  .highlight .ss {
    color: #83a598;
  }
}

/*# sourceMappingURL=quartz.css.map */