:root {
  --banner-color: hsl(262deg 59% 22%);
  --border-width: 1px;

  --meaning-border: hsl(30 100% 93% / 1);
  --meaning-background: hsl(30 100% 93% / 1);

  --red-border: hsl(345 100% 63%);
  --red-background: hsl(345 100% 83%);

  --blue-border: hsl(222 100% 62%);
  --blue-background: hsl(222 100% 82%);

  --green-border: hsl(114 71% 45%);
  --green-background: hsl(114 71% 72%);

  --joyo-border: hsl(66 85% 52%);
  --joyo-background: hsl(66 92% 75%);

  --jinmeiyo-border: hsl(22 100% 61%);
  --jinmeiyo-background: hsl(22 100% 74%);

  --heisig-border: hsl(163deg 74% 48%);
  --heisig-background: hsl(163deg 66% 74%);

  --other-border: hsl(252 100% 81%);
  --other-background: hsl(252 80% 85%);

  --toggle-on-border: hsl(261deg 37% 50%);
  --toggle-on-background: hsl(261deg 37% 74%);

  --toggle-off-border: hsl(261deg 37% 50%);
  --toggle-off-background: #f4f4f4;

  --word-char-border: hsl(286 65% 70%);
  --word-char-bg: hsl(286 90% 92%);

  --border-width: 1px;
  --bg-color: #fff;
  --text-color: #000000;
  --link-color: #111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --banner-color: hsl(262 59% 14%);
    --border-width: 2px;

    --meaning-border: hsl(247deg 34% 27%);;
    --meaning-background: hsl(247deg 28% 27%);

    --red-border: hsl(345 82% 64% / 1);
    --red-background: #111;

    --blue-border: hsl(222 100% 64%);
    --blue-background: #111;

    --green-border: hsl(114 53% 53%);
    --green-background: #111;

    --joyo-border: hsl(66 100% 71%);
    --joyo-background: #111;

    --jinmeiyo-border: hsl(22 100% 68%);
    --jinmeiyo-background: #000;

    --heisig-border: hsl(163deg 79% 56%);
    --heisig-background: #000;

    --other-border: hsl(252 80% 85%);
    --other-background: #000;

    --toggle-on-border: hsl(261deg 48% 58%);
    --toggle-on-background: #000;

    --toggle-off-border: gray;
    --toggle-off-background: #333;

    --word-char-border: hsla(286, 74%, 34%);
    --word-char-bg: #222;

    --border-width: 2px;
    --bg-color: #111;
    --text-color: #f4f4f4;
    --link-color: #eee;
  }
}

.bg-theme {
  background-color: var(--bg-color);
}

.color-theme {
  color: var(--text-color);
}

.color-link {
  color: var(--link-color);
}

.c-meaning {
  color: var(--text-color);
  border-style: solid;
  border-width: var(--border-width);
  background-color: var(--meaning-background);
  border-color: var(--meaning-border);
}

.jumpable {
  color: var(--text-color);
  border-style: solid;
  border-width: var(--border-width);
}

.c-red {
  background-color: var(--red-background);
  border-color: var(--red-border);
}

.c-blue {
  background-color: var(--blue-background);
  border-color: var(--blue-border);
}

.c-green {
  background-color: var(--green-background);
  border-color: var(--green-border);
}

.c-joyo {
  background-color: var(--joyo-background);
  border-color: var(--joyo-border);
}

.c-jinmeiyo {
  background-color: var(--jinmeiyo-background);
  border-color: var(--jinmeiyo-border);
}

.c-heisig {
  background-color: var(--heisig-background);
  border-color: var(--heisig-border);
}

.c-other {
  background-color: var(--other-background);
  border-color: var(--other-border);
}

.c-toggle-on {
  color: var(--text-color);
  border-style: solid;
  border-width: var(--border-width);
  background-color: var(--toggle-on-background);
  border-color: var(--toggle-on-border);
}

.c-toggle-off {
  color: var(--text-color);
  border-style: dashed;
  border-width: var(--border-width);
  background-color: var(--toggle-off-background);
  border-color: var(--toggle-off-border);
}

.word-char {
  color: var(--text-color);
  border-color: var(--word-char-border);
  background-color: var(--word-char-bg);
}

.no-select {
  user-select: none;
}

.no-underline {
  text-decoration: none;
}

.flex-grow {
  flex-grow: 1;
}

.minw3 {
  min-width: 4rem;
}

.char-bv {
  border-top: var(--border-width) dashed var(--word-char-border);
  border-bottom: var(--border-width) dashed var(--word-char-border);
}

.char-br {
  border-right: var(--border-width) dashed var(--word-char-border);
}

.char-bl {
  border-left: var(--border-width) dashed var(--word-char-border);
}

.bg-mid-blue {
  background: #b8dcff;
}

.bg-mid-green {
  background: #8fe096;
}

.kosugi-maru {
  font-family: 'Kosugi Maru', sans-serif;
}

.klee-one {
  font-family: 'Klee One', cursive;
}

.banner-color {
  background-color: var(--banner-color);
}

.br-5 {
  border-radius: 2rem;
}

.f-05 {
  font-size: 6rem;
}

.pa-01 {
  padding; 0.1rem;
}

.loader {
  color: #aed6c3;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}