@layer base, bundles, modules;
@font-face {
  font-family: "Gloria";
  src: url("fonts/Gloria.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-MediumItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signika Negative";
  src: url("fonts/SignikaNegative-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signika Negative";
  src: url("fonts/SignikaNegative-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/*
$color-accent: oklch(81.39% 0.0733 9.17);
$color-light-xx: oklch(96.35% 0 46.08);
$color-light-x: oklch(72.41% 0.0278 46.08);
$color-mid-neutral: oklch(76.67% 0.0082 91.53);
$color-mid-tint: oklch(79.97% 0.0343 146.63);
$color-dark-x: oklch(44.63% 0.0166 207.84);
$color-dark-xx: oklch(33.28% 0.0166 207.84);
*/
@layer base {
  * {
    box-sizing: border-box;
  }
  body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Lora";
    font-size: calc(12px + 0.390625vw);
    background-color: var(--color-dark-xx);
    color: var(--color-light-xx);
  }
  p, li, blockquote {
    line-height: 1.45em;
  }
  code {
    font-size: 0.75em;
    background-color: var(--color-light-x);
    color: var(--color-dark-xx);
    padding: 0.25em;
    border-radius: 0.25em;
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-style: italic;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "Gloria";
    font-weight: normal;
    text-align: center;
  }
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1rem;
  }
  a, a:hover, a:visited {
    color: currentcolor;
    text-decoration: none;
  }
  button {
    font-family: inherit;
    font-size: inherit;
    border: none;
    width: 100%;
    display: block;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  .text-reader a {
    font-family: "Signika Negative";
    font-weight: bold;
    text-decoration: underline;
    color: var(--color-accent);
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
  }
  .text-reader a:hover {
    color: var(--color-accent-contrast);
    font-style: italic;
  }
  .text-reader .color-links-inverted a {
    color: var(--color-mid);
  }
  .text-reader .color-links-inverted a:hover {
    color: var(--color-dark-xx);
  }
  .text-reader h1, .text-reader h2, .text-reader h3, .text-reader h4, .text-reader h5, .text-reader h6 {
    margin-top: 3.33rem;
    margin-bottom: 0;
  }
  .text-reader h1::before, .text-reader h1::after, .text-reader h2::before, .text-reader h2::after, .text-reader h3::before, .text-reader h3::after, .text-reader h4::before, .text-reader h4::after, .text-reader h5::before, .text-reader h5::after, .text-reader h6::before, .text-reader h6::after {
    background-image: url(/css/header_decoration.webp);
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    filter: invert();
    content: "";
    background-size: contain;
    mix-blend-mode: overlay;
    margin-top: -0.33em;
  }
  .text-reader h1::before, .text-reader h2::before, .text-reader h3::before, .text-reader h4::before, .text-reader h5::before, .text-reader h6::before {
    transform: scaleX(-1);
    margin-right: 0.25em;
  }
  .text-reader h1::after, .text-reader h2::after, .text-reader h3::after, .text-reader h4::after, .text-reader h5::after, .text-reader h6::after {
    transform: scaleX(1);
    margin-left: 0.25em;
  }
  .text-reader blockquote {
    margin: 0;
    padding: 0;
  }
  .text-reader blockquote p {
    margin: 1rem;
    background-color: var(--color-dark-x);
    padding: 1rem;
    border-radius: 1rem;
  }
  .light-mode .text-reader h1::before, .light-mode .text-reader h1::after, .light-mode .text-reader h2::before, .light-mode .text-reader h2::after, .light-mode .text-reader h3::before, .light-mode .text-reader h3::after, .light-mode .text-reader h4::before, .light-mode .text-reader h4::after, .light-mode .text-reader h5::before, .light-mode .text-reader h5::after, .light-mode .text-reader h6::before, .light-mode .text-reader h6::after {
    filter: none;
  }
  .style-markdown-links a, .style-markdown-links-inverted a {
    font-family: "Signika Negative";
    font-weight: bold;
    text-decoration: underline;
    color: var(--color-accent);
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
  }
  .style-markdown-links a:hover, .style-markdown-links-inverted a:hover {
    color: var(--color-accent-contrast);
    font-style: italic;
  }
  .style-markdown-links-inverted a {
    color: var(--color-mid);
  }
  .style-markdown-links-inverted a:hover {
    color: var(--color-dark-xx);
  }
  .theme-runaways.dark-mode {
    --color-light-xx: oklch(90% 0.02 0);
    --color-light-x: oklch(75% 0.05 0);
    --color-accent: oklch(90% 0.175 0);
    --color-accent-contrast: oklch(90% 0.175 60);
    --color-mid: oklch(60% 0.075 0);
    --color-dark-x: oklch(35% 0.05 0);
    --color-dark-xx: oklch(15% 0.02 0);
  }
  .theme-runaways.light-mode {
    --color-dark-xx: oklch(90% 0.02 0);
    --color-dark-x: oklch(75% 0.05 0);
    --color-accent: oklch(50% 0.175 0);
    --color-accent-contrast: oklch(50% 0.175 60);
    --color-mid: oklch(80% 0.075 0);
    --color-light-x: oklch(35% 0.05 0);
    --color-light-xx: oklch(15% 0.02 0);
  }
  .theme-quizmasters.dark-mode {
    --color-light-xx: oklch(90% 0.02 40);
    --color-light-x: oklch(75% 0.05 40);
    --color-accent: oklch(90% 0.175 40);
    --color-accent-contrast: oklch(90% 0.175 100);
    --color-mid: oklch(60% 0.075 40);
    --color-dark-x: oklch(35% 0.05 40);
    --color-dark-xx: oklch(15% 0.02 40);
  }
  .theme-quizmasters.light-mode {
    --color-dark-xx: oklch(90% 0.02 40);
    --color-dark-x: oklch(75% 0.05 40);
    --color-accent: oklch(50% 0.175 40);
    --color-accent-contrast: oklch(50% 0.175 100);
    --color-mid: oklch(80% 0.075 40);
    --color-light-x: oklch(35% 0.05 40);
    --color-light-xx: oklch(15% 0.02 40);
  }
  .theme-teachers.dark-mode {
    --color-light-xx: oklch(90% 0.02 80);
    --color-light-x: oklch(75% 0.05 80);
    --color-accent: oklch(90% 0.175 80);
    --color-accent-contrast: oklch(90% 0.175 140);
    --color-mid: oklch(60% 0.075 80);
    --color-dark-x: oklch(35% 0.05 80);
    --color-dark-xx: oklch(15% 0.02 80);
  }
  .theme-teachers.light-mode {
    --color-dark-xx: oklch(90% 0.02 80);
    --color-dark-x: oklch(75% 0.05 80);
    --color-accent: oklch(50% 0.175 80);
    --color-accent-contrast: oklch(50% 0.175 140);
    --color-mid: oklch(80% 0.075 80);
    --color-light-x: oklch(35% 0.05 80);
    --color-light-xx: oklch(15% 0.02 80);
  }
  .theme-magimerchants.dark-mode {
    --color-light-xx: oklch(90% 0.02 120);
    --color-light-x: oklch(75% 0.05 120);
    --color-accent: oklch(90% 0.175 120);
    --color-accent-contrast: oklch(90% 0.175 180);
    --color-mid: oklch(60% 0.075 120);
    --color-dark-x: oklch(35% 0.05 120);
    --color-dark-xx: oklch(15% 0.02 120);
  }
  .theme-magimerchants.light-mode {
    --color-dark-xx: oklch(90% 0.02 120);
    --color-dark-x: oklch(75% 0.05 120);
    --color-accent: oklch(50% 0.175 120);
    --color-accent-contrast: oklch(50% 0.175 180);
    --color-mid: oklch(80% 0.075 120);
    --color-light-x: oklch(35% 0.05 120);
    --color-light-xx: oklch(15% 0.02 120);
  }
  .theme-sneakpeeks.dark-mode {
    --color-light-xx: oklch(90% 0.02 160);
    --color-light-x: oklch(75% 0.05 160);
    --color-accent: oklch(90% 0.175 160);
    --color-accent-contrast: oklch(90% 0.175 220);
    --color-mid: oklch(60% 0.075 160);
    --color-dark-x: oklch(35% 0.05 160);
    --color-dark-xx: oklch(15% 0.02 160);
  }
  .theme-sneakpeeks.light-mode {
    --color-dark-xx: oklch(90% 0.02 160);
    --color-dark-x: oklch(75% 0.05 160);
    --color-accent: oklch(50% 0.175 160);
    --color-accent-contrast: oklch(50% 0.175 220);
    --color-mid: oklch(80% 0.075 160);
    --color-light-x: oklch(35% 0.05 160);
    --color-light-xx: oklch(15% 0.02 160);
  }
  .theme-gamiverses.dark-mode {
    --color-light-xx: oklch(90% 0.02 200);
    --color-light-x: oklch(75% 0.05 200);
    --color-accent: oklch(90% 0.175 200);
    --color-accent-contrast: oklch(90% 0.175 140);
    --color-mid: oklch(60% 0.075 200);
    --color-dark-x: oklch(35% 0.05 200);
    --color-dark-xx: oklch(15% 0.02 200);
  }
  .theme-gamiverses.light-mode {
    --color-dark-xx: oklch(90% 0.02 200);
    --color-dark-x: oklch(75% 0.05 200);
    --color-accent: oklch(50% 0.175 200);
    --color-accent-contrast: oklch(50% 0.175 140);
    --color-mid: oklch(80% 0.075 200);
    --color-light-x: oklch(35% 0.05 200);
    --color-light-xx: oklch(15% 0.02 200);
  }
  .theme-explorers.dark-mode {
    --color-light-xx: oklch(90% 0.02 240);
    --color-light-x: oklch(75% 0.05 240);
    --color-accent: oklch(90% 0.175 240);
    --color-accent-contrast: oklch(90% 0.175 180);
    --color-mid: oklch(60% 0.075 240);
    --color-dark-x: oklch(35% 0.05 240);
    --color-dark-xx: oklch(15% 0.02 240);
  }
  .theme-explorers.light-mode {
    --color-dark-xx: oklch(90% 0.02 240);
    --color-dark-x: oklch(75% 0.05 240);
    --color-accent: oklch(50% 0.175 240);
    --color-accent-contrast: oklch(50% 0.175 180);
    --color-mid: oklch(80% 0.075 240);
    --color-light-x: oklch(35% 0.05 240);
    --color-light-xx: oklch(15% 0.02 240);
  }
  .theme-general.dark-mode, .theme-info.dark-mode {
    --color-light-xx: oklch(90% 0.02 280);
    --color-light-x: oklch(75% 0.05 280);
    --color-accent: oklch(90% 0.175 280);
    --color-accent-contrast: oklch(90% 0.175 220);
    --color-mid: oklch(60% 0.075 280);
    --color-dark-x: oklch(35% 0.05 280);
    --color-dark-xx: oklch(15% 0.02 280);
  }
  .theme-general.light-mode, .theme-info.light-mode {
    --color-dark-xx: oklch(90% 0.02 280);
    --color-dark-x: oklch(75% 0.05 280);
    --color-accent: oklch(50% 0.175 280);
    --color-accent-contrast: oklch(50% 0.175 220);
    --color-mid: oklch(80% 0.075 280);
    --color-light-x: oklch(35% 0.05 280);
    --color-light-xx: oklch(15% 0.02 280);
  }
  .theme-puzzlepages.dark-mode {
    --color-light-xx: oklch(90% 0.02 320);
    --color-light-x: oklch(75% 0.05 320);
    --color-accent: oklch(90% 0.175 320);
    --color-accent-contrast: oklch(90% 0.175 260);
    --color-mid: oklch(60% 0.075 320);
    --color-dark-x: oklch(35% 0.05 320);
    --color-dark-xx: oklch(15% 0.02 320);
  }
  .theme-puzzlepages.light-mode {
    --color-dark-xx: oklch(90% 0.02 320);
    --color-dark-x: oklch(75% 0.05 320);
    --color-accent: oklch(50% 0.175 320);
    --color-accent-contrast: oklch(50% 0.175 260);
    --color-mid: oklch(80% 0.075 320);
    --color-light-x: oklch(35% 0.05 320);
    --color-light-xx: oklch(15% 0.02 320);
  }
  .block-level-1 {
    background-color: oklch(70% 0.162 144.03deg);
    color: oklch(50% 0.162 144.03deg);
  }
  .block-level-2 {
    background-color: oklch(73.24% 0.127291 211.374deg);
    color: oklch(50% 0.127291 211.374deg);
  }
  .block-level-3 {
    background-color: oklch(70% 0.18 320deg);
    color: oklch(50% 0.18 320deg);
  }
  .block-level-4 {
    background-color: oklch(71.38% 0.1795 27.62deg);
    color: oklch(50% 0.1795 27.62deg);
  }
  .block-level-5 {
    background-color: oklch(75% 0.18 75deg);
    color: oklch(50% 0.1552 75deg);
  }
  .block-level-6 {
    background-color: oklch(71.38% 0.1795 275deg);
    color: oklch(50% 0.1795 275deg);
  }
}
@layer bundles {
  .navigation-link {
    font-family: "Gloria";
    font-weight: normal;
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
  }
  .navigation-link::before {
    content: "« ";
    visibility: hidden;
  }
  .navigation-link::after {
    content: " »";
    visibility: hidden;
  }
  .navigation-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 0.15rem;
  }
  .navigation-link:hover::before, .navigation-link:hover::after {
    visibility: visible;
  }
  .text-highlight {
    font-weight: bold;
    color: var(--color-accent);
  }
  .text-unhighlight {
    font-weight: normal;
    font-style: italic;
    color: var(--color-mid);
  }
  .no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
  .preserve-whitespace {
    white-space: pre-wrap;
  }
  .button {
    font-family: "Signika Negative";
    font-weight: bold;
    color: var(--color-dark-xx);
    background-color: var(--color-accent);
    cursor: pointer;
    text-align: center;
    display: block;
    width: 100%;
    border: none;
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
  }
  .button:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 0.15rem var(--color-dark-x));
  }
  .button-size-m {
    font-size: 0.66rem;
    border-radius: 0.4rem;
    padding: 0.66rem;
    margin: 0.66rem 0;
  }
  .block-column-and-center {
    margin: 1rem;
    max-width: 640px;
    margin: auto;
  }
  table {
    width: 100%;
    font-size: 0.66rem;
  }
  table thead {
    font-weight: bold;
  }
  table td {
    padding: 0.66rem;
  }
  table tr:nth-child(even) {
    background-color: var(--color-dark-x);
  }
  #search-results-container {
    --pagefind-ui-primary: var(--color-accent);
    --pagefind-ui-text: var(--color-light-xx);
    --pagefind-ui-background: var(--color-dark-x);
    --pagefind-ui-border: var(--color-light-x);
    --pagefind-ui-tag: var(--color-mid);
    --pagefind-ui-border-width: 0.1em;
    --pagefind-ui-border-radius: 0.35em;
    --pagefind-ui-image-border-radius: 0.28rem;
    --pagefind-ui-font: "Lora";
  }
}
@layer modules {
  .font-body {
    font-family: "Lora";
    font-weight: normal;
  }
  .font-heading {
    font-family: "Gloria";
    font-weight: normal;
  }
  .font-accent {
    font-family: "Signika Negative";
    font-weight: bold;
  }
  .font-size-s {
    font-size: 0.66rem;
  }
  .font-size-m {
    font-size: 1rem;
  }
  .font-size-l {
    font-size: 2rem;
  }
  .font-size-xl {
    font-size: 3.33rem;
  }
  .font-size-xxl {
    font-size: 5rem;
  }
  .text-style-italic {
    font-style: italic;
  }
  .align-center {
    text-align: center;
  }
  .align-left {
    text-align: left;
  }
  .align-right {
    text-align: right;
  }
  .text-shadow {
    text-shadow: -0.15rem 0.15rem var(--color-dark-x);
  }
  .text-shadow-dark {
    text-shadow: -0.1rem 0.1rem var(--color-dark-xx);
  }
  .light-mode .text-shadow {
    color: white;
    text-shadow: -0.1rem 0.1rem var(--color-light-x);
  }
  .light-mode .text-shadow-dark {
    text-shadow: -0.1rem 0.1rem var(--color-mid);
  }
  .line-height-s {
    line-height: 1em;
  }
  .heading-decorations::before, .heading-decorations::after {
    background-image: url(/css/header_decoration.webp);
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    filter: invert();
    content: "";
    background-size: contain;
    mix-blend-mode: overlay;
    margin-top: -0.33em;
  }
  .heading-decorations::before {
    transform: scaleX(-1);
    margin-right: 0.25em;
  }
  .heading-decorations::after {
    transform: scaleX(1);
    margin-left: 0.25em;
  }
  .light-mode .heading-decorations::before, .light-mode .heading-decorations::after {
    filter: none;
  }
  .bg-color-accent-contrast {
    background-color: var(--color-accent-contrast);
  }
  .bg-color-dark-xx {
    background-color: var(--color-dark-xx);
  }
  .bg-color-dark-x {
    background-color: var(--color-dark-x);
  }
  .bg-color-mid {
    background-color: var(--color-mid);
  }
  .bg-color-light-xx {
    background-color: var(--color-light-xx);
  }
  .text-color-light-xx {
    color: var(--color-light-xx);
  }
  .text-color-dark-xx {
    color: var(--color-dark-xx);
  }
  .text-color-mid {
    color: var(--color-mid);
  }
  .text-color-accent {
    color: var(--color-accent);
  }
  .text-color-accent-contrast {
    color: var(--color-accent-contrast);
  }
  .rounded-xs {
    border-radius: 0.4rem;
  }
  .rounded-s {
    border-radius: 0.66rem;
  }
  .rounded-m {
    border-radius: 1rem;
  }
  .padding-none {
    padding: 0;
  }
  .padding-xxs {
    padding: 0.15rem;
  }
  .padding-xs {
    padding: 0.4rem;
  }
  .padding-s {
    padding: 0.66rem;
  }
  .padding-m {
    padding: 1rem;
  }
  .margin-none {
    margin: 0;
  }
  .margin-s {
    margin: 0.66rem;
  }
  .margin-m {
    margin: 1rem;
  }
  .margin-vertical-s {
    margin-top: 0.66rem;
    margin-bottom: 0.66rem;
  }
  .margin-vertical-m {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .margin-top-xxxl {
    margin-top: 8rem;
  }
  .gap-none {
    gap: 0;
  }
  .gap-xs {
    gap: 0.4rem;
  }
  .gap-s {
    gap: 0.66rem;
  }
  .gap-m {
    gap: 1rem;
  }
  .height-xxxs {
    height: 1rem;
    max-height: 1rem;
  }
  .height-xxs {
    height: 1.5rem;
    max-height: 1.5rem;
  }
  .height-xs {
    height: 4rem;
    max-height: 4rem;
  }
  .height-s {
    height: 6.6rem;
    max-height: 6.6rem;
  }
  .height-m {
    height: 10rem;
    max-height: 10rem;
  }
  .height-ml {
    height: 15rem;
    max-height: 15rem;
  }
  .height-l {
    height: 20rem;
    max-height: 20rem;
  }
  .height-xl {
    height: 33.3rem;
    max-height: 33.3rem;
  }
  .maximize-height {
    height: 100%;
  }
  .maximize-width {
    width: 100%;
  }
  .limit-width-xs {
    max-width: 160px;
  }
  .limit-width-s {
    max-width: 380px;
  }
  .limit-width-m {
    max-width: 640px;
  }
  .limit-width-l {
    max-width: 960px;
  }
  .limit-width-xl {
    max-width: 1280px;
  }
  .background-cover {
    background-size: cover;
    background-position: center center;
  }
  .fade-to-bg {
    background: linear-gradient(to bottom, transparent, var(--color-dark-xx));
  }
  .background-texture {
    background-image: url(/css/bg_texture.webp);
    background-blend-mode: overlay;
  }
  .flex {
    display: flex;
    min-width: 0;
    min-height: 0;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-center {
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .flex-center-horizontal {
    justify-content: center;
  }
  .flex-center-vertical {
    align-items: center;
  }
  .flex-nocenter {
    justify-content: start;
    align-items: start;
  }
  .flex-equal-size {
    align-items: stretch;
  }
  .flex-vertical-list > li {
    width: 100%;
  }
  .flex-vertical-list > li > a {
    width: 100%;
  }
  .display-block {
    display: block;
  }
  .display-none {
    display: none;
  }
  .opacity-half {
    opacity: 0.5;
  }
  .drop-shadow-xs {
    filter: drop-shadow(0 0 1px black);
  }
  .drop-shadow-s {
    filter: drop-shadow(0 0 0.033em #333);
  }
  .shadow-border-s {
    border: 1px solid #333;
    filter: drop-shadow(0 0 0.1em #333);
  }
  .blend-overlay {
    mix-blend-mode: overlay;
  }
  .position-absolute {
    position: absolute;
  }
  .position-relative {
    position: relative;
  }
  .move-to-back {
    z-index: -1;
  }
  .padding-absolute-s {
    left: 0.66rem;
    right: 0.66rem;
    top: 0.66rem;
    bottom: 0.66rem;
  }
  .anchor-top-right {
    right: 0;
    top: 0;
  }
  .anchor-center-left {
    top: 0;
    bottom: 0;
    left: 0;
  }
  .anchor-center-right {
    top: 0;
    bottom: 0;
    right: 0;
  }
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  .block-align-center {
    margin: auto;
  }
  .remove-list-styling {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .remove-list-styling li {
    list-style-type: none;
  }
  .remove-link-styles {
    text-decoration: none;
  }
  .underline {
    text-decoration: underline;
  }
  .collapse-paragraph-margin p:first-child {
    margin-top: 0;
  }
  .collapse-paragraph-margin p:last-child {
    margin-bottom: 0;
  }
  .transition-m {
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
  }
  .hover_italic:hover {
    transition: color 0.2s, background-color 0.2s, filter 0.2s, transform 0.2s;
    color: var(--color-accent);
    font-style: italic;
  }
  .hover_popup:hover:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 0.15rem var(--color-dark-x));
  }
  .hover_pointer {
    cursor: pointer;
  }
  .hover_underline:hover {
    text-decoration: underline;
  }
  .hover_brighten:hover {
    filter: brightness(130%);
  }
  .hover_opaque:hover {
    opacity: 1;
  }
  .hover_sidearrows::before {
    content: "« ";
    visibility: hidden;
  }
  .hover_sidearrows::after {
    content: " »";
    visibility: hidden;
  }
  .hover_sidearrows:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 0.15rem;
  }
  .hover_sidearrows:hover::before, .hover_sidearrows:hover::after {
    visibility: visible;
  }
  .glow {
    filter: drop-shadow(0 0 0.33em white);
  }
  .hover_glow:hover {
    filter: drop-shadow(0 0 0.33em white);
  }
  .hover_remove-child-rotations > div {
    transition: transform 0.25s;
  }
  .hover_remove-child-rotations:hover > div {
    transform: rotate(0deg) !important;
  }
  .border-image-m {
    border-image-slice: 42 42 42 42;
    border-image-width: 1.5em;
    border-image-outset: 0.4em;
    border-image-repeat: round round;
    border-style: solid;
  }
  .border-image-white {
    border-image-source: url(/css/border_pattern_white.webp);
  }
  .border-image-black {
    border-image-source: url(/css/border_pattern_black.webp);
  }
  .faction-icon-info {
    background-image: url(/css/icons_factions.svg);
    background-position-x: 0em;
    background-position-y: 0em;
  }
  .faction-icon-explorers {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -1em;
    background-position-y: 0em;
  }
  .faction-icon-sneakpeeks {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -2em;
    background-position-y: 0em;
  }
  .faction-icon-teachers {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -3em;
    background-position-y: 0em;
  }
  .faction-icon-quizmasters {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -4em;
    background-position-y: 0em;
  }
  .faction-icon-puzzlepages {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -5em;
    background-position-y: 0em;
  }
  .faction-icon-runaways {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -6em;
    background-position-y: 0em;
  }
  .faction-icon-gamiverses {
    background-image: url(/css/icons_factions.svg);
    background-position-x: -7em;
    background-position-y: 0em;
  }
  .faction-icon-magimerchants {
    background-image: url(/css/icons_factions.svg);
    background-position-x: 0em;
    background-position-y: -1em;
  }
  .metadata-icon, .faction-icon, .store-icon {
    width: 1em;
    height: 1em;
    margin-left: 0.15em;
    margin-right: 0.15em;
    display: inline-block;
    background-size: 800%;
    filter: invert();
  }
  .light-mode .metadata-icon, .light-mode .faction-icon, .light-mode .store-icon {
    filter: none;
  }
  .metadata-icon-black, .faction-icon-black, .store-icon-block {
    filter: none;
  }
  .metadata-icon-cart {
    background-image: url(/css/icons.svg);
    background-position-x: 0em;
    background-position-y: 0em;
  }
  .metadata-icon-account {
    background-image: url(/css/icons.svg);
    background-position-x: -1em;
    background-position-y: 0em;
  }
  .metadata-icon-price {
    background-image: url(/css/icons.svg);
    background-position-x: -2em;
    background-position-y: 0em;
  }
  .metadata-icon-categories {
    background-image: url(/css/icons.svg);
    background-position-x: -3em;
    background-position-y: 0em;
  }
  .metadata-icon-duration {
    background-image: url(/css/icons.svg);
    background-position-x: -4em;
    background-position-y: 0em;
  }
  .metadata-icon-age {
    background-image: url(/css/icons.svg);
    background-position-x: -5em;
    background-position-y: 0em;
  }
  .metadata-icon-difficulty {
    background-image: url(/css/icons.svg);
    background-position-x: -6em;
    background-position-y: 0em;
  }
  .metadata-icon-setup {
    background-image: url(/css/icons.svg);
    background-position-x: -7em;
    background-position-y: 0em;
  }
  .metadata-icon-prior-wisdom {
    background-image: url(/css/icons.svg);
    background-position-x: 0em;
    background-position-y: -1em;
  }
  .metadata-icon-color {
    background-image: url(/css/icons.svg);
    background-position-x: -1em;
    background-position-y: -1em;
  }
  .metadata-icon-mature {
    background-image: url(/css/icons.svg);
    background-position-x: -2em;
    background-position-y: -1em;
  }
  .metadata-icon-textless {
    background-image: url(/css/icons.svg);
    background-position-x: -3em;
    background-position-y: -1em;
  }
  .metadata-icon-parallel-play {
    background-image: url(/css/icons.svg);
    background-position-x: -4em;
    background-position-y: -1em;
  }
  .metadata-icon-double-sided-allowed {
    background-image: url(/css/icons.svg);
    background-position-x: -5em;
    background-position-y: -1em;
  }
  .metadata-icon-double-sided-required {
    background-image: url(/css/icons.svg);
    background-position-x: -6em;
    background-position-y: -1em;
  }
  .metadata-icon-guardian {
    background-image: url(/css/icons.svg);
    background-position-x: -7em;
    background-position-y: -1em;
  }
  .metadata-icon-guardian-cant-play {
    background-image: url(/css/icons.svg);
    background-position-x: 0em;
    background-position-y: -2em;
  }
  .metadata-icon-hybrid {
    background-image: url(/css/icons.svg);
    background-position-x: -1em;
    background-position-y: -2em;
  }
  .metadata-icon-paper-fixed {
    background-image: url(/css/icons.svg);
    background-position-x: -2em;
    background-position-y: -2em;
  }
  .metadata-icon-linear {
    background-image: url(/css/icons.svg);
    background-position-x: -3em;
    background-position-y: -2em;
  }
  .metadata-icon-requirements {
    background-image: url(/css/icons.svg);
    background-position-x: -4em;
    background-position-y: -2em;
  }
  .metadata-icon-indoors {
    background-image: url(/css/icons.svg);
    background-position-x: -5em;
    background-position-y: -2em;
  }
  .metadata-icon-outdoors {
    background-image: url(/css/icons.svg);
    background-position-x: -6em;
    background-position-y: -2em;
  }
  .metadata-icon-language {
    background-image: url(/css/icons.svg);
    background-position-x: -7em;
    background-position-y: -2em;
  }
  .metadata-icon-player-count {
    background-image: url(/css/icons.svg);
    background-position-x: 0em;
    background-position-y: -3em;
  }
  .metadata-icon-single-use {
    background-image: url(/css/icons.svg);
    background-position-x: -1em;
    background-position-y: -3em;
  }
  .metadata-icon-level {
    background-image: url(/css/icons.svg);
    background-position-x: -2em;
    background-position-y: -3em;
  }
  .metadata-icon-search {
    background-image: url(/css/icons.svg);
    background-position-x: -3em;
    background-position-y: -3em;
  }
  .metadata-icon-subject {
    background-image: url(/css/icons.svg);
    background-position-x: -4em;
    background-position-y: -3em;
  }
  .metadata-icon-brand {
    background-image: url(/css/icons.svg);
    background-position-x: -5em;
    background-position-y: -3em;
  }
  .metadata-icon-customizable {
    background-image: url(/css/icons.svg);
    background-position-x: -6em;
    background-position-y: -3em;
  }
  .metadata-icon-interactive-media {
    background-image: url(/css/icons.svg);
    background-position-x: -7em;
    background-position-y: -3em;
  }
  .metadata-icon-multiplayer-mode {
    background-image: url(/css/icons.svg);
    background-position-x: 0em;
    background-position-y: -4em;
  }
  .metadata-icon-activity-structure {
    background-image: url(/css/icons.svg);
    background-position-x: -1em;
    background-position-y: -4em;
  }
  .metadata-icon-spell {
    background-image: url(/css/icons.svg);
    background-position-x: -2em;
    background-position-y: -4em;
  }
  .metadata-icon-charm {
    background-image: url(/css/icons.svg);
    background-position-x: -3em;
    background-position-y: -4em;
  }
  .store-icon {
    background-image: url(/css/logos/twwm_favicon_minimal.png);
    background-size: contain;
  }
  .show-s {
    display: none;
  }
  .show-m {
    display: none;
  }
  @media all and (max-width: 640px) {
    .hide-m {
      display: none;
    }
    .show-m {
      display: block;
    }
    .navigation-link::after {
      display: none;
    }
    .navigation-link::before {
      display: none;
    }
    .flex-wrap-below-m {
      flex-wrap: wrap;
    }
    .font-size-xxl {
      font-size: 3.33rem;
    }
  }
  @media all and (max-width: 380px) {
    .hide-s {
      display: none;
    }
    .show-s {
      display: block;
    }
    .flex-wrap-below-s {
      flex-wrap: wrap;
    }
    .font-size-xxl {
      font-size: 2rem;
    }
  }
}