@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: #414141;
  --color-text-light: #808080;
  --color-text-dark: #000;
  --color-background: #e0e5dc;
  --color-background-dark: #cfd4cb;
  --color-background-darker: #9ea49a;
  --color-background-darkest: #6d7269;
  --color-background-darker-est: #444940;
  --color-orange: hsl(23deg 87% 63%);
  --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;
  }
}
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 {
  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: #fcf8e3;
  border-color: #d9d1a9;
}
.alert.info {
  background-color: #d9edf7;
  border-color: #8fadbb;
}

.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);
}
.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: #fff;
}
.projects .card.quizstreak:hover svg .d-fill {
  fill: #fff;
}
.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 {
  float: left;
  height: 175px;
  margin-right: 2rem;
  margin-bottom: 1rem;
}
.projects .card.cowsay:hover svg .aa {
  fill: var(--color-background) !important;
}
.projects .card.tfg {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.projects .card.tfg svg {
  width: 125px;
}
@media (max-width: 600px) {
  .projects .card.tfg {
    display: block;
  }
  .projects .card.tfg svg {
    float: left;
    height: 150px;
    margin-right: 2rem;
  }
}
.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: white;
}
@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: #fff;
}
.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(0, 0, 0, 0.01);
}
.blog .archives-list aside .categories div label:hover {
  color: #fff;
  border-color: var(--color-background-darkest);
  background-color: var(--color-background-darker);
}
.blog .archives-list aside .categories div input:is(:checked) + label {
  color: #fff;
  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: #fff;
  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: white;
}
.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);
}

/*
Source: https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-dark.css
*/
code[class*=language-],
pre[class*=language-] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  color: #eee;
  background: #2f2f2f;
  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: #363636;
}

code[class*=language-]::selection,
pre[class*=language-]::selection,
code[class*=language-] ::selection,
pre[class*=language-] ::selection {
  background: #363636;
}

: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: #fd9170;
}

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

.token.atrule {
  color: #c792ea;
}

.token.attr-name {
  color: #ffcb6b;
}

.token.attr-value {
  color: #a5e844;
}

.token.attribute {
  color: #a5e844;
}

.token.boolean {
  color: #c792ea;
}

.token.builtin {
  color: #ffcb6b;
}

.token.cdata {
  color: #80cbc4;
}

.token.char {
  color: #80cbc4;
}

.token.class {
  color: #ffcb6b;
}

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

.token.comment {
  color: #616161;
}

.token.constant {
  color: #c792ea;
}

.token.deleted {
  color: #ff6666;
}

.token.doctype {
  color: #616161;
}

.token.entity {
  color: #ff6666;
}

.token.function {
  color: #c792ea;
}

.token.hexcode {
  color: #f2ff00;
}

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

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

.token.inserted {
  color: #80cbc4;
}

.token.keyword {
  color: #c792ea;
}

.token.number {
  color: #fd9170;
}

.token.operator {
  color: #89ddff;
}

.token.prolog {
  color: #616161;
}

.token.property {
  color: #80cbc4;
}

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

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

.token.punctuation {
  color: #89ddff;
}

.token.regex {
  color: #f2ff00;
}

.token.selector {
  color: #ff6666;
}

.token.string {
  color: #a5e844;
}

.token.symbol {
  color: #c792ea;
}

.token.tag {
  color: #ff6666;
}

.token.unit {
  color: #fd9170;
}

.token.url {
  color: #ff6666;
}

.token.variable {
  color: #ff6666;
}

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 + .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: #dadada;
}
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 * {
  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 * {
  color: #fff;
}

.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 */