@font-face {
  font-family: "Instrument Serif";
  src: url(../fonts/InstrumentSerif-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
:root {
  --content-width: 65ch;
  color-scheme: light dark;
}
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
img,
picture,
svg,
video {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    "Instrument Serif",
    ui-serif,
    Georgia,
    Cambria,
    "Times New Roman",
    serif;
  text-wrap: balance;
}
p {
  max-width: var(--content-width);
  text-wrap: pretty;
}
@media (min-width: 576px) {
  .container {
    max-width: min(510px, var(--content-width));
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: min(700px, var(--content-width));
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: min(950px, var(--content-width));
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: min(1200px, var(--content-width));
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: min(1450px, var(--content-width));
  }
}
article.page,
article.post,
article.post-details {
  background-color: transparent;
  box-shadow: none;
}
:is(article.page, article.post, article.post-details) hgroup {
  background-color: transparent;
  box-shadow: none;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid;
  border-image:
    linear-gradient(
      to right,
      var(--pico-color-purple-300) 0%,
      var(--pico-color-purple-300) 20%,
      var(--pico-color-jade-300) 20%,
      var(--pico-color-jade-300) 40%,
      var(--pico-color-pink-300) 40%,
      var(--pico-color-pink-300) 60%,
      var(--pico-color-azure-300) 60%,
      var(--pico-color-azure-300) 80%,
      var(--pico-color-orange-300) 80%,
      var(--pico-color-orange-300) 100%) 1;
  border-image-slice: 1;
  padding-inline: var(--pico-block-spacing-horizontal);
}
.page-header .logo {
  padding-block: 1rem;
}
.page-header svg {
  will-change: transform;
  transition: transform var(--pico-transition);
}
.page-header a:hover svg,
.page-header a:focus-visible svg {
  transform: translateY(-2px);
}
.page-nav ul.icons::before {
  display: block;
  height: 1.125rem;
  margin-inline: var(--pico-nav-element-spacing-horizontal);
  border-left: var(--pico-border-width) solid var(--pico-form-element-border-color);
  content: "";
}
.page-nav ul.icons li {
  align-items: center;
  display: flex;
}
.page-nav ul.icons a {
  color: light-dark(var(--pico-color-violet-650), var(--pico-color-amber-250));
}
.page-nav ul.icons svg {
  height: 24px;
}
.page-footer {
  border-top: 1px dotted var(--pico-muted-border-color);
  padding-inline: var(--pico-block-spacing-horizontal);
}
.page-footer .footer-nav {
  justify-content: center;
}
.page-footer .copyright {
  color: var(--pico-muted-color);
  text-align: center;
}
.posts-filter {
  padding-block: var(--pico-block-spacing-vertical);
  text-align: center;
}
.posts-list .post-title a {
  text-decoration: none;
}
article.post blockquote p {
  margin: 0;
}
ul.tags {
  display: flex;
  gap: 0.25rem 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}
ul.tags > li {
  list-style: none;
}
.polaroid {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: var(--pico-card-box-shadow);
  font-size: var(--pico-font-size);
  margin-block-start: 1.5rem;
  margin-inline: auto;
  padding: 0.75rem;
  transform: rotate(-1deg);
  width: 80%;
}
.polaroid figcaption {
  color: #2d3138;
  font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  margin-block: 1rem 0;
  text-align: center;
}
.social-icons {
  padding-block-start: 1rem;
}
.social-icons ul {
  justify-content: space-evenly;
}
.social-icons li {
  border: none !important;
  padding-block: 0.25rem 0;
}
.social-icons svg {
  height: 60px;
}
.social-icons svg.unsplash {
  height: 51px;
}
.photography h1 {
  padding-block-end: 1rem;
  text-align: center;
  font-size: 4rem;
}
.full-bleed {
  width: 80vw;
  margin-left: calc(50% - 40vw);
}
.masonry {
  columns: 3;
  column-gap: 1rem;
  column-fill: balance;
}
.masonry img {
  display: block;
  max-width: 100%;
  margin-bottom: 1rem;
  object-fit: cover;
  break-inside: avoid;
}
.search {
  padding-block: 1.25rem 2rem;
}
.search-results .hidden {
  display: none;
}
.support-buttons {
  margin-block: 1.5rem;
}
.support-buttons svg {
  color: var(--pico-color-pink-450);
  will-change: transform;
  transition: transform var(--pico-transition);
}
.support-buttons a:hover svg,
.support-buttons a:focus-visible svg {
  transform: translateY(-2px);
}
#scroll-to-top {
  --offset: 2rem;
  --width: 2rem;
  border: none !important;
  bottom: var(--offset);
  position: fixed;
  right: var(--offset);
  transform: scale(0);
  transition: transform var(--pico-transition);
  will-change: transform;
  z-index: 1;
}
@media (max-width: 768px) {
  #scroll-to-top {
    --offset: 0.75rem;
  }
}
#scroll-to-top svg {
  width: var(--width);
}
#scroll-to-top.show {
  transform: scale(1);
}
#scroll-to-top a:hover svg,
#scroll-to-top a:focus-visible svg {
  transform: translateY(-2px);
}
.callout {
  --callout-background: light-dark( var(--pico-color-slate-50), var(--pico-color-slate-800) );
  --callout-border: light-dark( var(--pico-color-slate-300), var(--pico-color-slate-600) );
  --callout-color: light-dark( var(--pico-color-slate-800), var(--pico-color-slate-50) );
  background: var(--callout-background);
  border-left: 0.25rem solid var(--callout-border);
  font-weight: 500;
  margin-block: 2rem;
  padding: 1.25rem;
}
.callout P {
  color: var(--callout-color);
  margin: 0;
  padding: 0;
}
.callout-positive {
  --callout-background: light-dark( var(--pico-color-jade-100), var(--pico-color-jade-800) );
  --callout-border: light-dark( var(--pico-color-jade-300), var(--pico-color-jade-600) );
  --callout-color: light-dark(var(--pico-color-jade-800), var(--pico-color-jade-100));
}
.callout-warning {
  --callout-background: light-dark( var(--pico-color-amber-100), var(--pico-color-amber-800) );
  --callout-border: light-dark( var(--pico-color-amber-300), var(--pico-color-amber-600) );
  --callout-color: light-dark( var(--pico-color-amber-800), var(--pico-color-amber-100) );
}
.callout-negative {
  --callout-background: light-dark( var(--pico-color-red-100), var(--pico-color-red-800) );
  --callout-border: light-dark(var(--pico-color-red-300), var(--pico-color-red-600));
  --callout-color: light-dark(var(--pico-color-red-800), var(--pico-color-red-100));
}
.codehilite {
  position: relative;
}
.codehilite .copy-to-clipboard {
  background-color: var(--pico-code-background-color);
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  position: absolute;
  right: 0;
  top: 0.75rem;
  z-index: 1;
}
.codehilite .copy-to-clipboard svg {
  will-change: transform;
  transition: transform var(--pico-transition);
}
.codehilite .copy-to-clipboard:hover svg,
.codehilite .copy-to-clipboard:focus-visible svg {
  transform: translateY(-1px);
}
.codehilite svg.check {
  color: var(--pico-color-green-300);
}