@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Metal+Mania&display=swap');
.theme-light,
.theme-dark {
  --font-interface: 'Menlo', 'IBM Plex Mono', monospace;
  --ha-font-header: 'Metal Mania', cursive;
  --ha-accent: rgb(241, 66, 175);
}

.theme-light {
  --background-inline-code: rgb(240, 240, 240);
  --background-nav-alt: rgb(58, 62, 63);
  --background-nav-file-tag: rgb(203, 77, 73);
  --background-nav-selected: rgb(203, 77, 73);
  --background-nav: rgb(41, 44, 46);
  --background-primary: rgb(250, 250, 250);
  --background-tag: #b5b5b5;
  --border-inline-code: rgb(215, 215, 215);
  --code-block-background: #ffffff;
  --code-block-border: #92a1a17a;
  --interactive-accent: rgb(203, 77, 73);
  --interactive-accent-hover: rgb(151, 46, 43);
  --text-accent: rgb(203, 77, 73);
  --text-faint: rgb(150, 150, 150);
  --text-header: rgb(44, 44, 44);
  --text-highlight-bg: #b4ff0066;
  --text-inline-code: rgb(45, 45, 45);
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --text-normal: rgb(44, 44, 44);
  --text-normal-opposite: rgb(216, 216, 216);
}

.theme-dark {
  --background-inline-code: rgb(41, 44, 46);
  --background-nav-alt: rgb(0, 0, 0);
  --background-nav-file-tag: rgb(116, 190, 247);
  --background-nav-selected: rgb(73, 73, 73);
  --background-nav: rgb(0, 0, 0);
  --background-primary: rgb(0, 0, 0);
  --background-primary-alt: rgb(0, 0, 0);
  --background-tag: rgb(111, 112, 116);
  --border-inline-code: rgb(76, 76, 76);
  --code-block-background: rgb(32, 32, 32);
  --code-block-border: rgb(77, 77, 77);
  --interactive-accent: rgb(116, 190, 247);
  --interactive-accent-hover: rgb(24, 147, 242);
  --text-accent: rgb(116, 190, 247);
  --text-accent-hover: var(--ha-accent);
  --text-faint: rgb(150, 150, 150);
  --text-header: rgb(198, 213, 224);
  --text-highlight-bg: rgb(64, 73, 181);
  --text-inline-code: rgb(230, 230, 230);
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --text-normal: rgb(216, 216, 216);
  --text-normal-oppsite: rgb(44, 44, 44);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  letter-spacing: 3px;
  font-family: var(--ha-font-header);
  color: white;
  margin: 24px 0;
}

.page-header {
  letter-spacing: 3px;
  font-family: var(--ha-font-header);
  border-bottom: 1px solid slategray;
  font-size: 2.6em;
  color: white;
  line-height: 1.4em;
}

.markdown-preview-view h2 {
  color: var(--ha-accent);
  font-size: 2em;
}

.site-body-left-column-site-name {
  font-size: 450%;
  line-height: 0.8;
  font-family: var(--ha-font-header);
  color: var(--ha-accent);
}

.language-dataview {
  display: none;
}

[data-callout='gallery'] {
  background-color: transparent;
  border-left: 0 none;
  margin: 0;
}

[data-callout='gallery'] .callout-title {
  display: none;
}

[data-callout='gallery'] .callout-content {
  padding: 0;
}

[data-callout='gallery'] .callout-content p {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

[data-callout='gallery'] .callout-content p img {
  max-height: 300px;
}

[data-callout='caution'] {
  display: none;
}

.characters-index table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: block;
}

.characters-index thead {
  display: none;
}

.characters-index tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2px;
}

.characters-index tr {
  text-align: justify;
  padding: 0;
  height: 140px;
  width: 140px;
}

.characters-index td {
  display: block;
}

.characters-index td:first-child {
  height: 100px;
  background-color: #333;
}

.characters-index img {
  max-height: 140px;
  width: 100%;
}

[data-heading^='Cover::'] {
  color: transparent !important;
  font-size: 0 !important;
}

[data-heading^='Cover::'] img {
  max-height: 350px;
}