#bg-fireflies {
  pointer-events: none;
}

.isotope-container {
  position: relative;
}

.isotope-container::after {
  content: "";
  display: block;
  clear: both;
}

.slider-skill {
  width: 200px;
  height: 250px;
  top: 10%;
  left: calc(50% - 100px);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: circleRun 20s linear infinite;
}

@keyframes circleRun {
  from {
    transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
  }
  to {
    transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
  }
}

.slider-skill .item {
  inset: 0 0 0 0;
  transform: rotateY(
      calc((var(--positionskill) - 1) * (515 / var(--quantity)) * 1deg)
    )
    translateZ(370px);
}

.skill-content {
  width: min(1400px, 100vw);
}

.loading span {
  display: inline-block;
  margin: 0 0.2rem;
  animation: loading04 1.3s infinite;
}

.loading span:nth-child(2) {
  animation-delay: 0.1s;
}
.loading span:nth-child(3) {
  animation-delay: 0.2s;
}
.loading span:nth-child(4) {
  animation-delay: 0.3s;
}
.loading span:nth-child(5) {
  animation-delay: 0.4s;
}
.loading span:nth-child(6) {
  animation-delay: 0.5s;
}
.loading span:nth-child(7) {
  animation-delay: 0.6s;
}
.loading span:nth-child(8) {
  animation-delay: 0.7s;
}
.loading span:nth-child(9) {
  animation-delay: 0.8s;
}
.loading span:nth-child(10) {
  animation-delay: 0.9s;
}

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

.card-creature {
  will-change: transform;
}

.card-effect-front {
  transform-origin: center bottom;
}

.character-table tr td:first-child {
  background-image: url("../img/character/icon/bg-stats.webp");
  background-size: cover;
  background-position: center;
}

.for-text-shadow {
  text-shadow: 1px 1px 13px black;
}

.weapon-shine {
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4),
    transparent 70%
  );
  background-size: 200% 100%;
  mask-image: url("../img/weapon/bg-weapon.webp");
  mask-size: cover;
  mask-repeat: no-repeat;

  -webkit-mask-image: url("../img/weapon/bg-weapon.webp");
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}

.weapon-card:hover .weapon-cover {
  transform-origin: bottom;
  transform: perspective(900px) translateY(10%) rotateX(55deg) translateZ(0);
}

.checkbox-style:checked {
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M5%2010l3%203%207-7%27/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}