@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(""),
    url(https://worldsinminiature.comhttps://worldsinminiature.com/fonts/inter/inter-v7-latin-500.woff2)
      format("woff2"),
    url(/fonts/inter/inter-v7-latin-500.woff) format("woff");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(""),
    url(https://worldsinminiature.comhttps://worldsinminiature.com/fonts/inter/inter-v7-latin-700.woff2)
      format("woff2"),
    url(/fonts/inter/inter-v7-latin-700.woff) format("woff");
}
@font-face {
  font-family: Redhat;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(""),
    url(https://worldsinminiature.comhttps://worldsinminiature.com/fonts/redhat/red-hat-display-v7-latin-900.woff2)
      format("woff2"),
    url(/fonts/redhat/red-hat-display-v7-latin-900.woff) format("woff");
}
@font-face {
  font-family: RobotoMono;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local(""),
    url(https://worldsinminiature.comhttps://worldsinminiature.com/fonts/robotomono/robotomono-variablefont_wght-webfont.woff2)
      format("woff2"),
    url(/fonts/robotomono/robotomono-variablefont_wght-webfont.woff)
      format("woff");
}
*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(147, 197, 253, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(147, 197, 253, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}
*,
:after,
:before {
  box-sizing: border-box;
}
blockquote,
body,
figure,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
ol[role="list"],
ul[role="list"] {
  list-style: none;
}
html {
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  margin-inline: auto;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}
img {
  display: block;
  max-inline-size: 100%;
}
:root {
  --color-dark: #2b2926;
  --color-light: #f4f7f5;
  --color-light-glare: #fff;
  --color-primary: #d81e5b;
  --color-primary-glare: #e43a72;
  --color-secondary: #00487c;
  --color-secondary-glare: #1d4e89;
  --color-inverse-light: #2b2926;
  --color-inverse-dark: #181920;
  --color-inverse-dark-glare: #272934;
  --color-inverse-light-glare: #fff;
  --color-inverse-primary: #3bb0a5;
  --color-inverse-primary-glare: #54fcec;
  --color-inverse-secondary: #6021e0;
  --color-inverse-secondary-glare: #8a25ff;
  --space-2xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.29vw, 0.9375rem);
  --space-s: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --space-m: clamp(2rem, 1.84rem + 0.78vw, 2.5rem);
  --space-l: clamp(3rem, 2.77rem + 1.17vw, 3.75rem);
  --space-xl: clamp(5rem, 4.61rem + 1.94vw, 6.25rem);
  --space-2xl: clamp(8rem, 7.38rem + 3.11vw, 10rem);
  --space-3xl: clamp(13rem, 11.99rem + 5.05vw, 16.25rem);
  --space-xs-s: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
  --space-l-2xl: clamp(2rem, 1.07rem + 4.66vw, 5rem);
  --space-xl-2xl: clamp(3rem, 2.38rem + 3.11vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
  --size-step-min-1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --size-step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
  --size-step-2: clamp(1.4375rem, 1.11rem + 1.65vw, 2.5rem);
  --size-step-3: clamp(1.75rem, 1.19rem + 2.82vw, 3.5625rem);
  --size-step-4: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);
  --size-step-5: clamp(2.5rem, 1.08rem + 7.09vw, 7.0625rem);
  --size-step-6: clamp(3rem, 0.84rem + 10.78vw, 9.9375rem);
  --font-display: Redhat, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --font-base: Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --font-mono: RobotoMono, monospace;
  --gutter: var(--space-s-m);
  --border-radius: 0.5rem;
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 200ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
  --color-bg: var(--color-light);
  --color-fg: var(--color-dark);
  --sparkle: conic-gradient(
    var(--color-primary) 0 33%,
    var(--color-secondary) 0 55%,
    var(--color-inverse-primary) 0 70%,
    var(--color-inverse-secondary) 0 87%,
    var(--color-secondary-glare) 0 100%
  );
}
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-base);
  font-size: var(--size-step-1);
  letter-spacing: var(--tracking);
  line-height: 1.4;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-s);
  line-height: 1;
}
h1 {
  font-size: var(--size-step-4);
}
h2 {
  font-size: var(--size-step-3);
}
h3 {
  font-size: var(--size-step-2);
}
blockquote:not([class]),
li,
p {
  max-inline-size: 50ch;
}
h1,
h2,
h3 {
  max-inline-size: 20ch;
}
blockquote {
  border-inline-start: 0.8rem solid var(--color-primary);
  font-size: var(--size-step-2);
  padding: var(--space-m-l);
}
blockquote > * + * {
  margin-block-start: var(--space-m-l);
}
blockquote :last-child {
  font-family: var(--font-base);
  font-size: var(--size-step-1);
  font-style: normal;
}
[role="list"] {
  padding: 0;
}
a {
  color: currentcolor;
}
a:hover {
  text-decoration: none;
}
:focus {
  outline: 3px solid;
  outline-offset: 0.3ch;
}
:target {
  scroll-margin-top: 2ex;
}
main:focus {
  outline: 0;
}
article [href^="http"]:not([href*="worldsinminiature.com"]):after {
  background-image: url(https://worldsinminiature.com/images/icn-external.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 60% auto;
  block-size: 1em;
  content: "(external link)";
  display: inline-block;
  inline-size: 1em;
  overflow: hidden;
  text-indent: 1em;
  white-space: nowrap;
}
::-moz-selection {
  background: var(--color-primary);
  color: var(--color-bg);
}
::selection {
  background: var(--color-primary);
  color: var(--color-bg);
}
pre {
  background: var(--color-fg);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--size-step-0);
  padding: 0.125em 0.4em;
}
pre[class*="language-"] {
  padding: var(--space-s-m);
}
pre[class*="language-"] {
  text-align: left;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  background: var(--color-fg);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  -webkit-hyphens: none;
  hyphens: none;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
pre[class*="language-"] {
  overflow: auto;
  position: relative;
}
ol:not(.grid)) {
  padding-inline-start: var(--space-s);
}

.youtube-embed {
  aspect-ratio: 16/9;
}
.content {
  --wrapper-max-width: 75rem;
  display: grid;
  grid-template-columns: 1fr min(48ch, 100%) 1fr;
}
.content > * {
  grid-column: 2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: var(--color-light);
    --color-bg: var(--color-inverse-dark);
    --color-primary: var(--color-inverse-primary);
    --color-secondary: var(--color-inverse-secondary);
    --color-primary-glare: var(--color-inverse-primary-glare);
    --color-secondary-glare: var(--color-inverse-secondary-glare);
    --spot-color: var(--color-inverse-primary);
  }
  img {
    filter: brightness(0.8) contrast(1.2);
  }
  pre[class*="language-"] {
    background: var(--color-inverse-dark-glare);
    color: var(--color-fg);
  }
}
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.wrapper {
  margin-inline: auto;
  max-inline-size: var(--wrapper-max-width, 85rem);
  padding-inline: var(--gutter);
}
.relative {
  position: relative;
}
.grid {
  display: grid;
}
.e-content {
  --flow-space: var(--space-m-l);
  --wrapper-max-width: 55rem;
}
.e-content > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.h-entry :is(h2, h3, h4) + * {
  --flow-space: var(--space-s-m);
}
a.post-date {
  font-size: var(--size-step-0);
  color: var(--color-primary);
}
.h-entry h2 + * {
  margin-block-start: var(--flow-space, 1em);
}
table {
  border-bottom: 1px solid var(--color-fg);
  margin-inline: auto;
}
th {
  border-bottom: 2px solid var(--color-fg);
}
.site-header > * {
  margin-inline: auto;
}
.site-header {
  display: flex;
  flex-direction: column;
}
a.read-more,
nav a,
nav a:hover,
nav a:visited {
  --button-text: var(--color-primary);
  --button-border: var(--color-primary);
  background-color: var(--button-bg, var(--color-bg));
  border: 2px solid var(--button-border, var(--color-fg));
  border-radius: var(--border-radius);
  color: var(--button-text, var(--color-fg));
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 0.3em 1em;
  text-decoration: none;
  transition-duration: var(--transition-duration);
  transition-property: background-color, border;
  transition-timing-function: var(--transition-timing);
}
nav a:hover {
  --button-text: var(--color-bg);
  --button-bg: var(--color-primary);
  --button-border: var(--color-primary);
}
.site-footer nav a {
  --button-text: var(--color-fg);
  --button-border: var(--color-fg);
}
.site-footer nav a:hover {
  --button-text: var(--color-bg);
  --button-bg: var(--color-fg);
}
a,
h1 a,
h2,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  text-decoration: underline;
}
.h-entry h1 {
  font-size: var(--size-step-4);
}
.h-entry h2 {
  font-size: var(--size-step-3);
}
.h-entry h3 {
  font-size: var(--size-step-2);
}
.h-entry img {
  block-size: auto;
  max-inline-size: var(--max-img-width, 100%);
}
.h-entry .post-meta {
  font-size: var(--size-step-0);
}
.h-entry .post-meta a.u-url {
  text-decoration: none;
}
.h-entry footer {
  --flow-space: var(--space-s-m);
  background-color: var(--color-fg);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-size: var(--size-step-0);
  max-inline-size: unset;
  padding: var(--space-m-l);
}
.h-entry footer p {
  max-inline-size: initial;
}
.h-entry footer a {
  color: var(--color-bg);
  text-decoration: underline;
}
.h-entry footer a:hover {
  text-decoration: none;
}
section.footnotes {
  font-size: var(--size-step-0);
}
section.footnotes ol {
  padding-inline-start: var(--space-s);
}
.e-content figure + p:first-of-type,
.e-content img + p:first-of-type {
  margin-top: var(--flow-space, 1em);
}
hr::before {
  color: var(--color-fg);
}
.h-entry {
  padding-block-end: var(--region-space-bottom, var(--space-m-l));
  padding-block-start: var(--region-space-top, var(--space-m-l));
}
.e-content a {
  text-decoration: underline;
}
.e-content a:hover {
  text-decoration: none;
}
blockquote:not([class]),
li,
p {
  max-inline-size: 55ch;
}
