@font-face {
  font-family: "Fira Code";
  src: url("woff2/FiraCode-Light.woff2") format("woff2"), url("woff/FiraCode-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Fira Code";
  src: url("woff2/FiraCode-Regular.woff2") format("woff2"), url("woff/FiraCode-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Fira Code";
  src: url("woff2/FiraCode-Medium.woff2") format("woff2"), url("woff/FiraCode-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Fira Code";
  src: url("woff2/FiraCode-SemiBold.woff2") format("woff2"), url("woff/FiraCode-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Fira Code";
  src: url("woff2/FiraCode-Bold.woff2") format("woff2"), url("woff/FiraCode-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Fira Code VF";
  src: url("woff2/FiraCode-VF.woff2") format("woff2-variations"), url("woff/FiraCode-VF.woff") format("woff-variations");
  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
  font-weight: 300 700;
  font-style: normal;
}
html {
  overflow-x: hidden;
}

body {
  border: 0;
  padding: 3vw;
  margin: 0;
  overflow-x: hidden;
  background-color: #303446;
  color: #c6d0f5;
  font-family: "Fira Code", monospace;
  font-weight: 400;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
}

ul {
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

ul.navigation {
  column-count: 3;
}

ul.navigation li {
  margin-bottom: 4px;
}

hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: 0;
  border-bottom: 2px solid #51576d;
}

.navigation a {
  color: #c6d0f5;
  display: block;
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.navigation a:hover {
  background-color: #c6d0f5;
  color: #303446;
  text-decoration: none;
}
.navigation a.active {
  background-color: #c6d0f5;
  color: #303446;
  text-decoration: none;
}

footer {
  font-size: 0.7rem;
  line-height: 1.6em;
}
footer .footer-copyright {
  margin-bottom: 15px;
}
footer a {
  color: #c6d0f5;
  padding-bottom: 3px;
  padding-top: 3px;
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
footer a:hover {
  background-color: #c6d0f5;
  color: #303446;
  text-decoration: none;
}

img {
  vertical-align: middle;
}

.site-wrapper {
  max-width: 720px;
}

.post-meta {
  font-size: 0.9rem;
}

.page-header {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.page-header h1 {
  margin-top: 0;
  margin-bottom: 0;
}
.page-header {
  display: flex;
  justify-content: space-between;
}

.rss-link {
  /* display: block; */
}

.site-main {
  /* font-size: 0.95rem; */
}
.site-main a {
  color: #c6d0f5;
  padding-bottom: 2px;
  padding-top: 2px;
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.site-main a:hover {
  background-color: #c6d0f5;
  color: #303446;
  text-decoration: none;
}
.site-main ul {
  padding: 0;
  border: 0;
  margin: 0px;
  list-style: square;
  padding-left: 1rem;
}
.site-main li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.site-main .microblog-container {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.site-main .microblog-container li {
  /* border: 2px solid $surface1; */
  /* padding: 4px 8px; */
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.site-main .microblog-container .microblog-entry-header {
  font-size: 0.8rem;
}
.site-main .microblog-container .microblog-entry-header span {
  background-color: #c6d0f5;
  color: #303446;
  padding: 0px 2px;
  font-weight: 600;
}
.site-main .microblog-container img {
  height: 150px;
  width: auto;
  margin-left: 1rem;
  margin-right: 1rem;
}
.site-main .microblog-container .microblog-gallery-container {
  display: flex;
}
.site-main .microblog-container .microblog-gallery-container img {
  margin-left: 0;
  margin-right: 0;
  height: 200px;
}
.site-main .microblog-container .microblog-gallery-container .microblog-gallery-image {
  margin-left: 1rem;
}
.site-main .microblog-container .microblog-gallery-container a:hover img {
  outline: 2px solid #c6d0f5;
}

ul.changelog-entry-container {
  padding-left: 0;
}
ul.changelog-entry-container .changelog-entry {
  list-style: none;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
ul.changelog-entry-container .changelog-entry-body li {
  margin-top: 0;
  margin-bottom: 0;
}
ul.changelog-entry-container .changelog-entry-header {
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
ul.changelog-entry-container .changelog-entry-header span {
  background-color: #c6d0f5;
  color: #303446;
  padding: 0px 2px;
  font-weight: 600;
}
ul.changelog-entry-container .changelog-image-container {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
}
ul.changelog-entry-container .changelog-image-container p {
  margin: 0;
}
ul.changelog-entry-container .changelog-image-container img {
  height: 150px;
  width: auto;
  margin-left: 1rem;
  margin-right: 1rem;
}

.site-main .article-container {
  list-style: none;
  padding-left: 0;
}
.site-main .article-entry {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.site-main .article-header {
  margin-bottom: 0.5rem;
}
.site-main .article-title {
  font-size: 1.2rem;
}
.site-main a .article-title {
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.site-main a:hover .article-title {
  background-color: #c6d0f5;
  color: #303446;
  text-decoration: none;
}
.site-main .article-date {
  margin-top: 5px;
  float: right;
  font-size: 0.7rem;
  color: #c6d0f5;
}
.site-main .article-entry a {
  text-decoration: none;
}
.site-main .article-short {
  color: #c6d0f5;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.site-main .article-cover {
  filter: grayscale(80%) contrast(1.1);
  transition: all 0.25s linear;
}
.site-main a:hover .article-cover {
  filter: grayscale(0%);
  transition: all 0.5s linear;
}

.note-key {
  background-color: #c6d0f5;
  color: #303446;
  padding: 0px 2px;
  font-weight: 600;
}

.link {
  border: 2px solid #c6d0f5;
  padding: 2px 4px;
}

.book-cover-container {
  flex: 0 0 150px;
  display: flex;
  justify-content: center;
}

.book-cover {
  height: 150px;
  width: auto;
}

.book-info {
  text-align: center;
  width: 100%;
}

.book-entry {
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
}
.book-entry p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.book-list {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.book-title {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.book-language {
  font-size: 0.9rem;
}

figure {
  padding: 0;
  margin: 0;
  border: 0;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.2rem;
  font-weight: 400;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

h2 {
  font-size: 1.9rem;
  font-weight: 400;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

h4 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

img {
  width: 100%;
}

a:hover img.clickable-image {
  outline: 2px solid #c6d0f5;
}

.post-intro {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.post-intro a {
  text-underline-offset: 5px;
}

.post-body pre {
  padding: 4px 8px;
  padding-top: 5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  line-height: 1.3;
}
.post-body code {
  background-color: #292c3c;
  padding: 0px 2px;
  font-family: "Fira Code", monospace;
  font-style: italic;
}
.post-body strong {
  background-color: #c6d0f5;
  color: #303446;
  font-weight: 600;
  padding: 0px 2px;
}

ul.place-container {
  padding-left: 0;
  list-style: none;
}

li.place-entry {
  margin-bottom: 2rem;
}

.place-entry-header {
  display: flex;
  justify-content: space-between;
}

.place-entry-name {
  font-weight: 600;
}
.place-entry-name a {
  text-underline-offset: 5px;
}

.place-entry-address {
  font-size: 0.9rem;
}

.place-entry-comment {
  margin-top: 1rem;
}

.place-entry-date {
  text-align: right;
  font-size: 0.8rem;
}

ul.notes-container {
  list-style: none;
  padding-left: 0;
}

.site-main .notes-container li {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.site-main .notes-container a.note-title {
  text-underline-offset: 6px;
}
.site-main .notes-container .note-title {
  font-size: 1.2rem;
}
.site-main .notes-container .note-date {
  margin-top: 5px;
  float: right;
  font-size: 0.7rem;
  color: #c6d0f5;
}