@charset "UTF-8";
.site-header > .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

.cv-entry {
  margin-bottom: 1em;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 13em;
  grid-gap: 10px;
}

.post-link.grid-box {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 5px;
  padding: 0.7em;
  font-size: 150%;
}

.post-link.grid-box:hover {
  text-decoration: none;
}

.grid-post-meta {
  font-size: 14px;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .grid-wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 13em;
    grid-gap: 10px;
  }
}
.iframe-wrapper {
  position: relative;
  padding-bottom: 40%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.endnote-wrapper {
  display: flex;
  border-top: 1px solid #2c2c2a;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  color: #9a9a93;
  font-size: 12.8px;
  padding: 15px 0;
  margin: 0 16px;
}

.endnote {
  margin-bottom: 0;
  display: inline-block;
}

.main-pic {
  float: left;
  max-height: 300px;
  max-width: 300px;
  margin: 5px 20px 20px 0;
}

.index-col-wrapper {
  font-size: 15px;
  color: #9a9a93;
  margin-left: -15px;
}

.index-col {
  float: left;
  margin-bottom: 15px;
  padding-left: 15px;
}

.index-col-1 {
  width: -webkit-calc(50% - (30px / 2));
  width: calc(50% - 30px / 2);
}

.index-col-2 {
  width: -webkit-calc(50% - (30px / 2));
  width: calc(50% - 30px / 2);
}

.social-media-list > li {
  height: auto;
}

@media screen and (max-width: 550px) {
  .index-col {
    float: none;
    width: -webkit-calc(100% - (30px / 2));
    width: calc(100% - 30px / 2);
  }
}
.list-wrapper {
  display: grid;
  grid-template-columns: 20% minmax(0, 1fr);
  grid-gap: 10px;
}

.list-box {
  object-fit: cover;
  height: 90px;
  width: 160px;
  max-width: 100%;
}

.list-post-title {
  font-weight: bold;
  font-size: 24px;
  margin-right: 10px;
}

.list-post-date {
  color: #cfcdc8;
  font-style: italic;
  margin-right: 10px;
}

.list-post-lang {
  margin-right: 10px;
}

blockquote.list-post-excerpt {
  font-size: 16px;
  margin-right: 10px;
}

.fullscreen-wrapper {
  width: 50%;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.fullscreen-content {
  width: 90vw; /* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  margin-right: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  display: inline-block;
}

.wide-content {
  width: 70vw; /* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  margin-right: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  display: inline-block;
}

.wider-content {
  width: 80vw; /* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  margin-right: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  display: inline-block;
}

.widest-content {
  width: 90vw; /* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  margin-right: calc(-1 * (100vw - 100%) / 2); /* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  display: inline-block;
}

iframe {
  max-width: 85vw;
  min-width: 40vw;
  max-height: 85vw;
  min-height: 40vw;
}

.cv-col-wrapper {
  display: grid;
  grid-template-columns: 20% 2% 55% 23%;
  grid-gap: 10px;
}

[data-tooltip] {
  display: inline-block;
  position: relative;
  cursor: help;
}

/* Tooltip styling */
[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4;
  min-width: 200px;
  text-align: center;
  border-radius: 4px;
}

/* Dynamic horizontal centering */
[data-tooltip-position=top]:before,
[data-tooltip-position=bottom]:before {
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Dynamic vertical centering */
[data-tooltip-position=right]:before,
[data-tooltip-position=left]:before {
  top: 50%;
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

[data-tooltip-position=top]:before {
  bottom: 100%;
  margin-bottom: 6px;
}

[data-tooltip-position=right]:before {
  left: 100%;
  margin-left: 6px;
}

[data-tooltip-position=bottom]:before {
  top: 100%;
  margin-top: 6px;
}

[data-tooltip-position=left]:before {
  right: 100%;
  margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
  content: "";
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position=top]:after,
[data-tooltip-position=bottom]:after {
  left: 50%;
  margin-left: -6px;
}

/* Dynamic vertical centering for the tooltip */
[data-tooltip-position=right]:after,
[data-tooltip-position=left]:after {
  top: 50%;
  margin-top: -6px;
}

[data-tooltip-position=top]:after {
  bottom: 100%;
  border-width: 6px 6px 0;
  border-top-color: #000;
}

[data-tooltip-position=right]:after {
  left: 100%;
  border-width: 6px 6px 6px 0;
  border-right-color: #000;
}

[data-tooltip-position=bottom]:after {
  top: 100%;
  border-width: 0 6px 6px;
  border-bottom-color: #000;
}

[data-tooltip-position=left]:after {
  right: 100%;
  border-width: 6px 0 6px 6px;
  border-left-color: #000;
}

/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display: block;
  z-index: 50;
}

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none !important;
}

/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0;
}

/**
 * Basic styling
 */
body {
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #e8e6e3;
  background-color: #181a1b;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
.highlight {
  margin-bottom: 15px;
}

/**
 * `main` element
 */
main {
  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
}

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle;
}

/**
 * Figures
 */
figure > img {
  display: block;
}

figcaption {
  font-size: 14px;
}

/**
 * Lists
 */
ul, ol {
  margin-left: 30px;
}

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

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/**
 * Links
 */
a {
  color: #e1000f;
  text-decoration: none;
}
a:visited {
  color: rgb(58.2352941176%, 0%, 3.8823529412%);
}
a:hover {
  color: #e8e6e3;
  text-decoration: underline;
}
.social-media-list a:hover {
  text-decoration: none;
}
.social-media-list a:hover .username {
  text-decoration: underline;
}

/**
 * Blockquotes
 */
blockquote {
  color: #9a9a93;
  border-left: 4px solid #2c2c2a;
  padding-left: 15px;
  font-size: 18px;
  letter-spacing: -1px;
  font-style: italic;
}
blockquote > :last-child {
  margin-bottom: 0;
}

/**
 * Code formatting
 */
pre,
code {
  font-size: 15px;
  border: 1px solid #2c2c2a;
  border-radius: 3px;
  background-color: #eef;
}

code {
  padding: 1px 5px;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;
}
pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
}

/**
 * Wrapper
 */
.wrapper {
  max-width: -webkit-calc(800px - (30px * 2));
  max-width: calc(800px - 30px * 2);
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px;
  padding-left: 30px;
}
@media screen and (max-width: 800px) {
  .wrapper {
    max-width: -webkit-calc(800px - (30px));
    max-width: calc(800px - (30px));
    padding-right: 15px;
    padding-left: 15px;
  }
}

/**
 * Clearfix
 */
.footer-col-wrapper:after, .index-col-wrapper:after, .wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Icons
 */
.svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: #9a9a93;
  padding-right: 5px;
  vertical-align: text-top;
}

.social-media-list li + li {
  padding-top: 5px;
}

/**
 * Tables
 */
table {
  margin-bottom: 30px;
  width: 100%;
  text-align: left;
  color: white;
  border-collapse: collapse;
  border: 1px solid #2c2c2a;
}
table tr:nth-child(even) {
  background-color: rgb(23.3944368445%, 23.3944368445%, 22.3310533516%);
}
table th, table td {
  padding: 10px 15px;
}
table th {
  background-color: rgb(20.3246694026%, 20.3246694026%, 19.4008207934%);
  border: 1px solid rgb(13.161878705%, 13.161878705%, 12.5636114911%);
  border-bottom-color: rgb(4.9758321933%, 4.9758321933%, 4.7496580027%);
}
table td {
  border: 1px solid #2c2c2a;
}

/**
 * Site header
 */
.site-header {
  border-bottom: 1px solid #2c2c2a;
  min-height: 55.95px;
  position: relative;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  z-index: 999;
}

.site-title {
  font-size: 26px;
  font-weight: 300;
  line-height: 54px;
  letter-spacing: -1px;
  margin-bottom: 0;
  float: left;
}
.site-title, .site-title:visited {
  color: #cfcdc8;
}

.site-nav {
  float: right;
  line-height: 54px;
}
.site-nav .nav-trigger {
  display: none;
}
.site-nav .menu-icon {
  display: none;
}
.site-nav .page-link {
  color: #e8e6e3;
  line-height: 1.5;
}
.site-nav .page-link:not(:last-child) {
  margin-right: 20px;
}
@media screen and (max-width: 600px) {
  .site-nav {
    position: absolute;
    top: 9px;
    right: 15px;
    background-color: #181a1b;
    border: 1px solid #2c2c2a;
    border-radius: 5px;
    text-align: right;
  }
  .site-nav label[for=nav-trigger] {
    display: block;
    float: right;
    width: 36px;
    height: 36px;
    z-index: 2;
    cursor: pointer;
  }
  .site-nav .menu-icon {
    display: block;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;
  }
  .site-nav .menu-icon > svg path {
    fill: #cfcdc8;
  }
  .site-nav input ~ .trigger {
    clear: both;
    display: none;
  }
  .site-nav input:checked ~ .trigger {
    display: block;
    padding-bottom: 5px;
  }
  .site-nav .page-link {
    display: block;
    padding: 5px 10px;
  }
  .site-nav .page-link:not(:last-child) {
    margin-right: 0;
  }
  .site-nav .page-link {
    margin-left: 20px;
  }
}

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid #2c2c2a;
  padding-top: 30px;
}

.footer-heading {
  font-size: 18px;
  margin-bottom: 15px;
}

.contact-list,
.social-media-list {
  list-style: none;
  margin-left: 0;
}

.footer-col-wrapper {
  font-size: 15px;
  color: #9a9a93;
  margin-left: -15px;
}

.footer-col {
  float: left;
  margin-bottom: 15px;
  padding-left: 15px;
}

.footer-col-1 {
  width: -webkit-calc(33% - (30px / 2));
  width: calc(33% - 30px / 2);
}

.footer-col-2 {
  width: -webkit-calc(33% - (30px / 2));
  width: calc(33% - 30px / 2);
}

.footer-col-3 {
  width: -webkit-calc(33% - (30px / 2));
  width: calc(33% - 30px / 2);
}

@media screen and (max-width: 800px) {
  .footer-col-1 {
    width: -webkit-calc(40% - (30px / 2));
    width: calc(40% - 30px / 2);
  }
  .footer-col-2,
  .footer-col-3 {
    width: -webkit-calc(30% - (30px / 2));
    width: calc(30% - 30px / 2);
  }
}
@media screen and (max-width: 600px) {
  .footer-col {
    float: none;
    width: -webkit-calc(100% - (30px / 2));
    width: calc(100% - 30px / 2);
  }
}
/**
 * Page content
 */
.page-content {
  padding: 30px 0;
  margin-top: 3.5em;
}

.page-heading {
  font-size: 32px;
}

.post-list-heading {
  font-size: 28px;
}

.post-list {
  margin-left: 0;
  list-style: none;
}
.post-list > li {
  margin-bottom: 30px;
}

.post-meta {
  font-size: 14px;
  color: #9a9a93;
}

.post-link {
  display: block;
  font-size: 24px;
}

/**
 * Posts
 */
.post-header {
  margin-bottom: 30px;
}

.post-title {
  font-size: 42px;
  letter-spacing: -1px;
  line-height: 1;
}
@media screen and (max-width: 800px) {
  .post-title {
    font-size: 36px;
  }
}

.post-content {
  margin-bottom: 30px;
}
.post-content h1 {
  font-size: 30.4px;
}
@media screen and (max-width: 800px) {
  .post-content h1 {
    font-size: 26.4px;
  }
}
.post-content h2 {
  font-size: 24px;
}
@media screen and (max-width: 800px) {
  .post-content h2 {
    font-size: 19.2px;
  }
}
.post-content h3 {
  font-size: 17.6px;
}
@media screen and (max-width: 800px) {
  .post-content h3 {
    font-size: 16px;
  }
}
.post-content {
  /*
  h2 {
    @include relative-font-size(2);

    @include media-query($on-laptop) {
      @include relative-font-size(1.75);
    }
  }

  h3 {
    @include relative-font-size(1.625);

    @include media-query($on-laptop) {
      @include relative-font-size(1.375);
    }
  }

  h4 {
    @include relative-font-size(1.25);

    @include media-query($on-laptop) {
      @include relative-font-size(1.125);
    }
  }
  */
}

/**
 * Syntax highlighting styles
 */
.highlight {
  background: #fff;
}
.highlighter-rouge .highlight {
  background: #eef;
}
.highlight .c {
  color: #998;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .k {
  font-weight: bold;
}
.highlight .o {
  font-weight: bold;
}
.highlight .cm {
  color: #998;
  font-style: italic;
}
.highlight .cp {
  color: #999;
  font-weight: bold;
}
.highlight .c1 {
  color: #998;
  font-style: italic;
}
.highlight .cs {
  color: #999;
  font-weight: bold;
  font-style: italic;
}
.highlight .gd {
  color: #000;
  background-color: #fdd;
}
.highlight .gd .x {
  color: #000;
  background-color: #faa;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gr {
  color: #a00;
}
.highlight .gh {
  color: #999;
}
.highlight .gi {
  color: #000;
  background-color: #dfd;
}
.highlight .gi .x {
  color: #000;
  background-color: #afa;
}
.highlight .go {
  color: #888;
}
.highlight .gp {
  color: #555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaa;
}
.highlight .gt {
  color: #a00;
}
.highlight .kc {
  font-weight: bold;
}
.highlight .kd {
  font-weight: bold;
}
.highlight .kp {
  font-weight: bold;
}
.highlight .kr {
  font-weight: bold;
}
.highlight .kt {
  color: #458;
  font-weight: bold;
}
.highlight .m {
  color: #099;
}
.highlight .s {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #458;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #900;
  font-weight: bold;
}
.highlight .nf {
  color: #900;
  font-weight: bold;
}
.highlight .nn {
  color: #555;
}
.highlight .nt {
  color: #000080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  font-weight: bold;
}
.highlight .w {
  color: #bbb;
}
.highlight .mf {
  color: #099;
}
.highlight .mh {
  color: #099;
}
.highlight .mi {
  color: #099;
}
.highlight .mo {
  color: #099;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .bp {
  color: #999;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .il {
  color: #099;
}

:root {
  --bg: #181a1b; /* darkSchemeBackgroundColor */
  --text: #e8e6e3; /* darkSchemeTextColor */
  --muted: #9a9a93;
  --accent: #8db6e0;
  --line: #2c2c2a;
}

a {
  color: #2a7ae2;
}

a:visited {
  color: #2a7ae2;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-header {
  background-color: var(--bg);
}

pre, code {
  background-color: #22252a;
  border-color: var(--line);
}

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