:root {
  --space: #0b0b11;
  --mantle: #181825;
  --mantle-icey: #181825ab;
  --base: #1e1e2e;
  --surface: #313244;
  --border: #45475a;
  --text: #cdd6f4;
  --subtext: #a6adc8;
  --link: #89b4fa;
  --title: #f5c2e7;
  --header: #cba6f7;
  --shadow: rgba(0, 0, 0, 0.35);

  /* --- Type Scale (Major Third, 1.25 ratio) -------------- */
  --text-xs: 0.8rem;
  /*  12.8px - captions     */
  --text-sm: 0.875rem;
  /*  14px   - metadata     */
  --text-base: clamp(1rem, 2vw, 1.125rem);
  /*  16-18px - body        */
  --text-md: clamp(1.1rem, 2.5vw, 1.25rem);
  /*  17-20px - nav, UI     */
  --text-lg: clamp(1.25rem, 3vw, 1.5rem);
  /*  20-24px - section h1  */
  --text-xl: clamp(1.5rem, 4vw, 2rem);
  /*  24-32px - post title  */
}

@media (prefers-color-scheme: light) {
  :root {
    --mantle: #e6e9ef;
    --base: #eff1f5;
    --surface: #ccd0da;
    --border: #bcc0cc;
    --text: #4c4f69;
    --subtext: #6c6f85;
    --link: #1e66f5;
    --title: #c4389a;
    --header: #7527d4;
    --shadow: rgba(76, 79, 105, 0.2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: var(--text-base);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--space);
  color: var(--text);
  padding: 1rem;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

ol,
ul {
  list-style: none;
}

/* --- Navigation ------------------------------------------ */

.main-navigation {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  width: calc(100% - 1rem);
  max-width: 850px;
  margin: 0 auto 1rem;
  font-size: var(--text-md);
}

.main-navigation h1 {
  margin-right: auto;
}

.main-navigation a {
  opacity: 0.6;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}

.main-navigation a:hover {
  opacity: 1;
  border-bottom-color: var(--link);
}

.main-navigation a.curpage {
  opacity: 1;
  border-bottom-color: var(--link);
}

.main-navigation a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Cards ----------------------------------------------- */

.blog-post-base,
.page-base {
  background-color: var(--mantle-icey);
  border-radius: clamp(1px, 1.0vw, 20px);
  box-shadow: 0 4px 24px var(--shadow);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  margin: 0 auto;
  max-width: 850px;
  width: calc(100% - 1rem);
  gap: 1rem;
}

/* --- Shared Content Styles -------------------------------- */

.blog-post-content,
.page-content {
  line-height: 1.75;
  font-size: var(--text-base);
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.page-content h1,
.page-content h2,
.page-content h3 {
  color: var(--header);
  margin: 1.5rem 0 0.5rem;
}

.blog-post-content p,
.page-content p {
  margin-bottom: 1rem;
  text-align: justify;
  hyphens: auto;
}

.blog-post-content code,
.page-content code {
  background-color: var(--surface);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.blog-post-content pre,
.page-content pre {
  background-color: var(--surface);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.blog-post-content pre code,
.page-content pre code {
  background: none;
  padding: 0;
}

.blog-post-content blockquote,
.page-content blockquote {
  border-left: 3px solid var(--link);
  padding-left: 1rem;
  color: var(--subtext);
  margin-bottom: 1rem;
}

/* --- Blog Post Header ------------------------------------- */

.blog-post-header {
  color: var(--title);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.blog-post-title {
  font-size: var(--text-xl);
  font-weight: 700;
}

.blog-post-date {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--subtext);
}

.blog-post-time-to-read {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--subtext);
}

/* --- Blog Post Navigation --------------------------------- */

.blog-post-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 850px;
  margin: 1rem auto;
  font-size: var(--text-md);
}

.blog-post-navigation a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 5px;
  background-color: var(--mantle);
  transition: opacity 0.2s;
}

.blog-post-navigation a:hover {
  opacity: 0.75;
}

.blog-post-navigation a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* --- Bracket Hover Effect --------------------------------- */

.posts-of-this-month li a,
.post-list li a {
  position: relative;
  transition: opacity 0.2s;
}

.posts-of-this-month li a::before,
.posts-of-this-month li a::after,
.post-list li a::before,
.post-list li a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.posts-of-this-month li a::before,
.post-list li a::before {
  left: 0;
  border-left: 2px solid var(--link);
  border-top: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: translateX(4px);
}

.posts-of-this-month li a::after,
.post-list li a::after {
  right: 0;
  border-right: 2px solid var(--link);
  border-top: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: translateX(-4px);
}

.posts-of-this-month li a:hover::before,
.posts-of-this-month li a:hover::after,
.post-list li a:hover::before,
.post-list li a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.posts-of-this-month li a:focus-visible,
.post-list li a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Posts of This Month ---------------------------------- */

.posts-of-this-month {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.posts-of-this-month h1 {
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.posts-of-this-month ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.posts-of-this-month li a {
  display: inline-block;
  padding: 0 0.5rem;
}

/* --- Post List -------------------------------------------- */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 5px;
}

.post-list li a span:first-child {
  color: var(--subtext);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Footer ----------------------------------------------- */

footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto auto 0 auto;
  padding: 1rem;
  font-size: var(--text-sm);
  color: var(--subtext);
  opacity: 0.65;
}

/* --- Mobile ----------------------------------------------- */

@media (max-width: 640px) {

  .main-navigation {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .main-navigation h1 {
    margin-right: 0;
  }

  .blog-post-content p,
  .page-content p {
    text-align: left;
    hyphens: none;
  }

  .blog-post-navigation {
    width: calc(100% - 1rem);
    flex-direction: column;
    align-items: stretch;
  }

  .blog-post-navigation a {
    justify-content: center;
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Starfield ------------------------------------------- */

/* #starfield { */
/*   position: fixed; */
/*   inset: 0; */
/*   z-index: -1; */
/*   pointer-events: none; */
/*   opacity: 0.6; */
/* } */
/**/
/* @media (prefers-color-scheme: light) { */
/*   #starfield { */
/*     display: none; */
/*   } */
/* } */

/* --- Starfield ------------------------------------------- */

#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

#starfield::before,
#starfield::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: nebula-breathe 14s ease-in-out infinite alternate;
}

#starfield::before {
  width: 600px;
  height: 350px;
  top: 10%;
  left: 15%;
  background: radial-gradient(ellipse at center,
      rgba(203, 166, 247, 0.12) 0%,
      rgba(245, 194, 231, 0.06) 45%,
      transparent 70%);
  animation-delay: 0s;
}

#starfield::after {
  width: 500px;
  height: 300px;
  top: 50%;
  right: 10%;
  background: radial-gradient(ellipse at center,
      rgba(137, 180, 250, 0.10) 0%,
      rgba(166, 227, 161, 0.05) 45%,
      transparent 70%);
  animation-delay: -7s;
}

.stars-sm,
.stars-md,
.stars-lg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.stars-sm {
  width: 1px;
  height: 1px;
  box-shadow:
    456px 51px 0 rgba(205, 214, 244, 0.41),
    1003px 457px 0 rgba(205, 214, 244, 0.2),
    419px 1385px 0 rgba(205, 214, 244, 0.41),
    2233px 178px 0 rgba(205, 214, 244, 0.36),
    130px 61px 0 rgba(205, 214, 244, 0.18),
    952px 1034px 0 rgba(205, 214, 244, 0.36),
    2298px 407px 0 rgba(205, 214, 244, 0.4),
    2232px 859px 0 rgba(205, 214, 244, 0.23),
    2413px 569px 0 rgba(205, 214, 244, 0.43),
    26px 326px 0 rgba(205, 214, 244, 0.39),
    1393px 569px 0 rgba(205, 214, 244, 0.2),
    1378px 209px 0 rgba(205, 214, 244, 0.18),
    396px 735px 0 rgba(205, 214, 244, 0.45),
    2472px 541px 0 rgba(205, 214, 244, 0.43),
    1881px 1098px 0 rgba(205, 214, 244, 0.19),
    1550px 161px 0 rgba(205, 214, 244, 0.34),
    2533px 740px 0 rgba(205, 214, 244, 0.35),
    284px 93px 0 rgba(205, 214, 244, 0.38),
    1185px 163px 0 rgba(205, 214, 244, 0.45),
    413px 778px 0 rgba(205, 214, 244, 0.25),
    1494px 333px 0 rgba(205, 214, 244, 0.28),
    858px 1372px 0 rgba(205, 214, 244, 0.24),
    292px 1247px 0 rgba(205, 214, 244, 0.37),
    2187px 501px 0 rgba(205, 214, 244, 0.21),
    1554px 552px 0 rgba(205, 214, 244, 0.5),
    2281px 449px 0 rgba(205, 214, 244, 0.39),
    229px 469px 0 rgba(205, 214, 244, 0.44),
    1292px 821px 0 rgba(205, 214, 244, 0.24),
    864px 1161px 0 rgba(205, 214, 244, 0.46),
    1288px 435px 0 rgba(205, 214, 244, 0.38),
    1620px 1316px 0 rgba(205, 214, 244, 0.31),
    1084px 285px 0 rgba(205, 214, 244, 0.24),
    2299px 1103px 0 rgba(205, 214, 244, 0.24),
    2394px 877px 0 rgba(205, 214, 244, 0.46),
    1635px 741px 0 rgba(205, 214, 244, 0.23),
    566px 1043px 0 rgba(205, 214, 244, 0.32),
    192px 224px 0 rgba(205, 214, 244, 0.2),
    655px 1393px 0 rgba(205, 214, 244, 0.3),
    260px 788px 0 rgba(205, 214, 244, 0.28),
    1917px 1083px 0 rgba(205, 214, 244, 0.24),
    2266px 23px 0 rgba(205, 214, 244, 0.39),
    469px 1396px 0 rgba(205, 214, 244, 0.46),
    1092px 1312px 0 rgba(205, 214, 244, 0.27),
    1202px 890px 0 rgba(205, 214, 244, 0.21),
    13px 539px 0 rgba(205, 214, 244, 0.49),
    731px 1039px 0 rgba(205, 214, 244, 0.47),
    1222px 1308px 0 rgba(205, 214, 244, 0.33),
    814px 313px 0 rgba(205, 214, 244, 0.28),
    661px 1104px 0 rgba(205, 214, 244, 0.48),
    2172px 1px 0 rgba(205, 214, 244, 0.36),
    2001px 39px 0 rgba(205, 214, 244, 0.19),
    1486px 629px 0 rgba(205, 214, 244, 0.23),
    986px 1161px 0 rgba(205, 214, 244, 0.48),
    350px 995px 0 rgba(205, 214, 244, 0.44),
    2181px 257px 0 rgba(205, 214, 244, 0.19),
    1946px 1125px 0 rgba(205, 214, 244, 0.21),
    2161px 1242px 0 rgba(205, 214, 244, 0.3),
    867px 1104px 0 rgba(205, 214, 244, 0.41),
    823px 638px 0 rgba(205, 214, 244, 0.29),
    1529px 897px 0 rgba(205, 214, 244, 0.46),
    1849px 247px 0 rgba(205, 214, 244, 0.24),
    262px 692px 0 rgba(205, 214, 244, 0.16),
    2268px 471px 0 rgba(205, 214, 244, 0.36),
    29px 145px 0 rgba(205, 214, 244, 0.4),
    241px 468px 0 rgba(205, 214, 244, 0.17),
    128px 676px 0 rgba(205, 214, 244, 0.17),
    974px 570px 0 rgba(205, 214, 244, 0.38),
    877px 1104px 0 rgba(205, 214, 244, 0.2),
    2338px 1180px 0 rgba(205, 214, 244, 0.32),
    1937px 833px 0 rgba(205, 214, 244, 0.22),
    397px 1349px 0 rgba(205, 214, 244, 0.3),
    1734px 841px 0 rgba(205, 214, 244, 0.31),
    221px 1379px 0 rgba(205, 214, 244, 0.38),
    403px 124px 0 rgba(205, 214, 244, 0.29),
    1389px 223px 0 rgba(205, 214, 244, 0.24),
    779px 1098px 0 rgba(205, 214, 244, 0.31),
    1728px 375px 0 rgba(205, 214, 244, 0.25),
    1023px 154px 0 rgba(205, 214, 244, 0.31),
    2254px 200px 0 rgba(205, 214, 244, 0.17),
    2214px 30px 0 rgba(205, 214, 244, 0.49),
    968px 340px 0 rgba(205, 214, 244, 0.29),
    1971px 437px 0 rgba(205, 214, 244, 0.45),
    240px 337px 0 rgba(205, 214, 244, 0.28),
    1599px 543px 0 rgba(205, 214, 244, 0.47),
    1863px 584px 0 rgba(205, 214, 244, 0.3),
    2276px 1355px 0 rgba(205, 214, 244, 0.4),
    634px 388px 0 rgba(205, 214, 244, 0.25),
    239px 1186px 0 rgba(205, 214, 244, 0.41),
    249px 642px 0 rgba(205, 214, 244, 0.17),
    2392px 976px 0 rgba(205, 214, 244, 0.33),
    2175px 322px 0 rgba(205, 214, 244, 0.17),
    2080px 164px 0 rgba(205, 214, 244, 0.45),
    280px 1218px 0 rgba(205, 214, 244, 0.17),
    963px 826px 0 rgba(205, 214, 244, 0.19),
    2333px 504px 0 rgba(205, 214, 244, 0.35),
    162px 1268px 0 rgba(205, 214, 244, 0.18),
    2390px 1157px 0 rgba(205, 214, 244, 0.33),
    1068px 418px 0 rgba(205, 214, 244, 0.38),
    1286px 488px 0 rgba(205, 214, 244, 0.24),
    536px 1375px 0 rgba(205, 214, 244, 0.38),
    1872px 647px 0 rgba(205, 214, 244, 0.48),
    297px 19px 0 rgba(205, 214, 244, 0.31),
    2306px 204px 0 rgba(205, 214, 244, 0.18),
    873px 1036px 0 rgba(205, 214, 244, 0.24),
    1429px 140px 0 rgba(205, 214, 244, 0.46),
    1513px 583px 0 rgba(205, 214, 244, 0.21),
    2225px 1440px 0 rgba(205, 214, 244, 0.26),
    2166px 16px 0 rgba(205, 214, 244, 0.38),
    2271px 613px 0 rgba(205, 214, 244, 0.48),
    424px 275px 0 rgba(205, 214, 244, 0.24),
    438px 1133px 0 rgba(205, 214, 244, 0.2),
    1154px 1238px 0 rgba(205, 214, 244, 0.22),
    1404px 416px 0 rgba(205, 214, 244, 0.39),
    1081px 1035px 0 rgba(205, 214, 244, 0.32),
    208px 189px 0 rgba(205, 214, 244, 0.37),
    1133px 90px 0 rgba(205, 214, 244, 0.15),
    535px 1304px 0 rgba(205, 214, 244, 0.49),
    661px 904px 0 rgba(205, 214, 244, 0.34),
    1751px 1148px 0 rgba(205, 214, 244, 0.15),
    308px 1415px 0 rgba(205, 214, 244, 0.47),
    2234px 73px 0 rgba(205, 214, 244, 0.44),
    2385px 1131px 0 rgba(205, 214, 244, 0.2),
    522px 85px 0 rgba(205, 214, 244, 0.26),
    163px 732px 0 rgba(205, 214, 244, 0.22),
    1022px 1365px 0 rgba(205, 214, 244, 0.19),
    2293px 832px 0 rgba(205, 214, 244, 0.49),
    633px 484px 0 rgba(205, 214, 244, 0.45),
    725px 844px 0 rgba(205, 214, 244, 0.16),
    1360px 843px 0 rgba(205, 214, 244, 0.43),
    1016px 546px 0 rgba(205, 214, 244, 0.21),
    442px 783px 0 rgba(205, 214, 244, 0.46),
    1927px 455px 0 rgba(205, 214, 244, 0.22),
    1885px 716px 0 rgba(205, 214, 244, 0.26),
    932px 456px 0 rgba(205, 214, 244, 0.16),
    791px 816px 0 rgba(205, 214, 244, 0.26),
    284px 571px 0 rgba(205, 214, 244, 0.27),
    2086px 818px 0 rgba(205, 214, 244, 0.39),
    2196px 678px 0 rgba(205, 214, 244, 0.48),
    472px 534px 0 rgba(205, 214, 244, 0.21),
    1087px 78px 0 rgba(205, 214, 244, 0.19),
    1779px 707px 0 rgba(205, 214, 244, 0.4),
    1284px 893px 0 rgba(205, 214, 244, 0.36),
    2094px 236px 0 rgba(205, 214, 244, 0.28),
    2361px 389px 0 rgba(205, 214, 244, 0.24),
    1786px 3px 0 rgba(205, 214, 244, 0.33),
    2205px 1406px 0 rgba(205, 214, 244, 0.4),
    807px 745px 0 rgba(205, 214, 244, 0.3),
    1352px 1276px 0 rgba(205, 214, 244, 0.26),
    510px 615px 0 rgba(205, 214, 244, 0.33),
    1672px 668px 0 rgba(205, 214, 244, 0.29),
    1211px 1135px 0 rgba(205, 214, 244, 0.19),
    1722px 1361px 0 rgba(205, 214, 244, 0.48),
    712px 1260px 0 rgba(205, 214, 244, 0.35),
    1663px 1122px 0 rgba(205, 214, 244, 0.44),
    1244px 587px 0 rgba(205, 214, 244, 0.22),
    2375px 1242px 0 rgba(205, 214, 244, 0.38),
    1904px 904px 0 rgba(205, 214, 244, 0.3),
    875px 1046px 0 rgba(205, 214, 244, 0.32),
    695px 1349px 0 rgba(205, 214, 244, 0.18),
    2111px 1359px 0 rgba(205, 214, 244, 0.37),
    1372px 191px 0 rgba(205, 214, 244, 0.44),
    962px 1377px 0 rgba(205, 214, 244, 0.26),
    815px 301px 0 rgba(205, 214, 244, 0.16),
    1002px 973px 0 rgba(205, 214, 244, 0.36),
    298px 932px 0 rgba(205, 214, 244, 0.3),
    2357px 398px 0 rgba(205, 214, 244, 0.4),
    1572px 1012px 0 rgba(205, 214, 244, 0.29),
    604px 1343px 0 rgba(205, 214, 244, 0.39),
    436px 870px 0 rgba(205, 214, 244, 0.23),
    2121px 951px 0 rgba(205, 214, 244, 0.17),
    1020px 248px 0 rgba(205, 214, 244, 0.31),
    1903px 1367px 0 rgba(205, 214, 244, 0.34),
    2289px 1219px 0 rgba(205, 214, 244, 0.26),
    1812px 1254px 0 rgba(205, 214, 244, 0.44),
    2067px 873px 0 rgba(205, 214, 244, 0.44),
    2244px 913px 0 rgba(205, 214, 244, 0.46),
    1944px 921px 0 rgba(205, 214, 244, 0.24),
    1012px 1305px 0 rgba(205, 214, 244, 0.25),
    2135px 992px 0 rgba(205, 214, 244, 0.37),
    1124px 900px 0 rgba(205, 214, 244, 0.18),
    1170px 480px 0 rgba(205, 214, 244, 0.25),
    1309px 1106px 0 rgba(205, 214, 244, 0.18),
    617px 473px 0 rgba(205, 214, 244, 0.28),
    625px 438px 0 rgba(205, 214, 244, 0.17),
    1669px 677px 0 rgba(205, 214, 244, 0.34),
    1703px 127px 0 rgba(205, 214, 244, 0.22),
    1720px 797px 0 rgba(205, 214, 244, 0.47),
    2392px 1424px 0 rgba(205, 214, 244, 0.16),
    2358px 779px 0 rgba(205, 214, 244, 0.32),
    1440px 611px 0 rgba(205, 214, 244, 0.41),
    1716px 1102px 0 rgba(205, 214, 244, 0.41),
    2236px 1235px 0 rgba(205, 214, 244, 0.46),
    1999px 449px 0 rgba(205, 214, 244, 0.25),
    1989px 59px 0 rgba(205, 214, 244, 0.29),
    1656px 338px 0 rgba(205, 214, 244, 0.44),
    522px 1274px 0 rgba(205, 214, 244, 0.34),
    1613px 1212px 0 rgba(205, 214, 244, 0.35),
    111px 171px 0 rgba(205, 214, 244, 0.37),
    555px 945px 0 rgba(205, 214, 244, 0.21),
    1065px 776px 0 rgba(205, 214, 244, 0.26),
    1862px 669px 0 rgba(205, 214, 244, 0.27),
    1552px 569px 0 rgba(205, 214, 244, 0.41),
    1726px 516px 0 rgba(205, 214, 244, 0.44),
    1926px 39px 0 rgba(205, 214, 244, 0.41),
    213px 716px 0 rgba(205, 214, 244, 0.23),
    281px 1334px 0 rgba(205, 214, 244, 0.16),
    127px 506px 0 rgba(205, 214, 244, 0.22),
    83px 1272px 0 rgba(205, 214, 244, 0.2),
    517px 969px 0 rgba(205, 214, 244, 0.38),
    2310px 446px 0 rgba(205, 214, 244, 0.31),
    1049px 755px 0 rgba(205, 214, 244, 0.21),
    2487px 234px 0 rgba(205, 214, 244, 0.42),
    670px 637px 0 rgba(205, 214, 244, 0.19),
    105px 638px 0 rgba(205, 214, 244, 0.35),
    1537px 812px 0 rgba(205, 214, 244, 0.48),
    812px 155px 0 rgba(205, 214, 244, 0.36),
    994px 208px 0 rgba(205, 214, 244, 0.39),
    1235px 1401px 0 rgba(205, 214, 244, 0.36),
    495px 1159px 0 rgba(205, 214, 244, 0.42),
    1422px 1091px 0 rgba(205, 214, 244, 0.3),
    1517px 141px 0 rgba(205, 214, 244, 0.33),
    1397px 25px 0 rgba(205, 214, 244, 0.45),
    2007px 216px 0 rgba(205, 214, 244, 0.3),
    1483px 1301px 0 rgba(205, 214, 244, 0.46),
    1883px 313px 0 rgba(205, 214, 244, 0.3),
    2137px 1332px 0 rgba(205, 214, 244, 0.24),
    2204px 990px 0 rgba(205, 214, 244, 0.31),
    2426px 549px 0 rgba(205, 214, 244, 0.26),
    1005px 177px 0 rgba(205, 214, 244, 0.25),
    1846px 499px 0 rgba(205, 214, 244, 0.41),
    2334px 1249px 0 rgba(205, 214, 244, 0.38),
    1377px 58px 0 rgba(205, 214, 244, 0.32),
    1331px 372px 0 rgba(205, 214, 244, 0.32),
    1453px 529px 0 rgba(205, 214, 244, 0.27),
    2441px 1436px 0 rgba(205, 214, 244, 0.46),
    2276px 20px 0 rgba(205, 214, 244, 0.33),
    782px 175px 0 rgba(205, 214, 244, 0.23),
    1664px 1000px 0 rgba(205, 214, 244, 0.34),
    984px 1414px 0 rgba(205, 214, 244, 0.32),
    2010px 917px 0 rgba(205, 214, 244, 0.43),
    381px 602px 0 rgba(205, 214, 244, 0.23),
    996px 627px 0 rgba(205, 214, 244, 0.38),
    1511px 969px 0 rgba(205, 214, 244, 0.34),
    1408px 871px 0 rgba(205, 214, 244, 0.5),
    2254px 677px 0 rgba(205, 214, 244, 0.27),
    1858px 554px 0 rgba(205, 214, 244, 0.26),
    944px 247px 0 rgba(205, 214, 244, 0.4),
    1292px 244px 0 rgba(205, 214, 244, 0.41),
    758px 392px 0 rgba(205, 214, 244, 0.23),
    1983px 566px 0 rgba(205, 214, 244, 0.4),
    2148px 1222px 0 rgba(205, 214, 244, 0.25),
    411px 397px 0 rgba(205, 214, 244, 0.25),
    1478px 367px 0 rgba(205, 214, 244, 0.26),
    2187px 259px 0 rgba(205, 214, 244, 0.25),
    223px 1133px 0 rgba(205, 214, 244, 0.25),
    517px 1306px 0 rgba(205, 214, 244, 0.45),
    2010px 210px 0 rgba(205, 214, 244, 0.46),
    2351px 582px 0 rgba(205, 214, 244, 0.31),
    1804px 697px 0 rgba(205, 214, 244, 0.21),
    210px 517px 0 rgba(205, 214, 244, 0.48),
    1956px 233px 0 rgba(205, 214, 244, 0.44),
    1641px 1007px 0 rgba(205, 214, 244, 0.18),
    219px 310px 0 rgba(205, 214, 244, 0.2),
    2305px 622px 0 rgba(205, 214, 244, 0.18),
    1016px 242px 0 rgba(205, 214, 244, 0.35),
    1704px 1241px 0 rgba(205, 214, 244, 0.36),
    2533px 462px 0 rgba(205, 214, 244, 0.42),
    1558px 922px 0 rgba(205, 214, 244, 0.47),
    1217px 1205px 0 rgba(205, 214, 244, 0.5),
    1250px 1164px 0 rgba(205, 214, 244, 0.37),
    2497px 203px 0 rgba(205, 214, 244, 0.48),
    851px 1281px 0 rgba(205, 214, 244, 0.22),
    332px 321px 0 rgba(205, 214, 244, 0.23),
    2260px 153px 0 rgba(205, 214, 244, 0.2),
    1673px 922px 0 rgba(205, 214, 244, 0.39),
    1924px 596px 0 rgba(205, 214, 244, 0.16),
    1180px 579px 0 rgba(205, 214, 244, 0.4),
    1859px 145px 0 rgba(205, 214, 244, 0.39),
    1083px 1280px 0 rgba(205, 214, 244, 0.36),
    810px 870px 0 rgba(205, 214, 244, 0.19),
    920px 1326px 0 rgba(205, 214, 244, 0.2),
    1088px 291px 0 rgba(205, 214, 244, 0.17),
    679px 629px 0 rgba(205, 214, 244, 0.36),
    2331px 591px 0 rgba(205, 214, 244, 0.3),
    1919px 1410px 0 rgba(205, 214, 244, 0.26),
    1648px 557px 0 rgba(205, 214, 244, 0.33),
    2022px 896px 0 rgba(205, 214, 244, 0.18),
    163px 884px 0 rgba(205, 214, 244, 0.41),
    2472px 512px 0 rgba(205, 214, 244, 0.16),
    937px 1380px 0 rgba(205, 214, 244, 0.44),
    2356px 1202px 0 rgba(205, 214, 244, 0.48),
    1103px 1180px 0 rgba(205, 214, 244, 0.16),
    717px 963px 0 rgba(205, 214, 244, 0.33),
    1811px 569px 0 rgba(205, 214, 244, 0.21),
    2397px 892px 0 rgba(205, 214, 244, 0.37),
    2014px 186px 0 rgba(205, 214, 244, 0.31),
    1672px 682px 0 rgba(205, 214, 244, 0.26),
    428px 329px 0 rgba(205, 214, 244, 0.27),
    2029px 590px 0 rgba(205, 214, 244, 0.38),
    1640px 1126px 0 rgba(205, 214, 244, 0.16),
    360px 644px 0 rgba(205, 214, 244, 0.24),
    474px 827px 0 rgba(205, 214, 244, 0.45),
    4px 1346px 0 rgba(205, 214, 244, 0.45),
    1892px 846px 0 rgba(205, 214, 244, 0.17),
    2123px 740px 0 rgba(205, 214, 244, 0.37),
    2041px 1280px 0 rgba(205, 214, 244, 0.3),
    211px 416px 0 rgba(205, 214, 244, 0.24),
    536px 589px 0 rgba(205, 214, 244, 0.3),
    1985px 248px 0 rgba(205, 214, 244, 0.16),
    2493px 490px 0 rgba(205, 214, 244, 0.4),
    1272px 1128px 0 rgba(205, 214, 244, 0.15),
    1671px 190px 0 rgba(205, 214, 244, 0.23),
    464px 945px 0 rgba(205, 214, 244, 0.48),
    630px 1020px 0 rgba(205, 214, 244, 0.48),
    1195px 1042px 0 rgba(205, 214, 244, 0.4),
    1701px 988px 0 rgba(205, 214, 244, 0.49),
    998px 935px 0 rgba(205, 214, 244, 0.34),
    1571px 390px 0 rgba(205, 214, 244, 0.47),
    2081px 279px 0 rgba(205, 214, 244, 0.45),
    1131px 849px 0 rgba(205, 214, 244, 0.27);
  animation: twinkle-sm 8s ease-in-out infinite alternate,
    drift-sm 200s linear infinite;
}

.stars-md {
  width: 1.5px;
  height: 1.5px;
  box-shadow:
    2079px 547px 0 rgba(205, 214, 244, 0.67),
    1158px 611px 0 rgba(205, 214, 244, 0.68),
    2375px 1351px 0 rgba(205, 214, 244, 0.52),
    608px 914px 0 rgba(205, 214, 244, 0.54),
    1413px 680px 0 rgba(205, 214, 244, 0.55),
    2225px 772px 0 rgba(205, 214, 244, 0.5),
    1318px 386px 0 rgba(205, 214, 244, 0.74),
    978px 1171px 0 rgba(205, 214, 244, 0.47),
    1682px 89px 0 rgba(205, 214, 244, 0.44),
    1937px 780px 0 rgba(205, 214, 244, 0.47),
    623px 1014px 0 rgba(205, 214, 244, 0.73),
    517px 1028px 0 rgba(205, 214, 244, 0.73),
    1359px 205px 0 rgba(205, 214, 244, 0.69),
    1803px 204px 0 rgba(205, 214, 244, 0.54),
    1871px 31px 0 rgba(205, 214, 244, 0.63),
    1679px 1340px 0 rgba(205, 214, 244, 0.74),
    306px 961px 0 rgba(205, 214, 244, 0.65),
    1085px 693px 0 rgba(205, 214, 244, 0.58),
    1628px 1330px 0 rgba(205, 214, 244, 0.34),
    1345px 1381px 0 rgba(205, 214, 244, 0.69),
    1556px 648px 0 rgba(205, 214, 244, 0.58),
    1998px 1108px 0 rgba(205, 214, 244, 0.32),
    280px 480px 0 rgba(205, 214, 244, 0.58),
    1177px 465px 0 rgba(205, 214, 244, 0.64),
    1777px 201px 0 rgba(205, 214, 244, 0.64),
    411px 908px 0 rgba(205, 214, 244, 0.37),
    1226px 59px 0 rgba(205, 214, 244, 0.32),
    229px 600px 0 rgba(205, 214, 244, 0.46),
    1764px 298px 0 rgba(205, 214, 244, 0.41),
    1687px 1159px 0 rgba(205, 214, 244, 0.61),
    737px 348px 0 rgba(205, 214, 244, 0.38),
    2496px 783px 0 rgba(205, 214, 244, 0.58),
    986px 1019px 0 rgba(205, 214, 244, 0.71),
    586px 475px 0 rgba(205, 214, 244, 0.51),
    1040px 941px 0 rgba(205, 214, 244, 0.41),
    38px 952px 0 rgba(205, 214, 244, 0.71),
    2238px 323px 0 rgba(205, 214, 244, 0.33),
    1415px 1203px 0 rgba(205, 214, 244, 0.43),
    1737px 1413px 0 rgba(205, 214, 244, 0.41),
    1237px 407px 0 rgba(205, 214, 244, 0.75),
    1979px 218px 0 rgba(205, 214, 244, 0.41),
    2342px 735px 0 rgba(205, 214, 244, 0.56),
    1209px 44px 0 rgba(205, 214, 244, 0.74),
    1621px 562px 0 rgba(205, 214, 244, 0.3),
    200px 1241px 0 rgba(205, 214, 244, 0.64),
    1172px 471px 0 rgba(205, 214, 244, 0.57),
    1443px 448px 0 rgba(205, 214, 244, 0.59),
    2543px 513px 0 rgba(205, 214, 244, 0.6),
    560px 1286px 0 rgba(205, 214, 244, 0.34),
    161px 632px 0 rgba(205, 214, 244, 0.65),
    136px 1186px 0 rgba(205, 214, 244, 0.46),
    538px 184px 0 rgba(205, 214, 244, 0.71),
    1338px 850px 0 rgba(205, 214, 244, 0.38),
    541px 1104px 0 rgba(205, 214, 244, 0.69),
    1498px 1087px 0 rgba(205, 214, 244, 0.53),
    1116px 336px 0 rgba(205, 214, 244, 0.42),
    1973px 604px 0 rgba(205, 214, 244, 0.64),
    1387px 235px 0 rgba(205, 214, 244, 0.51),
    308px 288px 0 rgba(205, 214, 244, 0.64),
    924px 1385px 0 rgba(205, 214, 244, 0.63),
    1627px 1141px 0 rgba(205, 214, 244, 0.46),
    1616px 28px 0 rgba(205, 214, 244, 0.42),
    506px 931px 0 rgba(205, 214, 244, 0.47),
    1073px 1197px 0 rgba(205, 214, 244, 0.47),
    1521px 221px 0 rgba(205, 214, 244, 0.6),
    1931px 51px 0 rgba(205, 214, 244, 0.58),
    2299px 671px 0 rgba(205, 214, 244, 0.71),
    906px 1326px 0 rgba(205, 214, 244, 0.33),
    1901px 1435px 0 rgba(205, 214, 244, 0.44),
    1672px 238px 0 rgba(205, 214, 244, 0.36),
    152px 623px 0 rgba(205, 214, 244, 0.75),
    475px 199px 0 rgba(205, 214, 244, 0.41),
    2201px 277px 0 rgba(205, 214, 244, 0.47),
    1519px 1373px 0 rgba(205, 214, 244, 0.73),
    2212px 858px 0 rgba(205, 214, 244, 0.56),
    632px 849px 0 rgba(205, 214, 244, 0.59),
    2004px 1260px 0 rgba(205, 214, 244, 0.48),
    1145px 67px 0 rgba(205, 214, 244, 0.61),
    889px 908px 0 rgba(205, 214, 244, 0.5),
    967px 742px 0 rgba(205, 214, 244, 0.34),
    1504px 1115px 0 rgba(205, 214, 244, 0.71),
    1469px 124px 0 rgba(205, 214, 244, 0.48),
    777px 250px 0 rgba(205, 214, 244, 0.73),
    1862px 187px 0 rgba(205, 214, 244, 0.6),
    2445px 43px 0 rgba(205, 214, 244, 0.32),
    1366px 498px 0 rgba(205, 214, 244, 0.74),
    2312px 420px 0 rgba(205, 214, 244, 0.33),
    2270px 424px 0 rgba(205, 214, 244, 0.56),
    954px 672px 0 rgba(205, 214, 244, 0.65),
    2441px 5px 0 rgba(205, 214, 244, 0.42),
    592px 266px 0 rgba(205, 214, 244, 0.54),
    714px 225px 0 rgba(205, 214, 244, 0.6),
    105px 269px 0 rgba(205, 214, 244, 0.31),
    974px 1205px 0 rgba(205, 214, 244, 0.45),
    713px 543px 0 rgba(205, 214, 244, 0.32),
    1724px 1077px 0 rgba(205, 214, 244, 0.35),
    260px 975px 0 rgba(205, 214, 244, 0.5),
    1482px 1051px 0 rgba(205, 214, 244, 0.57),
    1851px 1031px 0 rgba(205, 214, 244, 0.4),
    2519px 88px 0 rgba(205, 214, 244, 0.63),
    2135px 617px 0 rgba(205, 214, 244, 0.51),
    127px 124px 0 rgba(205, 214, 244, 0.75),
    1645px 873px 0 rgba(205, 214, 244, 0.61),
    2008px 908px 0 rgba(205, 214, 244, 0.33),
    330px 659px 0 rgba(205, 214, 244, 0.57),
    269px 258px 0 rgba(205, 214, 244, 0.42),
    2397px 1123px 0 rgba(205, 214, 244, 0.62),
    1560px 1223px 0 rgba(205, 214, 244, 0.54),
    1858px 1035px 0 rgba(205, 214, 244, 0.57),
    406px 1437px 0 rgba(205, 214, 244, 0.35),
    2258px 440px 0 rgba(205, 214, 244, 0.49),
    935px 847px 0 rgba(205, 214, 244, 0.45),
    1857px 816px 0 rgba(205, 214, 244, 0.49),
    389px 640px 0 rgba(205, 214, 244, 0.49),
    1044px 766px 0 rgba(205, 214, 244, 0.73),
    1942px 137px 0 rgba(205, 214, 244, 0.34),
    349px 190px 0 rgba(205, 214, 244, 0.49),
    1526px 266px 0 rgba(205, 214, 244, 0.55),
    2402px 1150px 0 rgba(205, 214, 244, 0.55),
    500px 841px 0 rgba(205, 214, 244, 0.46);
  animation: twinkle-md 11s ease-in-out infinite alternate,
    drift-md 120s linear infinite;
}

.stars-lg {
  width: 2px;
  height: 2px;
  box-shadow:
    1732px 105px 0 rgba(205, 214, 244, 0.94),
    2459px 639px 0 rgba(205, 214, 244, 0.72),
    2367px 1039px 0 rgba(205, 214, 244, 0.67),
    1975px 459px 0 rgba(205, 214, 244, 0.9),
    1434px 1139px 0 rgba(205, 214, 244, 0.73),
    1141px 1175px 0 rgba(205, 214, 244, 0.68),
    1757px 1148px 0 rgba(205, 214, 244, 0.94),
    2546px 1256px 0 rgba(205, 214, 244, 0.84),
    2280px 53px 0 rgba(205, 214, 244, 0.81),
    1095px 59px 0 rgba(205, 214, 244, 0.66),
    1265px 695px 0 rgba(205, 214, 244, 0.72),
    743px 293px 0 rgba(205, 214, 244, 0.8),
    1641px 142px 0 rgba(205, 214, 244, 0.65),
    125px 187px 0 rgba(205, 214, 244, 0.86),
    881px 770px 0 rgba(205, 214, 244, 0.75),
    1396px 322px 0 rgba(205, 214, 244, 0.73),
    1328px 1162px 0 rgba(205, 214, 244, 0.81),
    215px 318px 0 rgba(205, 214, 244, 0.66),
    2530px 101px 0 rgba(205, 214, 244, 0.84),
    1114px 907px 0 rgba(205, 214, 244, 0.83),
    1989px 1243px 0 rgba(205, 214, 244, 0.75),
    1118px 441px 0 rgba(205, 214, 244, 0.86),
    466px 706px 0 rgba(205, 214, 244, 0.75),
    1160px 1388px 0 rgba(205, 214, 244, 0.84),
    1993px 1079px 0 rgba(205, 214, 244, 0.83),
    186px 451px 0 rgba(205, 214, 244, 0.74),
    2454px 112px 0 rgba(205, 214, 244, 0.6),
    1234px 432px 0 rgba(205, 214, 244, 0.87),
    1046px 592px 0 rgba(205, 214, 244, 0.71),
    31px 1018px 0 rgba(205, 214, 244, 0.86);
  animation: twinkle-lg 6s ease-in-out infinite alternate,
    drift-lg 75s linear infinite;
}

@keyframes twinkle-sm {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1.0;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes twinkle-md {
  0% {
    opacity: 0.5;
  }

  40% {
    opacity: 1.0;
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes twinkle-lg {
  0% {
    opacity: 1.0;
  }

  60% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.9;
  }
}

/* each layer drifts a different direction and distance */
@keyframes drift-sm {
  from {
    transform: translate(-10vw, -10vw);
  }

  to {
    transform: translate(50vw, 10vw);
  }
}

@keyframes drift-md {
  from {
    transform: translate(-10vw, -10vw);
  }

  to {
    transform: translate(100vw, 10vw);
  }
}

@keyframes drift-lg {
  from {
    transform: translate(-10vw, -10vw);
  }

  to {
    transform: translate(10vw, 10vw);
  }
}

@keyframes nebula-breathe {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  100% {
    opacity: 1.0;
    transform: scale(1.25);
  }
}

@media (prefers-color-scheme: light) {
  #starfield {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .stars-sm,
  .stars-md,
  .stars-lg,
  #starfield::before,
  #starfield::after {
    animation: none;
  }
}