:root {
  --color-bg: hsla(210deg, 100%, 10%);
  --color-bg-overlay: hsla(210deg, 100%, 20%);
  --color-text: hsla(210deg, 100%, 90%);
  --color-text-faded: hsla(210deg, 100%, 90%, 35%);
  --color-link: hsla(200deg, 100%, 50%);
  --color-link-visited: hsla(270deg, 100%, 70%); }

html {
  background: var(--color-bg);
  color: var(--color-text); }

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

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

:root {
  --inline-start-space: 1rem;
  --inline-end-space: 1rem; }

body {
  margin: 0; }

main {
  max-width: 50rem;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-start: var(--inline-start-space);
  padding-inline-end: var(--inline-end-space); }

.site-header {
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-start: var(--inline-start-space);
  padding-inline-end: var(--inline-end-space); }

.site-footer {
  padding-block-start: 1rem;
  padding-block-end: 4rem;
  padding-inline-start: var(--inline-start-space);
  padding-inline-end: var(--inline-end-space); }

h2 {
  margin-inline-start: calc(-1 * var(--inline-start-space));
  padding-inline-start: var(--inline-start-space); }

@media (min-width: 22.5rem) {
  :root {
    --inline-start-space: 2rem;
    --inline-end-space: 2rem; } }

@media (min-width: 25rem) {
  :root {
    --inline-start-space: 4rem; } }

:root {
  font-family: sans-serif; }

p, h1, h2, h3, h4, h5, h6, figure, blockquote {
  margin-block: 1lh; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  margin-block-start: 2lh; }

p, figure {
  line-height: 1.65; }

small {
  line-height: 1.8; }

h1 a,
h2 a {
  text-decoration: none; }

h2 {
  background: var(--color-bg-overlay);
  width: max-content;
  max-width: 75%;
  padding-block: 1rem;
  padding-inline-end: 1rem; }

h3 {
  max-width: 80%; }

h3, h3 a {
  text-decoration-style: solid;
  text-decoration-color: var(--color-bg-overlay);
  text-decoration-line: underline;
  text-decoration-thickness: 0.25rem;
  text-decoration-skip-ink: none;
  text-underline-offset: 0rem;
  transition: all 250ms ease-in; }

h3 a:hover {
  text-underline-offset: 0.25rem; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit !important; }

section[id] {
  position: relative; }

section[id]::before {
  content: "#" attr(id);
  position: absolute;
  inset-block-start: calc(-1lh - 0.25rem);
  inset-inline-start: 0;
  color: var(--color-text-faded);
  font-weight: 900;
  font-size: 0.75rem; }

section[id] h2 a::before,
section[id] h3 a::before {
  content: '';
  display: inline-block;
  width: 1lh;
  height: 1lh;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.95 21q-2.05 0-3.5-1.45T3 16.05q0-1 .375-1.9t1.075-1.6L7.8 9.225l1.4 1.4l-3.35 3.35q-.425.425-.637.963T5 16.05q0 1.225.863 2.088T7.95 19q.575 0 1.125-.213t.975-.637l3.325-3.35l1.425 1.425l-3.35 3.325q-.7.7-1.6 1.075T7.95 21m1.975-5.5L8.5 14.075L14.075 8.5L15.5 9.925zm6.275-.7l-1.4-1.425l3.35-3.325q.425-.425.625-.95t.2-1.1q0-1.25-.85-2.125T16.025 5q-.575 0-1.112.213t-.963.637L10.625 9.2L9.2 7.8l3.35-3.35q.7-.7 1.6-1.075T16.05 3q2.05 0 3.487 1.45t1.438 3.525q0 .975-.363 1.875t-1.062 1.6z'/%3E%3C/svg%3E");
  background-color: transparent;
  mask-image: var(--svg);
  position: absolute;
  inset-inline-end: 0;
  transition: all 200ms ease-in; }
  @media (min-width: 25rem) {
    section[id] h2 a::before,
    section[id] h3 a::before {
      inset-inline-end: unset;
      inset-inline-start: calc(-1lh - 1rem); } }
section[id] h2 a:hover::before,
section[id] h3 a:hover::before {
  background-color: currentColor; }

:link {
  transition: all 250ms ease-in; }

:link:hover {
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 0.125rem;
  text-decoration-skip-ink: none; }

[data-pullquote]::before {
  content: attr(data-pullquote);
  display: block;
  margin-block: 1lh;
  color: var(--color-text);
  padding-block: 1em;
  padding-inline: 1em;
  text-align: right;
  padding-inline-end: 0;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: 0.14em;
  padding-left: 7%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='hsla(210deg, 50%, 20%)' d='M18.07 10.07c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Zm-11.98 0c-.42 0-.83.07-1.22.17c.09-.3.17-.61.32-.88c.11-.31.29-.58.47-.84c.15-.29.41-.49.6-.74c.2-.24.47-.4.69-.6c.21-.21.49-.32.71-.46c.23-.13.43-.28.65-.35c.21-.09.39-.16.54-.22c.3-.12.47-.2.47-.2l-.48-1.94s-.22.05-.6.14c-.19.05-.42.1-.69.17c-.27.05-.56.19-.88.31c-.32.14-.69.24-1.03.47c-.34.22-.74.4-1.09.69c-.34.3-.75.56-1.05.94c-.33.36-.66.73-.91 1.16c-.29.41-.49.86-.7 1.3c-.19.44-.34.9-.47 1.34c-.24.88-.34 1.72-.38 2.44c-.03.72-.01 1.32.03 1.75c.02.2.04.4.06.54l.03.17c.2 2.56 2.31 4.58 4.93 4.58c2.74 0 4.96-2.22 4.96-4.96s-2.22-4.96-4.96-4.96Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0; }

.site-header {
  --color-bg: hsl(210deg, 100%, 10%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000d1a; }

.site-masthead {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  text-decoration: none;
  color: inherit;
  padding-block: 1rem; }

.site-icon {
  height: 3rem;
  width: 3rem;
  margin-inline-end: 1.5rem;
  border-radius: 100rem;
  padding: 0.5rem; }

.bubble-left {
  grid-column: 2;
  place-self: center start;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: relative;
  background-color: var(--color-bg); }
  .bubble-left::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0.125rem;
    left: -0.75rem;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-right: 1rem solid var(--color-bg); }