@font-face {
  font-family: "MS Gothic";
  src: url("/fonts/MSGothic.ttf");
}

@font-face {
  font-family: "Saitamaar";
  src: url("/fonts/Saitamaar.otf");
}

@font-face {
  font-family: "SlacksideOne";
  src: url("/fonts/SlacksideOne.ttf");
}

@font-face {
  font-family: "Maruminya";
  src: url("/fonts/maruminya-m.ttf");
}

@font-face {
  font-family: "Musekinin";
  src: url("/fonts/musekinin.ttf");
}

@font-face {
  font-family: "Faces";
  src: url("/fonts/mikiyuemoji-face1.ttf");
}

@font-face {
  font-family: "DarumadropOne";
  src: url("/fonts/DarumadropOne.ttf");
}

@font-face {
  font-family: "thin";
  src: url("/fonts/thin.ttf");
}

@font-face {
  font-family: "junipy";
  src: url("/fonts/junipy.ttf");
}

:root {
  /* font-family: "MS Gothic", Avenir, Helvetica, Arial, sans-serif; */
  /* font-family: "ＭＳ Ｐゴシック", Verdana, Helvetica, sans-serif; */
  font-family: "MS PGothic", Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  --bg-color: #f6e6ef;
  --dark-color: #1f1107;
  --dark-color-translucent: #1f110788;
  --white-gradient: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 35%, #e6e6e6 100%);

  --viridian: #6a8e7f;
  --viridian-gradient: linear-gradient(to bottom, #95a59e 0%, #7d978c 35%, #6a8e7f 100%);
  --green: #1fa400;

  --lapis: #336699;
  --lapis-gradient: linear-gradient(to bottom, #688eb4 0%, #4e749a 35%, #336699 100%);

  --light-blue: #c3dcf4;
  --light-green: #dce9dc;
  --pink: #f7d6e0;
  --pink-gradient: linear-gradient(to bottom, #fbe5ec 0%, #f7d6e0 35%, #f0c6d2 100%);

  --red: #f8919e;
  --red-gradient: linear-gradient(to bottom, #fab5be 0%, #faa4af 35%, #f8919e 100%);

  --rose: #a8577e;
  --rose-gradient: linear-gradient(to bottom, #c7769d 0%, #bf6d95 35%, #a8577e 100%);

  --lavender: #e1bcff;
  --lilac: #cdadd3;
  --indigo: #0b4f6c;
  --brown: #b07156;
  --sand: #decbb7;
  --gray: #808080;

  --border: 1px dotted var(--dark-color);
  --border-solid: 1px solid var(--dark-color);
  --border-green: 1px dotted var(--viridian);
  --border-translucent: 1px dotted var(--dark-color-translucent);

  --tr-speed: 0.2s;
  --pointer: url("/cursors/handpoint.png"), auto;
  --normal: url("/cursors/hand.png"), auto;
}

::-webkit-scrollbar {
  width: 5px;
  height: 0px;
  margin-left: 3px;
  background: var(--bg-color);
  border: 1px solid #808080;
}

::-webkit-scrollbar-thumb {
  background-color: #808080;
  border-radius: 0;
  border: 0px solid #808080;
}

html {
  background-color: var(--bg-color);
  color: var(--dark-color);
  font-size: 14px;
  cursor: url("/cursors/hand.png"), auto;
  image-rendering: pixelated;
}

a,
button {
  cursor: url("/cursors/handpoint.png"), auto;
}

::selection {
  background: var(--dark-color);
  color: var(--bg-color);
}

.spoiler {
  color: var(--dark-color);
  background-color: var(--dark-color);
}

.spoiler:hover {
  background-color: transparent;
}

.link {
  text-decoration: var(--border) underline;
  text-underline-offset: 2px;
  color: var(--dark-color);
  padding: 2px;
}

.link:hover {
  color: var(--bg-color);
  background-color: var(--dark-color);
}

.disabled-link {
  padding: 2px;
  color: var(--dark-color);
  text-decoration: 1px solid var(--dark-color) line-through;
}

.disabled-link:hover {
  cursor: var(--normal);
  background-color: var(--bg-color);
  color: var(--dark-color);
}

.coloredButton {
  cursor: var(--pointer);
  font-family: inherit;
  font-size: 14px;
  background: #d6efd0;
  background: linear-gradient(0deg, rgba(214, 239, 208, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border: 1px solid #d6efd0;

  border-radius: 2px;
  padding: 4px;
  filter: drop-shadow(0px 1px 1px #93a58f);
}

.coloredButton:hover {
  background: #ffecd3;
  background: linear-gradient(0deg, rgba(255, 236, 211, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border: 1px solid #ffecd3;
  filter: drop-shadow(0px 1px 1px #b2a390);
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--dark-color);
  color: var(--bg-color);
  width: 113px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

.pixelated-text {
  font-family: "Saitamaar", Avenir, Helvetica, Arial, sans-serif;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
}

.dithered {
  filter: url(#dither);
}

.movingText {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.movingText span {
  display: inline-block;
  animation: wave 1s steps(1) infinite;
}

.movingText span:nth-child(1) {
  animation-delay: 0s;
}
.movingText span:nth-child(2) {
  animation-delay: 0.2s;
}
.movingText span:nth-child(3) {
  animation-delay: 0.4s;
}
.movingText span:nth-child(4) {
  animation-delay: 0.6s;
}
.movingText span:nth-child(5) {
  animation-delay: 0.8s;
}
.movingText span:nth-child(6) {
  animation-delay: 1s;
}
.movingText span:nth-child(7) {
  animation-delay: 1.2s;
}
.movingText span:nth-child(8) {
  animation-delay: 1.4s;
}
.movingText span:nth-child(9) {
  animation-delay: 1.6s;
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1px);
  }
}