/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* Prevent scrollbar appearing/disappearing from shifting the body */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --pagefind-ui-scale: 0.7;
  --footer-height: 130px;
}

@font-face {
  font-family: 'jbmono';
  src: url('/blog/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'barlow_condensedregular';
  src: url('/blog/fonts/barlowcondensed-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dejavu_sansbold';
  src: url('/blog/fonts/dejavusans-bold-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dejavu_sansbook';
  src: url('/blog/fonts/dejavusans-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  width: 860px;
  margin: 0 auto;
  background: #dbe7ed;
  color: #0d314b;
  font-family: Verdana, 'dejavu_sansbook', Tahoma, sans-serif;
  cursor: default;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
}

a {
  color: #5151ff;
  text-decoration: none;
}

a:visited {
  color: #5151ff;
}

a:hover {
  color: rgb(101, 156, 173);
}

header {
  z-index: 100;
  position: sticky;
  top: 0;
  background-image: radial-gradient(#bcbfff 1px, #eeeef9 1px);
  background-size: 5px 5px;
}

.nav-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px 5px 3px 10px;
  width: 860px;
}

nav {
  color: #5151ff;
  font-size: 16px;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff;
}

.breadcrumb-symbol {
  padding: 0 2px;
}

#search {
  width: 130px;
  position: absolute;
  top: 5px;
  right: 3px;
}

/* Pagefind widget fits inside the header */
.pagefind-ui {
  font-family: sans-serif !important;
}

.pagefind-ui__search-input {
  height: 20px !important;
  font-size: 13px !important;
  font-weight: normal !important;
  padding: 0 0 0 22px !important;
  border: 1px solid #ccc !important;
  border-radius: 10px !important;
  cursor: text;
}

.pagefind-ui__search-input:focus {
  outline: none !important;
}

.pagefind-ui__search-clear,
.pagefind-ui__result-thumb {
  display: none !important;
}

.pagefind-ui__form::before {
  top: 5.5px !important;
  left: 8px !important;
  width: 10px !important;
  height: 10px !important;
}

.pagefind-ui__drawer {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 250px !important;
  height: 255px;
  overflow-y: auto;
  background: #fdf3be;
  color: #0d314b;
  border: 1px solid #ccc;
  z-index: 999;
}

.pagefind-ui__drawer::-webkit-scrollbar {
  width: 8px;
}

.pagefind-ui__drawer::-webkit-scrollbar-track {
  background: #fdf3be;
}

.pagefind-ui__drawer::-webkit-scrollbar-thumb {
  background-color: #afc7d6;
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
}

.pagefind-ui__drawer::-webkit-scrollbar-thumb:hover {
  background-color: #94b1c3;
}

.pagefind-ui__message {
  padding: 0 0 8px 0 !important;
  font-size: 13px !important;
  color: #0D314B !important;
}

.pagefind-ui__results-area {
  min-width: unset !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 10px 8px 10px 10px !important;
}

.pagefind-ui__result {
  padding: 5px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.pagefind-ui__result:last-of-type {
  border-bottom: none !important;
}

.pagefind-ui__result-inner {
  margin-top: 0 !important;
}

.pagefind-ui__result-excerpt {
  font-size: 13px !important;
  min-width: 0;
  color: #0D314B !important;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.pagefind-ui__result-excerpt mark {
  background: #e5eef4 !important;
  color: #0D314B !important;
}

.pagefind-ui__result-title,
.pagefind-ui__result-link {
  font-size: 13px !important;
}

.pagefind-ui__result-link {
  color: #0D314B !important;
}

.pagefind-ui__button {
  margin-top: 14px !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: underline;
  background: none !important;
  height: unset !important;
}

h1,
.post-title {
  font-size: 18px;
  color: rgba(13, 49, 75, 0.8);
  font-family: Verdana, 'dejavu_sansbold', Tahoma, sans-serif;
}

.date {
  font-size: 16px;
  color: rgba(13, 49, 75, 0.7);
}

.info-toggle {
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  opacity: 0.6;
  user-select: none;
  margin-top: -0.6px;
}

.info-toggle:hover {
  opacity: 1;
}

.edited-date {
  font-size: 16px;
  color: rgba(13, 49, 75, 0.7);
  display: flex;
  gap: 10px;
}

.edited-date+.date {
  margin-top: 0;
}

.edited-time-of-root-pages {
  margin-top: 2em;
}

p {
  margin-top: 1em;
  font-size: 18px;
}

main {
  padding: 0 10px calc(var(--footer-height) + 50px) 10px;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh + 15px);
}

h2,
h3,
h4,
h5,
h6 {
  font-size: 18px;
  font-weight: normal;
  color: rgba(13, 49, 75, 0.8) !important;
}

.header-anchor {
  margin-left: 3px;
}

footer {
  z-index: 100;
  position: fixed;
  bottom: 0;
  border-top: 1.5px solid #0d314b;
  background: #dbe7ed;
}

#footer-container {
  padding: 10px 5px 10px 10px;
  width: 860px;
  font-size: 16px;
  position: relative;
  list-style-type: square;
  list-style-position: inside;
}

#theme-toggle {
  position: absolute;
  top: 5px;
  right: 11px;
  display: flex;
  gap: 15px;
}

#theme-toggle span {
  cursor: pointer;
  font-size: 20px;
}

#h80h-npc {
  position: absolute;
  right: 7px;
  bottom: 12px;
  display: flex;
  gap: 7px;
  align-items: center;
}

#h80h-dialogue {
  font-size: 14px;
  color: rgba(110, 110, 179, 0.8);
  border: 1px solid rgba(110, 110, 179, 0.8);
  border-radius: 7px;
  padding: 1px 5px;
  background: rgb(241, 243, 255);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 5px;
}

#clover {
  font-size: 10px;
  margin-bottom: -0.5px;
}

#h80h-favi {
  width: 20px;
  height: 20px;
  cursor: help;
  margin-top: -1px;
}

@media(max-width: 834px) {
  body {
    max-width: 100vw;
  }

  header {
    display: block;
  }

  .nav-search-wrap {
    max-width: 100vw;
    padding: 3px 8px 3px 13px;
  }

  #footer-container {
    max-width: 100vw;
  }

  #theme-toggle {
    right: 13px;
  }

  #search {
    width: 120px;
    right: 6px;
  }

  main {
    padding: 0 13px calc(var(--footer-height) + 55px) 13px;
    position: relative;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  #footer-container {
    padding: 10px 8px 23px 13px;
  }
  
  #footer-container li {
    max-width: 300px;
  }

  #h80h-npc {
    right: 9px;
    bottom: 25px;
    flex-direction: column;
    align-items: unset;
    gap: 5px;
  }

  #h80h-dialogue {
    padding: 2px 7px;
    max-width: 300px;
  }

  #h80h-favi {
    align-self: flex-end;
    margin-top: unset;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    background-color: #0f172a;
  }

  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) footer {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #e2e8f0;
  }

  :root:not([data-theme="light"]) h1 {
    color: #e2e8f0;
  }

  :root:not([data-theme="light"]) header {
    background-image: radial-gradient(#5a60a8 1px, #1a1d47 1px);
  }

  :root:not([data-theme="light"]) nav,
  :root:not([data-theme="light"]) nav a {
    color: #cbd5e1 !important;
    text-shadow: 1px 1px 0 #515194, 1px -1px 0 #515194, -1px 1px 0 #515194, -1px -1px 0 #515194, 1px 0px 0 #515194, 0px 1px 0 #515194, -1px 0px 0 #515194, 0px -1px 0 #515194;
  }

  :root:not([data-theme="light"]) nav a:hover {
    color: #e28099 !important;
  }

  :root:not([data-theme="light"]) .pagefind-ui__search-input {
    background: #5c6d90 !important;
    border-color: #464f61 !important;
    color: #fff;
  }

  :root:not([data-theme="light"]) .pagefind-ui__form::before {
    background-color: #fff !important;
  }

  :root:not([data-theme="light"]) .pagefind-ui__drawer,
  :root:not([data-theme="light"]) .pagefind-ui__drawer::-webkit-scrollbar-track {
    background: #dcc7ed;
  }

  :root:not([data-theme="light"]) .pagefind-ui__drawer::-webkit-scrollbar-thumb {
    background-color: #848f96;
  }

  :root:not([data-theme="light"]) .pagefind-ui__drawer::-webkit-scrollbar-thumb:hover {
    background-color: #616f76;
  }

  :root:not([data-theme="light"]) .pagefind-ui__result-excerpt mark {
    background: #baccc3 !important;
  }

  :root:not([data-theme="light"]) .date,
  :root:not([data-theme="light"]) .edited-date {
    color: #94a3b8;
  }

  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) h5,
  :root:not([data-theme="light"]) h6 {
    color: #e2e8f0 !important;
  }

  :root:not([data-theme="light"]) #h80h-dialogue {
    background: #5e5f9e;
    color: #cbcdf7;
    border-color: rgb(62, 62, 119);
  }

  :root:not([data-theme="light"]) #sweep-btn {
    border-color: rgba(226, 232, 240, 0.6);
    color: rgba(226, 232, 240, 0.4);
  }

  :root:not([data-theme="light"]) #sweep-btn:hover {
    border-color: rgba(226, 232, 240, 0.4);
    color: rgba(226, 232, 240, 0.6);
  }
}

[data-theme="dark"] {
  background-color: #0f172a;
}

[data-theme="dark"] body,
[data-theme="dark"] footer {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: #e2e8f0;
}

[data-theme="dark"] h1 {
  color: #e2e8f0;
}

[data-theme="dark"] header {
  background-image: radial-gradient(#5a60a8 1px, #1a1d47 1px);
}

[data-theme="dark"] nav,
[data-theme="dark"] nav a {
  color: #cbd5e1 !important;
  text-shadow: 1px 1px 0 #515194, 1px -1px 0 #515194, -1px 1px 0 #515194, -1px -1px 0 #515194, 1px 0px 0 #515194, 0px 1px 0 #515194, -1px 0px 0 #515194, 0px -1px 0 #515194;
}

[data-theme="dark"] nav a:hover {
  color: #e28099 !important;
}

[data-theme="dark"] .pagefind-ui__search-input {
  background: #5c6d90 !important;
  border-color: #464f61 !important;
  color: #fff;
}

[data-theme="dark"] .pagefind-ui__form::before {
  background-color: #fff !important;
}

[data-theme="dark"] .pagefind-ui__drawer,
[data-theme="dark"] .pagefind-ui__drawer::-webkit-scrollbar-track {
  background: #dcc7ed;
}

[data-theme="dark"] .pagefind-ui__drawer::-webkit-scrollbar-thumb {
  background-color: #848f96;
}

[data-theme="dark"] .pagefind-ui__drawer::-webkit-scrollbar-thumb:hover {
  background-color: #616f76;
}

[data-theme="dark"] .pagefind-ui__result-excerpt mark {
  background: #baccc3 !important;
}

[data-theme="dark"] .date,
[data-theme="dark"] .edited-date {
  color: #94a3b8;
}

[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] #h80h-dialogue {
  background: #5e5f9e;
  color: #cbcdf7;
  border-color: rgb(62, 62, 119);
}

[data-theme="dark"] #sweep-btn {
  border-color: rgba(226, 232, 240, 0.6);
  color: rgba(226, 232, 240, 0.4);
}

[data-theme="dark"] #sweep-btn:hover {
  border-color: rgba(226, 232, 240, 0.4);
  color: rgba(226, 232, 240, 0.6);
}

/* NPC dialogue animation */
@keyframes dialogue-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialogue-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(2px);
  }
}

#h80h-dialogue {
  opacity: 0;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

#h80h-dialogue.dialogue-show {
  animation-name: dialogue-in;
}

#h80h-dialogue.dialogue-hide {
  animation-name: dialogue-out;
}

/* Falling leaves */
.leaf {
  position: absolute;
  top: -2em;
  pointer-events: none;
  opacity: 0;
  z-index: 99;
  animation: leaf-fall linear forwards, leaf-sway ease-in-out infinite;
  animation-duration: var(--leaf-duration), var(--leaf-sway-period);
}

@keyframes leaf-fall {
  0% {
    opacity: 0.6;
    transform: translateY(0) rotate(0deg);
  }

  100% {
    opacity: 0.6;
    transform: translateY(var(--leaf-travel)) rotate(var(--leaf-rotation, 360deg));
  }
}

@keyframes leaf-sway {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: var(--leaf-sway);
  }

  100% {
    margin-left: 0;
  }
}

/* Resting leaves at the floor of main */
.leaf-resting {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
  z-index: 99;
}

/* Sweep button */
#sweep-btn {
  background: none;
  border: 1px solid rgba(13, 49, 75, 0.6);
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 11px;
  color: rgba(13, 49, 75, 0.6);
  cursor: pointer;
  font-style: italic;
  position: absolute;
  bottom: 120px;
  left: 10px;
}

#sweep-btn:hover {
  color: rgba(13, 49, 75, 0.8);
  border-color: rgba(13, 49, 75, 0.6);
}

@media(max-width: 640px) {
  #sweep-btn {
    left: 13px;
    bottom: 160px;
  }
}