@charset "UTF-8";
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-hpyerlegible-next/AtkinsonHyperlegibleNextVF-Variable.ttf") format("truetype"), url("../assets/fonts/atkinson-hpyerlegible-next/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2");
}
:root {
  --font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-family-serif: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
  --font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-weight: normal;
  --font-size: 16px;
  --color-text: #2a2a28;
  --color-text-light: #6b6b68;
  --color-text-dark: #2a2a28;
  --color-background: #e8e0d5;
  --color-background-dark: #d8d0c5;
  --color-background-darker: #a69f95;
  --color-background-darkest: #6b6b68;
  --color-background-darker-est: #2a2a28;
  --color-orange: hsl(23deg 40% 39%);
  --color-link: #214569;
  --color-link-visited: #39526a;
  --color-link-hover: #15304c;
  --color-text-on-dark: #ffffff;
  --border-radius: 1rem;
  --site-max-width: 900px;
  --site-padding-inline: min(4rem, 5%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums stacked-fractions; /* tabular-nums; */
  font-feature-settings: "salt", "liga", "rlig";
  text-underline-offset: 0.125em;
  text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  color: var(--color-link-hover);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--color-text);
  line-height: 1.5rem;
  background-color: var(--color-background-dark);
}

body > header,
body > main,
body > footer {
  margin: 0;
  background-color: var(--color-background);
}
body > header > div > section, body > header > div > div, body > header > article > section, body > header > article > div,
body > main > div > section,
body > main > div > div,
body > main > article > section,
body > main > article > div,
body > footer > div > section,
body > footer > div > div,
body > footer > article > section,
body > footer > article > div {
  padding-block: 1rem;
  padding-inline: var(--site-padding-inline);
  margin-inline: auto;
  max-width: var(--site-max-width);
}
body > header > div > section.wide, body > header > div > div.wide, body > header > article > section.wide, body > header > article > div.wide,
body > main > div > section.wide,
body > main > div > div.wide,
body > main > article > section.wide,
body > main > article > div.wide,
body > footer > div > section.wide,
body > footer > div > div.wide,
body > footer > article > section.wide,
body > footer > article > div.wide {
  padding-inline: 0;
}
body > header > div > section.full, body > header > div > div.full, body > header > article > section.full, body > header > article > div.full,
body > main > div > section.full,
body > main > div > div.full,
body > main > article > section.full,
body > main > article > div.full,
body > footer > div > section.full,
body > footer > div > div.full,
body > footer > article > section.full,
body > footer > article > div.full {
  padding-inline: 0;
  margin-inline: 0;
  max-width: 100%;
}

body > main > div, body > main > article {
  padding-block: 2rem 4rem;
}
@media (max-width: 450px) {
  body > main > div, body > main > article {
    padding-top: 0;
  }
}
body > main img {
  max-width: 100%;
}

body > header a,
body > footer a {
  color: inherit;
}
body > header a:visited,
body > footer a:visited {
  color: inherit;
}
body > header a:hover,
body > footer a:hover {
  color: inherit;
}

body > header {
  color: var(--color-text-dark);
  padding-block: 0;
  border-bottom: 2px solid black;
}
body > header > div > div {
  padding-block: 0 !important;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
body > header > div > div h1 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 2rem;
  margin-bottom: 0;
}
body > header > div > div nav {
  font-size: 1.25rem;
}

body > footer {
  border-top: 2px solid black;
}
body > footer .colophon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3rem;
}
body > footer .colophon > div {
  flex-basis: 50%;
}
body > footer .colophon .wheres-wookiee {
  text-align: right;
}
body > footer .colophon .wheres-wookiee ul {
  list-style-type: none;
}
body > footer .minutia {
  background-color: var(--color-background-dark);
  padding-inline: var(--site-padding-inline) !important;
  border-top: 1px solid black;
  text-align: center;
  padding-top: 1rem;
  line-height: 1.125rem;
}
body > footer .minutia p {
  font-size: 0.8rem;
  margin: 0;
}
body > footer .minutia a {
  text-decoration: underline;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

code:not([class*=language-]) {
  background: var(--color-background-dark);
  border-radius: 0.125em;
  padding: 0.125em 0.25em;
  margin: -0.125em 0;
  font-size: 0.9em;
  font-family: var(--font-family-monospace);
}

.footnotes-sep {
  margin-top: 3rem;
  border-width: 0 0 1px 0;
  border-color: var(--color-background-darker);
}

.alert {
  padding: 0 1rem;
  margin-block: 3rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: var(--color-background-dark);
  border-color: var(--color-background-darker);
}
.alert.warning {
  background-color: rgba(242, 182, 50, 0.14);
  border-color: #c9b89a;
  color: #2a2a28;
}
.alert.info {
  background-color: rgba(91, 122, 142, 0.12);
  border-color: #5b7a8e;
  color: #5b7a8e;
}

.home main * {
  line-height: 1.4;
}
.home main h1 {
  font-size: 2rem;
}
.home main h2 {
  font-size: 1.75rem;
  font-weight: 600;
}
.home main .hl {
  color: var(--color-orange);
  font-weight: 900;
}
.home main .emoji {
  margin-right: 0.1rem;
}

a.lightbox {
  display: flex;
  margin-block: 1rem;
  cursor: zoom-in;
}
a.lightbox.wide {
  margin-inline: calc(-1 * min(4rem, 3%));
}
a.lightbox picture {
  width: 100%;
}
a.lightbox picture img {
  border-radius: 0.25rem;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  width: 100%;
  margin-block: 0 !important;
}

dialog.lightbox {
  max-width: calc(100vw - 1rem);
  max-height: calc(100svh - 1rem);
  padding: 0;
  border: 1px solid #555;
  box-shadow: 0.1rem 0.1rem 0.5rem rgb(0, 0, 0);
  overflow: hidden;
  border-radius: 0.25rem;
  cursor: zoom-out;
  transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
  animation: close 0.5s forwards;
}
dialog.lightbox[open] {
  animation: open 0.5s forwards;
}
dialog.lightbox form {
  margin: 0;
  padding: 0;
  line-height: 0;
}
dialog.lightbox img {
  margin: 0;
  padding: 0;
  height: 100%;
  max-height: calc(100svh - 2rem);
  max-width: calc(100vw - 2rem);
}

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
::backdrop {
  padding: 0;
  background-color: rgba(0, 0, 0, 0.85);
}

/* prevent scroll with lightbox open */
:root:has(.lightbox[open]) {
  overflow: clip;
}

.projects section + section {
  margin-top: 6rem;
}
.projects section + section.active-projects {
  margin-top: 3rem;
}
.projects .card * {
  font-family: var(--font-family);
}
.projects .card h3 a {
  text-decoration: none;
}
.projects .card h3 a:hover {
  text-decoration: underline;
}
.projects .card a.chevron {
  font-weight: 600;
  display: inline-block;
  height: 2rem;
  background-color: var(--color-background-darker);
  border-radius: 1rem;
  padding: 1rem;
  line-height: 0.25;
  text-decoration: none;
}
.projects .card a.chevron:hover {
  background-color: var(--color-background-darker-est);
  color: var(--color-text-on-dark);
}
.projects .card.quizstreak {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.projects .card.quizstreak svg {
  height: 200px;
}
@media (max-width: 600px) {
  .projects .card.quizstreak {
    display: block;
  }
  .projects .card.quizstreak svg {
    float: left;
    height: 125px;
    margin-right: 2rem;
  }
}
.projects .card.quizstreak:hover svg .d-line {
  stroke: var(--color-text-on-dark);
}
.projects .card.quizstreak:hover svg .d-fill {
  fill: var(--color-text-on-dark);
}
.projects .card.sp svg {
  float: right;
  width: 125px;
  height: 125px;
  margin-left: 2rem;
  margin-bottom: 1rem;
}
.projects .card.sp:hover svg .a {
  fill: var(--color-background-darker-est);
}
.projects .card.sp:hover svg .b {
  fill: var(--color-background);
}
.projects .card.cowsay svg {
  display: block;
  float: left;
  width: 126px;
  height: 175px;
  margin-right: 2rem;
  margin-bottom: 1rem;
  shape-outside: polygon(0% 0%, 74% 0%, 76% 2%, 78% 3%, 80% 5%, 81% 7%, 27% 8%, 0% 10%, 61% 18%, 23% 23%, 71% 25%, 87% 26%, 88% 28%, 89% 29%, 90% 31%, 91% 33%, 93% 34%, 94% 36%, 95% 38%, 96% 39%, 97% 41%, 98% 43%, 99% 44%, 100% 46%, 0% 49%, 71% 52%, 72% 54%, 73% 56%, 74% 57%, 74% 59%, 74% 61%, 74% 62%, 74% 64%, 74% 65%, 74% 67%, 74% 69%, 73% 70%, 72% 72%, 71% 74%, 61% 75%, 61% 77%, 0% 79%, 13% 80%, 38% 82%, 38% 97%, 37% 98%, 35% 99%, 0% 100%);
  shape-margin: 0.75rem;
}
.projects .card.cowsay:hover svg .aa {
  fill: var(--color-background) !important;
}
.projects .card.tfg svg {
  display: block;
  float: left;
  width: 125px;
  height: 188px;
  margin-right: 2rem;
  margin-bottom: 1rem;
  shape-outside: polygon(0% 0%, 78% 2%, 77% 5%, 91% 7%, 91% 10%, 86% 12%, 88% 15%, 91% 17%, 85% 20%, 88% 22%, 88% 25%, 88% 27%, 94% 30%, 96% 32%, 94% 35%, 90% 37%, 85% 40%, 78% 42%, 67% 45%, 65% 47%, 65% 50%, 76% 52%, 73% 55%, 76% 57%, 84% 60%, 82% 62%, 75% 65%, 74% 67%, 66% 70%, 52% 72%, 53% 75%, 54% 77%, 51% 80%, 51% 82%, 51% 85%, 56% 87%, 58% 90%, 49% 92%, 45% 95%, 46% 97%, 0% 100%);
  shape-margin: 0.75rem;
}
@media (max-width: 600px) {
  .projects .card.tfg svg {
    width: 99px;
    height: 150px;
  }
}
.projects .card.pe img {
  float: right;
  width: 200px;
  height: 200px;
  margin-left: 2rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}
.projects .card.pe:hover img {
  opacity: 0.9;
}
@media (max-width: 600px) {
  .projects .card.pe img {
    width: 150px;
    height: 150px;
  }
}
.projects .projects-list {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "one one" "two three" "two four" "five five" "six seven" "eight eight";
}
@media (max-width: 600px) {
  .projects .projects-list {
    grid-template-columns: 1fr;
    grid-template-areas: "one" "two" "three" "four" "five" "six" "seven" "eight";
  }
}
.projects .projects-list > :nth-child(1) {
  grid-area: one;
}
.projects .projects-list > :nth-child(2) {
  grid-area: two;
}
.projects .projects-list > :nth-child(3) {
  grid-area: three;
}
.projects .projects-list > :nth-child(4) {
  grid-area: four;
}
.projects .projects-list > :nth-child(5) {
  grid-area: five;
}
.projects .projects-list > :nth-child(6) {
  grid-area: six;
}
.projects .projects-list > :nth-child(7) {
  grid-area: seven;
}
.projects .projects-list > :nth-child(8) {
  grid-area: eight;
}

.blog .rss-feed {
  font-weight: normal;
}
.blog .rss-feed svg {
  width: 16px;
  height: 16px;
}
.blog .post-nav {
  border-top: 1px solid var(--color-background-darker);
  padding-block-start: 2rem;
  padding-block-end: 0;
}
.blog .post-nav nav ul {
  padding-inline: var(--site-padding-inline);
  margin-inline: auto;
  max-width: var(--site-max-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.blog .post-nav nav ul li {
  font-weight: normal;
}
.blog .post-nav nav ul li:has([rel=prev]) {
  grid-column: 1;
  justify-self: flex-start;
}
.blog .post-nav nav ul li:has([rel=next]) {
  justify-self: flex-end;
  grid-column: 2;
  text-align: right;
}
.blog .post-nav nav ul li a {
  display: flex;
  flex-direction: row;
  line-height: 1.2;
  gap: 1rem;
}
.blog .post-nav nav ul li a div:has(.nav-txt) {
  display: flex;
  flex-direction: column;
}
.blog .post-nav nav ul li a .nav-txt,
.blog .post-nav nav ul li a .arr {
  color: var(--color-text);
}
.blog .post-nav nav ul li a .nav-txt {
  font-weight: 600;
}
.blog .post-nav nav ul li a .arr {
  background: var(--color-background-dark);
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
}
.blog .post-nav nav ul li a:hover {
  text-decoration: none;
}
.blog .post-nav nav ul li a:hover .nav-link-txt {
  text-decoration: underline;
}
.blog .post-nav nav ul li a:hover .arr {
  background: var(--color-background-darkest);
  color: var(--color-text-on-dark);
}
@media (max-width: 600px) {
  .blog .post-nav nav ul {
    grid-template-columns: 1fr;
  }
  .blog .post-nav nav ul li:has([rel=next]) {
    justify-self: flex-end;
    grid-column: 1;
    text-align: right;
  }
}
.blog .archives-list {
  display: flex;
  flex-direction: row-reverse;
  flex-basis: 60% 30%;
  gap: 2rem;
}
@media (max-width: 600px) {
  .blog .archives-list {
    flex-direction: column-reverse;
  }
}
.blog .archives-list aside {
  flex-grow: 0;
}
.blog .archives-list aside h3 {
  margin-bottom: 0.5rem;
}
.blog .archives-list aside .search h3 {
  margin-top: 0;
}
.blog .archives-list aside .search form {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}
.blog .archives-list aside .search form input[type=search] {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-background-darkest);
  background-color: #f2ece3;
}
.blog .archives-list aside .categories {
  flex-shrink: 0;
}
.blog .archives-list aside .categories div {
  position: sticky;
  top: 1rem;
}
.blog .archives-list aside .categories div ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog .archives-list aside .categories div ul li {
  padding-bottom: 0.5rem;
}
.blog .archives-list aside .categories div button {
  cursor: pointer;
  border: none;
  background: none;
}
.blog .archives-list aside .categories div button:hover {
  text-decoration: underline;
}
.blog .archives-list aside .categories div input[type=checkbox] {
  position: absolute;
  left: -9999px;
}
.blog .archives-list aside .categories div label {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0.9em;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-background-darker);
  background-color: var(--color-background-dark);
  border-radius: 0.25rem;
  box-shadow: 1px 1px 7px inset rgba(42, 42, 40, 0.01);
}
.blog .archives-list aside .categories div label:hover {
  color: var(--color-text-on-dark);
  border-color: var(--color-background-darkest);
  background-color: var(--color-background-darker);
}
.blog .archives-list aside .categories div input:is(:checked) + label {
  color: var(--color-text-on-dark);
  border-color: var(--color-background-darker-est);
  background-color: var(--color-background-darkest);
}
.blog .archives-list .posts {
  flex-grow: 1;
}
.blog .archives-list .posts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog .archives-list .posts ul li {
  margin-bottom: 0.5rem;
}
.blog .archives-list .posts ul li:is([hidden]) {
  display: none;
}
.blog .archives-list .posts ul .card {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0;
  text-decoration: none;
}
.blog .archives-list .posts ul .card > :nth-child(1) {
  width: 10ch !important;
  font-weight: bold;
  padding: 0.5rem 0.75rem;
  color: var(--color-text-on-dark);
  background-color: var(--color-background-darker);
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-background);
}
.blog .archives-list .posts ul .card > :nth-child(1) .day,
.blog .archives-list .posts ul .card > :nth-child(1) .month {
  font-size: 1.1rem;
}
.blog .archives-list .posts ul .card > :nth-child(1) .year {
  font-weight: 900;
}
.blog .archives-list .posts ul .card > :nth-child(2) {
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
}
.blog .archives-list .posts ul .card > :nth-child(2) h3 {
  font-size: 1.25rem;
  margin-bottom: 0;
}
.blog .archives-list .posts ul .card > :nth-child(2) p {
  margin-top: 0;
}
.blog .archives-list .posts ul .card > :nth-child(2) .meta {
  color: var(--color-background-darkest);
  font-size: 0.9rem;
}
.blog .archives-list .posts ul .card:hover > :nth-child(1) {
  background-color: var(--color-background-darker-est);
}
.blog .archives-list .posts ul .card:hover > :nth-child(2) .meta {
  color: var(--color-background);
}

.photography .masonry {
  margin-top: 2rem;
}
.photography nav .tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 450px) {
  .photography nav .tabs {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .photography nav .tabs li {
    width: 100%;
  }
}
.photography nav .tabs li:first-child {
  font-size: 1.25rem;
  text-transform: uppercase;
}
.photography nav .tabs .tab {
  text-decoration: none !important;
}
.photography nav .tabs .tab a {
  display: inline-block;
  width: 100%;
  background: var(--color-background-darker);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem 0.3rem 0.75rem;
  color: var(--color-text-on-dark);
}
.photography nav .tabs .tab:hover a {
  background: var(--color-background-darker-est);
  text-decoration: none;
}
.photography nav .tabs .tab.current a {
  background: var(--color-background-darkest);
}

/*
Birren Industrial Prism theme — recolor of
https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-dark.css
Selectors preserved; color values only.
*/
code[class*=language-],
pre[class*=language-] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  color: #e8e0d5;
  background: #2a2a28;
  font-family: Roboto Mono, monospace;
  font-size: 1em;
  line-height: 1.5em;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

code[class*=language-]::-moz-selection,
pre[class*=language-]::-moz-selection,
code[class*=language-] ::-moz-selection,
pre[class*=language-] ::-moz-selection {
  background: rgba(127, 181, 160, 0.2);
}

code[class*=language-]::selection,
pre[class*=language-]::selection,
code[class*=language-] ::selection,
pre[class*=language-] ::selection {
  background: rgba(127, 181, 160, 0.2);
}

:not(pre) > code[class*=language-] {
  white-space: normal;
  border-radius: 0.2em;
  padding: 0.1em;
}

pre[class*=language-] {
  overflow: auto;
  position: relative;
  margin: 0.5em 0;
  padding: 1.25em 1em;
}

.language-css > code,
.language-sass > code,
.language-scss > code {
  color: #d67d3e;
}

[class*=language-] .namespace {
  opacity: 0.7;
}

.token.atrule {
  color: #d67d3e;
}

.token.attr-name {
  color: #8b5a3c;
}

.token.attr-value {
  color: #7fb5a0;
}

.token.attribute {
  color: #7fb5a0;
}

.token.boolean {
  color: #c83e3a;
}

.token.builtin {
  color: #f2b632;
}

.token.cdata {
  color: #7fb5a0;
}

.token.char {
  color: #7fb5a0;
}

.token.class {
  color: #f2b632;
}

.token.class-name {
  color: #f2b632;
}

.token.comment {
  color: #5b7a8e;
}

.token.constant {
  color: #c83e3a;
}

.token.deleted {
  color: #c83e3a;
}

.token.doctype {
  color: #5b7a8e;
}

.token.entity {
  color: #c83e3a;
}

.token.function {
  color: #f2b632;
}

.token.hexcode {
  color: #c83e3a;
}

.token.id {
  color: #d67d3e;
  font-weight: bold;
}

.token.important {
  color: #d67d3e;
  font-weight: bold;
}

.token.inserted {
  color: #7fb5a0;
}

.token.keyword {
  color: #d67d3e;
}

.token.number {
  color: #c83e3a;
}

.token.operator {
  color: #a69f95;
}

.token.prolog {
  color: #5b7a8e;
}

.token.property {
  color: #7fb5a0;
}

.token.pseudo-class {
  color: #d67d3e;
}

.token.pseudo-element {
  color: #d67d3e;
}

.token.punctuation {
  color: #a69f95;
}

.token.regex {
  color: #7fb5a0;
}

.token.selector {
  color: #d67d3e;
}

.token.string {
  color: #7fb5a0;
}

.token.symbol {
  color: #c83e3a;
}

.token.tag {
  color: #d67d3e;
}

.token.unit {
  color: #c83e3a;
}

.token.url {
  color: #c83e3a;
}

.token.variable {
  color: #c83e3a;
}

body main {
  font-size: 1.05rem;
}

.icons-sprite {
  display: block;
  width: 0;
  height: 0;
}

picture img {
  max-width: 100%;
}
picture.full img {
  width: 100%;
}

.alignright {
  float: right;
  margin: 0 0 0 2rem;
}

.postmeta p {
  font-size: 0.95rem;
  margin-block: 2rem;
}

hr {
  border: 1px solid var(--color-background-darker);
  border-width: 0 0 1px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  color: var(--color-text-dark);
  line-height: 1.25;
  margin-block: 2.5rem 1rem;
}

h1 {
  font-weight: 900;
  font-size: 2.25rem;
}

h2 {
  font-weight: 900;
  font-size: 1.9rem;
}

footer h2 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

small {
  font-size: 0.825rem;
}

del {
  color: var(--color-background-darker) !important;
  text-decoration: line-through;
  text-decoration-color: var(--color-background-darkest);
}

h2 del {
  color: #6b6b68 !important;
}

.card p del {
  color: #414141 !important;
}

.home .card h2 {
  font-size: 1.75rem;
  font-weight: 700;
}

h2 + .postmeta {
  margin-top: -2rem;
}

header h1 a {
  font-size: 2.25rem;
  text-decoration: none;
}

.masonry {
  columns: 3 auto;
  column-gap: 0.5rem;
}
@media (max-width: 600px) {
  .masonry {
    columns: 2 auto;
  }
}
.masonry a.lightbox {
  margin-block: 0;
  margin-block-end: 0.125rem;
  margin-inline: 0;
}
.masonry a.lightbox img {
  border: none;
}
.masonry a.wide {
  margin-inline: 0;
  margin-block: 0;
}

article pre[class*=language-] {
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: var(--font-family-monospace);
  line-height: 1.25rem;
}
article pre[class*=language-] * {
  font-variant-ligatures: initial;
  font-variant-numeric: initial;
  font-feature-settings: initial;
}
article pre[class*=language-] .token.comment {
  font-style: italic;
  color: #5b7a8e;
}
article .entry-content picture img {
  margin-block: 1rem;
}
article .entry-content picture + picture img,
article .entry-content .lightbox + .lightbox img {
  margin-top: 0;
}
article .entry-content s {
  color: var(--color-background-darker);
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  gap: 1rem;
  padding: 0;
  line-height: 1;
}
nav ul li {
  margin: 0;
  padding: 0;
  font-weight: 700;
}
nav ul li.active, nav ul li.current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-background-darker);
}
nav ul li a {
  text-decoration-line: none;
  text-decoration-thickness: 2px;
}
nav ul li a:hover {
  text-decoration-line: underline;
}
@media (max-width: 600px) {
  nav ul {
    gap: 0.5rem;
    flex-direction: column;
  }
}

@media (max-width: 450px) {
  header > div > div {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
  header > div > div ul {
    flex-direction: row;
    margin-top: 0.25rem;
  }
}
.card {
  overflow: hidden;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-background-dark);
}
.card *,
.card a:visited:not(:hover) {
  color: var(--color-text-dark);
}
.card h2,
.card h3,
.card h4 {
  margin-top: 0;
}
.card p:last-child {
  margin-bottom: 0;
}
.card:hover {
  background-color: var(--color-background-darkest);
}
.card:hover *,
.card:hover a:visited {
  color: var(--color-text-on-dark);
}

.wheres-wookiee ul li svg {
  margin-left: 0.25rem;
  vertical-align: text-top;
}
.wheres-wookiee ul li a {
  text-decoration: none;
}
.wheres-wookiee ul li a:hover {
  text-decoration: underline;
}

sup,
sub {
  font-size: 0.7em;
}

.frac-sep {
  font-weight: 300;
}

.error {
  text-align: center;
}
.error h1 {
  font-size: 8rem;
  margin-block: 1rem;
}

.yt-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.yt-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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