:root {
  /* Colors */
  --white: white;
  --white-smoke: hsla(120, 5%, 96%, 1.00);
  --gallery: hsla(0, 0%, 94%, 1.00);
  --iron: hsla(0, 0%, 84%, 1.00);
  --silver: hsla(0, 0%, 75%, 1.00);
  --light-blue: hsla(195, 53%, 79%, 1.00);
  --melrose: hsla(239, 97%, 87%, 1.00);
  --lynch: hsla(212, 15%, 49%, 1.00);
  --oxford-blue: hsl(212, 15.2%, 19.4%);
  --blue-charcoal: hsla(210, 16%, 13%, 1.00);
  --voodoo: hsla(281, 21%, 29%, 1.00);
  --gray-bush: hsla(269, 61%, 33%, 1.00);
  --mine-shaft: hsla(0, 0%, 20%, 1.00);
  --milk-punch: hsla(45, 100%, 91%, 1.00);
  --cream-brulee: hsla(45, 98%, 81%, 1.00);
  --bright-sun: hsla(45, 99%, 61%, 1.00);
  --antique-bronze: hsla(45, 98%, 21%, 1.00);
  --cola: hsla(45, 100%, 11%, 1.00);
  --brillant-lavender: hsla(300, 98%, 84%, 1.00);
  --roman: hsla(0, 65%, 60%, 1.00);
  --green: green;
  /* Semantic colors */
  --background-image-invert: var(--gallery);
  --body-bg-color: var(--white);
  --button-background: var(--mine-shaft);
  --button-color: var(--white-smoke);
  --button-background-hover: var(--roman);
  --button-border: var(--mine-shaft);
  --code-background: var(--white-smoke);
  --color-line: var(--iron);
  --color-shadow: var(--iron);
  --color-link: var(--voodoo);
  --color-link-hover: var(--roman);
  --color-link-visited: var(--gray-bush);
  --color-text: var(--mine-shaft);
  --color-warning-light: var(--milk-punch);
  --color-warning: var(--bright-sun);
  --color-warning-text: var(--antique-bronze);
  --surface-1-background: var(--gallery);
  --surface-1-border: var(--gallery);
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-color: var(--oxford-blue);
    --button-background: var(--oxford-blue);
    --button-color: var(--silver);
    --button-background-hover: var(--voodoo);
    --button-border: var(--silver);
    --code-background: var(--blue-charcoal);
    --color-line: var(--lynch);
    --color-shadow: var(--lynch);
    --color-link: var(--light-blue);
    --color-link-hover: var(--melrose);
    --color-link-visited: var(--brillant-lavender);
    --color-text: var(--silver);
    --color-warning-light: var(--cola);
    --color-warning: var(--antique-bronze);
    --color-warning-text: var(--cream-brulee);
    --surface-1-background: var(--blue-charcoal);
    --surface-1-border: var(--blue-charcoal);
  }
}

:root {
  --font-size-small: .9rem;
  --font-size-base: 1rem;
  --font-size-large: 1.3rem;
  --font-size-base-relative-small: .5em;
  --font-size-base-relative: 1em;
  --font-weight-regular: 300;
  --font-weight-semibold: 400;
  --font-weight-bold: 600;
  --line-height-small: 1.3;
  --line-height-base: 1.6;
}

:root {
  --space-025: .25rem;
  --space-05: .5rem;
  --space-1: 1rem;
  --space-2: 2rem;
  --space-2-5: 2.5rem;
  --space-2-relative: 2em;
  --space-4: 4rem;
  --space-10: 10rem;
  --distance-small: var(--space-05);
  --distance-base: var(--space-1);
  --distance-large: var(--space-2);
  --distance-extra-large: var(--space-4);
  --gap-025: var(--space-025);
  --gap-05: var(--space-05);
  --gap-1: var(--space-1);
  --gap-2: var(--space-2);
  --gap-25: var(--space-2-5);
  --gap-4: var(--space-4);
  --gap-100: var(--space-10);
  --caption-distance: var(--space-05);
  --outline-distance: var(--space-025);
  --padding-inline-elements: var(--space-025);
  --padding-list: var(--space-1);
  --touch-elements-distance: var(--space-05);
  --min-viewport-distance: var(--space-1);
  --space-main-aside: var(--gap-100);
  --headings-distance: var(--space-2-relative);
  --aside-sticky-distance: var(--space-4);
}

:root {
  --border-radius-extra-small: 0.125rem;
  --border-radius-small: 0.25rem;
  --border-radius-base: .5rem;
  --border-radius-large: 3rem;
  --border-radius-full: 50%;
  --box-shadow: 2px 2px 0 var(--color-shadow);
  --border-width-1: 1px;
  --border-width-5: 5px;
  --line: var(--border-width-1) dashed var(--color-line);
}

:root {
  --inline-block-main: 70ch;
  --inline-block-aside: 300px;
  --inline-block-logo: 60px;
}

:root {
  --time-01: .1s;
  --time-03: .3s;
  --time-05: .5s;
  --time-1: 1s;
  --time-4: 4s;
  --transition-button: var(--time-05);
  --transition-link: var(--time-03);
  --transition-logo-stroke: var(--time-03);
  --transition-details: var(--time-05);
  --transition-load-home-components: var(--time-1);
  --transition-load-home-footer: var(--time-4);
}

@view-transition {
  navigation: auto;
}
:root {
  interpolate-size: allow-keywords;
}

.screen-reader-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.noboot {
  display: none;
}

:where([href*=codepen]),
:where([href*="developer.mozilla"]) {
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 1.2em;
}

:where(a[href*=codepen]) {
  background-image: url("/assets/images/external/codepen.ico");
}

:where(a[href*="developer.mozilla"]) {
  background-image: url("/assets/images/external/mdn.ico");
}

* {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    scroll-padding: 1rem;
  }
}
body {
  background-color: var(--body-bg-color);
  color: var(--color-text);
  font-family: system-ui;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

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

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

a:focus-visible {
  outline-offset: var(--outline-distance);
  outline-width: var(--outline-distance);
  outline-color: currentColor;
}

kbd {
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow);
}

strong {
  font-weight: var(--font-weight-bold);
}

main :where(kbd, p code, li code, blockquote code) {
  background-color: var(--surface-1-background);
  border-radius: var(--border-radius-extra-small);
  display: inline-block;
  font-size: var(--font-size-small);
  padding-inline: var(--padding-inline-elements);
}

:where(h1, h2, h3, h4) {
  line-height: var(--line-height-small);
  text-wrap: balance;
}

:where(h1) {
  font-weight: var(--font-weight-bold);
  margin-block-start: 0;
}

[data-template=home] h1 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

[data-template=home] h2 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

main :is(h2, h2 a) {
  font-weight: var(--font-weight-bold);
}

main :where(h3, h2) {
  margin-block-start: var(--headings-distance);
}

main :where(h3) {
  font-weight: var(--font-weight-semibold);
}

blockquote {
  border-left: var(--border-width-5) solid var(--surface-1-border);
  margin-inline: 0;
  padding: var(--distance-small) var(--distance-base);
  font-style: italic;
}

[data-template=home] main blockquote {
  max-width: 100%;
  width: max-content;
}

blockquote[data-type=old],
blockquote[data-type=warning] {
  background-color: var(--color-warning-light);
  background: var(--color-warning-light);
  border-color: var(--color-warning-light);
  border-radius: var(--border-radius-base);
  color: var(--color-warning-text);
}

blockquote[data-type=note] {
  background-color: var(--surface-1-background);
  border-color: var(--surface-1-border);
  border-radius: var(--border-radius-base);
}

.blog__list {
  display: grid;
  gap: var(--gap-2);
}

.last-post {
  max-width: 100%;
  width: max-content;
}

.card {
  border-radius: var(--border-radius-base);
  display: grid;
  gap: 0 var(--gap-1);
  transition: background-color var(--transition-details);
}

@media (min-width: 700px) {
  .card {
    grid-auto-flow: dense;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    padding-inline-end: 1rem;
  }
}
.card * {
  margin: 0;
}

.card h3,
.card h2 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  margin-block-end: var(--distance-small);
}
@media (max-width: 699px) {
  .card h3,
  .card h2 {
    margin-block-start: var(--distance-small);
  }
}
@media (min-width: 700px) {
  .card h3,
  .card h2 {
    grid-row: 2;
  }
}

@media (min-width: 700px) {
  .card > div,
  .card > p {
    grid-row: 3;
  }
}

.card picture {
  grid-row: 1;
  border-radius: var(--border-radius-base);
}
@media (max-width: 699px) {
  .card picture {
    width: max-content;
  }
}
@media (min-width: 700px) {
  .card picture {
    grid-column: 1;
    grid-row: 1/5;
  }
}

.card img {
  background-color: var(--background-image-invert);
  border-radius: var(--border-radius-base);
}

@media (min-width: 700px) {
  .card:has(h2 a:hover),
  .card:has(h3 a:hover) {
    background-color: var(--surface-1-background);
  }
}
.cards {
  display: grid;
  gap: var(--gap-2);
  margin-block-start: var(--distance-large);
}

.content > p {
  margin-block: var(--font-size-base-relative) 0;
}

.content li {
  margin-block: var(--font-size-base-relative-small) 0;
}

.content pre[class*=language-] {
  margin-block-start: var(--distance-base);
  max-width: calc(100vw - 4rem);
  overflow: auto;
}

details * {
  margin: 0;
}

details {
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius-base);
  padding-inline: var(--distance-base);
  padding-block: var(--distance-base);
  overflow: hidden;
}

details + details {
  margin-block-start: var(--distance-base);
}

details[data-component=post-toc] {
  margin-block-end: var(--distance-base);
}

details::details-content {
  block-size: 0;
  transition: block-size var(--transition-details), content-visibility var(--transition-details);
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details nav > ul:first-of-type,
details nav > ol:first-of-type {
  padding-block-start: var(--distance-base);
}

details nav.toc ol li {
  margin-block-start: var(--distance-small);
}

details blockquote {
  margin-block-start: var(--distance-base);
}

summary {
  transition: color var(--transition-link);
}

summary:hover {
  color: var(--color-link-hover);
  cursor: pointer;
}

figure {
  margin: 0;
}

figure[data-line=true] img {
  border: 1px solid var(--color-line);
}

figcaption {
  display: block;
  font-style: italic;
  font-size: var(--font-size-small);
  padding-block: var(--caption-distance);
  padding-inline: var(--caption-distance);
}

@media (prefers-color-scheme: dark) {
  img[data-invert=true] {
    filter: invert(1);
  }
}
picture[data-border=true],
img[data-border=true] {
  border: 1px solid var(--color-line);
}

form {
  margin-block-start: var(--distance-large);
}

fieldset {
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-05);
  padding: 0;
}

fieldset :where(input, button) {
  appearance: none;
  border: 1px solid var(--color-text);
  border-radius: var(--border-radius-base);
  font-family: inherit;
  font-size: var(--font-size-base);
  padding-block: 0.5rem;
  padding-inline: var(--distance-base);
}

[type=submit] {
  background-color: var(--button-background);
  border: 1px solid var(--button-border);
  color: var(--button-color);
  cursor: pointer;
  transition: background var(--transition-button);
}

[type=submit]:hover,
[type=submit]:focus-visible {
  background-color: var(--button-background-hover);
}

@media (min-width: 960px) {
  .go-down {
    display: none;
  }
}
.go-to-top a,
.go-down a {
  text-underline-offset: 0.3rem;
}

.hero {
  border-radius: var(--border-radius-base);
  box-shadow: 0 10px 30px 0 hsla(0, 0%, 0%, 0.3);
}

hr {
  border: none;
  border-block: var(--line);
  margin-block: var(--distance-large);
  width: 100%;
}

hr + h2 {
  margin-block-start: 0;
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1);
  list-style-type: "";
  padding-inline: 0;
}

.list-links {
  display: grid;
  gap: var(--gap-1);
  padding-inline: var(--distance-base);
}

.list-links p {
  margin-block: 0;
}

.list-links ul {
  padding-inline: var(--distance-base);
}

.logo {
  height: var(--inline-block-logo);
  transition: stroke var(--transition-logo-stroke);
  width: var(--inline-block-logo);
}

a .logo {
  stroke: hsl(281, 21%, 29%);
}

@media (prefers-color-scheme: dark) {
  a .logo {
    stroke: hsl(195, 53%, 79%);
  }
}
a .logo .point {
  fill: hsl(281, 21%, 29%);
}

@media (prefers-color-scheme: dark) {
  a .logo .point {
    fill: hsl(195, 53%, 79%);
  }
}
a:hover .logo {
  stroke: hsl(0, 64%, 60%);
}

@media (prefers-color-scheme: dark) {
  a:hover .logo {
    stroke: hsl(239, 97%, 87%);
  }
}
a:hover .logo .point {
  fill: hsl(0, 64%, 60%);
}

@media (prefers-color-scheme: dark) {
  a:hover .logo .point {
    fill: hsl(239, 97%, 87%);
  }
}
.logo {
  stroke: hsl(0, 0%, 20%);
}

@media (prefers-color-scheme: dark) {
  .logo {
    stroke: hsl(0, 0%, 75%);
  }
}
.logo .point {
  fill: hsl(0, 0%, 20%);
}

@media (prefers-color-scheme: dark) {
  .logo .point {
    fill: hsl(0, 0%, 75%);
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes point {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body[data-template=home] .logo .j {
  --stroke: 3900;
  animation: dash 2s ease-in forwards;
  stroke-dasharray: var(--stroke);
  stroke-dashoffset: var(--stroke);
}

body[data-template=home] .logo .o {
  --stroke: 3900;
  animation: dash 2s ease-in forwards;
  animation-delay: 1s;
  stroke-dasharray: var(--stroke);
  stroke-dashoffset: var(--stroke);
}

body[data-template=home] .logo .point {
  animation: point 1s ease-out forwards;
  animation-delay: 2s;
  opacity: 0;
}

body[data-template=home] footer {
  opacity: 1;
  transition: opacity var(--transition-load-home-footer);
}
@starting-style {
  body[data-template=home] footer {
    opacity: 0;
  }
}

.mosaic {
  display: grid;
  gap: var(--gap-25);
  margin-block: var(--distance-large);
}
@media (min-width: 600px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mosaic img {
  background-color: var(--background-image-invert);
  border-radius: var(--border-radius-base);
}

.nav-horizontal ol,
.nav-vertical ol {
  list-style-type: "";
  margin-block: 0;
  padding-inline: 0;
}

.nav-horizontal ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-05);
}
@media (min-width: 380px) {
  .nav-horizontal ol {
    gap: var(--gap-1);
  }
}

.nav-vertical ol {
  display: grid;
  gap: var(--gap-05);
}

@media (hover: hover) {
  .nav-horizontal ol,
  .nav-vertical ol {
    gap: var(--gap-05) var(--gap-1);
  }
}
.nav-vertical[data-liststyle=true] ol {
  list-style: revert;
  padding-inline: var(--padding-list);
}

.nav-horizontal li,
.nav-horizontal li * {
  display: flex;
}

[aria-current=page] {
  color: var(--color-link-visited);
  pointer-events: none;
  text-decoration: none;
}

.pagination ul {
  display: flex;
  gap: var(--gap-1) var(--gap-2);
  flex-wrap: wrap;
  margin-block-start: 4rem;
  padding: 0;
}

@media (hover: hover) {
  .pagination ul {
    gap: var(--gap-1);
  }
}
.pagination li {
  list-style: none;
}

.palette {
  display: grid;
  gap: var(--distance-small);
  margin-block: var(--distance-large);
  padding-inline: 0;
}

.palette li {
  display: grid;
}

@media (min-width: 560px) {
  .palette li {
    align-items: center;
    display: grid;
    grid-template-columns: auto max-content 1fr;
    gap: 0 var(--distance-small);
  }
}
.palette__sample {
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-full);
  display: flex;
  width: 2em;
}

.post-article * {
  margin: 0;
}

.post-article header {
  align-items: start;
  display: grid;
  grid-template-rows: auto 1fr;
}

.post-article header h2 {
  font-size: var(--font-size-large);
  line-height: var(--line-height-small);
}

.post-article__time {
  grid-row: 1;
}

.post-article p {
  margin-block-start: var(--distance-small);
}

.publish-date {
  display: grid;
}

.status {
  background-color: var(--green);
  border-radius: var(--border-radius-small);
  color: var(--white);
  display: inline-flex;
  font-size: var(--font-size-small);
  margin-inline-start: var(--font-size-base-relative-small);
  padding-inline: var(--distance-small);
}

.table-container {
  max-width: 100%;
  overflow: auto;
}

table {
  border-collapse: collapse;
  font-size: var(--font-size-small);
  margin-block-start: var(--distance-base);
  text-align: left;
  width: 100%;
}

th {
  border-bottom: 2px solid var(--surface-1-border);
}

td,
th {
  padding: var(--distance-small) var(--distance-base);
}

tr:nth-of-type(even) {
  background-color: var(--surface-1-background);
}

body[data-layout=default] {
  display: grid;
  gap: var(--gap-25);
  grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main));
  justify-content: center;
  margin: 0;
  overflow-x: clip;
  padding-inline: var(--min-viewport-distance);
}
@media (min-width: 1180px) {
  body[data-layout=default] {
    align-items: start;
    gap: var(--gap-4) var(--space-main-aside);
    grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main)) minmax(auto, var(--inline-block-aside));
    grid-template-rows: auto auto 1fr auto;
  }
  body[data-layout=default] .landmark-header,
  body[data-layout=default] .landmark-footer {
    grid-column: 1/-1;
  }
  body[data-layout=default] .landmark-main {
    grid-row: span 2;
  }
}

body[data-layout=home] {
  display: grid;
  gap: var(--gap-25);
  grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main));
  justify-content: center;
  margin: 0;
  overflow-x: clip;
  padding-inline: var(--min-viewport-distance);
}
@media (min-width: 1180px) {
  body[data-layout=home] {
    align-items: start;
    gap: var(--gap-4) var(--space-main-aside);
    grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main)) minmax(auto, var(--inline-block-aside));
    grid-template-rows: auto 1fr auto auto;
  }
  body[data-layout=home] .landmark-header,
  body[data-layout=home] .landmark-footer {
    grid-column: 1/-1;
  }
  body[data-layout=home] .landmark-main {
    grid-row: span 2;
  }
  body[data-layout=home] .landmark-main {
    grid-row: 2;
  }
  body[data-layout=home] [data-component=header-nav] {
    grid-row: 3;
  }
  body[data-layout=home] .landmark-main,
  body[data-layout=home] [data-component=header-nav] {
    grid-column: 1;
    opacity: 1;
  }
}

body[data-layout=projects] {
  display: grid;
  gap: var(--gap-25);
  grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main));
  justify-content: center;
  margin: 0;
  overflow-x: clip;
  padding-inline: var(--min-viewport-distance);
}
@media (min-width: 1180px) {
  body[data-layout=projects] {
    align-items: start;
    gap: var(--gap-4) var(--space-main-aside);
    grid-template-columns: minmax(min(var(--inline-block-main), 100%), var(--inline-block-main)) minmax(auto, var(--inline-block-aside));
    grid-template-rows: auto auto 1fr auto;
  }
  body[data-layout=projects] .landmark-header,
  body[data-layout=projects] .landmark-footer {
    grid-column: 1/-1;
  }
  body[data-layout=projects] .landmark-main {
    grid-row: span 2;
  }
}

.landmark-header {
  align-items: center;
  display: flex;
  margin-block-start: var(--distance-extra-large);
}

.landmark-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

aside {
  display: grid;
  gap: var(--gap-1);
}

aside > * {
  margin-block: 0;
}

@media (min-width: 1180px) {
  .aside-sticky {
    grid-column: 2;
    position: sticky;
    top: var(--aside-sticky-distance);
  }
}
.portrait {
  border-radius: var(--border-radius-full);
}

.landmark-footer {
  margin-block-start: 2rem;
}

@media (max-width: 959px) {
  .landmark-footer {
    display: grid;
  }
  .landmark-footer nav {
    grid-row: 2;
  }
  .landmark-footer blockquote {
    grid-row: 3;
  }
}
@media (min-width: 960px) {
  .landmark-footer {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .landmark-footer hr {
    grid-column: span 2;
  }
}
[data-template=home] {
  position: relative;
}
[data-template=home] .landmark-main,
[data-template=home] [data-component=header-nav] {
  transform: translateY(0);
  transition: transform var(--transition-load-home-components), opacity var(--transition-load-home-components);
}
@starting-style {
  [data-template=home] .landmark-main,
  [data-template=home] [data-component=header-nav] {
    opacity: 0;
    transform: translateY(1rem);
  }
}
[data-template=home] figure {
  display: none;
}
@media (min-width: 1180px) {
  [data-template=home] figure {
    display: block;
    justify-self: end;
    grid-column: 2;
    grid-row: 2/4;
    padding: 0;
    text-align: right;
  }
}
[data-template=home] section {
  grid-row: 4;
  opacity: 1;
  transition: opacity var(--transition-load-home-components);
  transition-delay: var(--time-1);
}
@starting-style {
  [data-template=home] section {
    opacity: 0;
  }
}

[data-template=projects] .landmark-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1180px) {
  [data-template=projects] .landmark-main {
    display: grid;
    grid-template-columns: 1fr 700px 1fr;
    grid-column: span 2;
  }
  [data-template=projects] .landmark-main > * {
    grid-column: 2;
  }
}
[data-template=projects] .landmark-main header {
  display: grid;
  gap: var(--distance-small);
  margin-block-end: var(--distance-base);
}
@media (min-width: 1180px) {
  [data-template=projects] .landmark-main header {
    align-items: end;
    display: flex;
    grid-column: 1/-1;
    justify-content: space-between;
    margin-block-end: var(--distance-base);
  }
}
[data-template=projects] .landmark-main header h1,
[data-template=projects] .landmark-main header p {
  margin: 0;
}
@media (min-width: 1180px) {
  [data-template=projects] .landmark-main .hero {
    grid-column: 1/-1;
  }
}