@layer setup {
  *,
::before,
::after {
    box-sizing: border-box;
  }
  [hidden] {
    display: none !important;
  }
  .sr-only:not(:focus) {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
}
@layer config {
  html {
    --blue: #5aaeeb;
    --peach: #ecaca6;
    --purple: #6a4fa9;
    --lavender: #cb99ca;
    --pink: #bb5fb1;
    --raspberry: #a93698;
    --dark: #191b22;
    --light: #fffdfe;
    --bg: var(--dark);
    --text: var(--light);
    --accent: var(--lavender);
    --alt: var(--blue);
    --shadow: #0003;
    --body-em: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
    --line-ratio: 1.4;
    --line-height: calc(1em * var(--line-ratio));
    --gap: var(--body-em);
    --newline: var(--gap);
    --spacer: calc(var(--gap) + 2vw);
    --h1: 2em;
    --h2: 1.5em;
    --h3: 1.17em;
    --h4: 1.00em;
    --h5: 0.83em;
    --h6: 0.67em;
    --small: 1rem;
    --ui-mono: ui-monospace, sfmono-regular, consolas, monaco, monospace, serif;
    --ui-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
    --ui-serif: ui-serif, palatino, palatino linotype, palatino lt std,
      book antiqua, georgia, serif;
    --body-font: var(--ui-sans);
    --heading-font: var(--ui-serif);
    --code-font: var(--ui-mono);
  }
}
@layer base {
  html {
    accent-color: var(--accent);
    background-color: var(--bg);
    color: var(--text);
    color-scheme: dark;
    font-family: var(--body-font);
    height: 100%;
  }
  body {
    font-size: var(--body-em);
    margin: 0;
    min-height: 100%;
  }
  img {
    display: block;
    max-width: 100%;
  }
  h1,
h2,
h3,
h4,
h4,
h6 {
    font-family: var(--heading-font);
    margin-block-start: var(--spacer);
    margin-block-end: var(--newline);
  }
  h1 + p {
    font-family: var(--heading-font);
    font-style: italic;
  }
  h1 {
    font-size: var(--h1);
  }
  h2 {
    font-size: var(--h2);
  }
  h3 {
    font-size: var(--h3);
  }
  h4 {
    font-size: var(--h4);
  }
  h5 {
    font-size: var(--h5);
  }
  h6 {
    font-size: var(--h6);
  }
  a:link,
a:visited {
    color: var(--accent);
  }
  a:focus,
a:hover,
a:active {
    color: var(--alt);
  }
  p,
ul,
ol {
    margin-block: var(--newline);
  }
}
@layer layout {
  body {
    --page-margin: minmax(var(--gap), 1fr);
    display: grid;
    gap: var(--gap);
    grid-template: "banner banner banner" auto ". main ." 1fr "footer footer footer" auto/var(--page-margin) minmax(min-content, 65ch) var(--page-margin);
  }
  main {
    grid-area: main;
    padding: var(--gap);
  }
  main > header {
    --newline: 0.5rem;
    margin-block-end: var(--spacer);
  }
  body > footer {
    --newline: 0.5rem;
    background-color: var(--shadow);
    font-size: var(--small);
    grid-area: footer;
    padding: var(--gap);
  }
}
@layer layout {
  body > header {
    align-items: center;
    background-color: var(--shadow);
    display: grid;
    grid-area: banner;
    grid-template: "logo title" auto "logo nav" auto/5em 1fr;
    padding: var(--gap);
  }
  @media (min-width: 40em) {
    body > header {
      --justify-nav: end;
      gap: var(--gap);
      grid-template: "logo title nav" auto/6em auto 1fr;
    }
    body > header .logo {
      margin-block: -0.5em -2em;
    }
  }
  .logo {
    grid-area: logo;
    transition: transform 150ms ease-out;
  }
  .logo:hover, .logo:focus, .logo:active {
    transform: scale(1.1);
  }
  @media (min-width: 40em) {
    .logo {
      margin-block: -0.5em -2em;
    }
  }
  nav:not(main nav) {
    display: flex;
    gap: var(--gap);
    justify-self: var(--justify-nav);
  }
  @layer default {
    nav:not(main nav) a:link,
nav:not(main nav) a:visited {
      text-decoration: none;
    }
    nav:not(main nav) a:focus,
nav:not(main nav) a:hover,
nav:not(main nav) a:active {
      text-decoration: underline;
    }
  }
  [aria-current=page] {
    color: var(--alt);
  }
}
@layer patterns {
  .post-list strong {
    display: block;
    font-size: var(--h3);
  }
}

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