[data-rank]::before {
  content: attr(data-rank);
  margin: 0 auto;
  margin-right: 5px;
  color: var(--font);
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: bold;
}

[data-rank="C"]::before {
  text-shadow:
    0 0 10px var(--copper),
    0 0 15px var(--copper),
    0 0 30px var(--copper),
    0 0 30px var(--copper),
    0 0 30px var(--copper),
    0 0 40px var(--copper);
}

[data-rank="I"]::before {
  text-shadow:
    0 0 10px var(--iron),
    0 0 15px var(--iron),
    0 0 30px var(--iron),
    0 0 30px var(--iron),
    0 0 30px var(--iron),
    0 0 40px var(--iron);
}

[data-rank="G"]::before {
  text-shadow:
    0 0 10px var(--gold),
    0 0 15px var(--gold),
    0 0 30px var(--gold),
    0 0 30px var(--gold),
    0 0 30px var(--gold),
    0 0 40px var(--gold);
}

[data-rank="E"]::before {
  text-shadow:
    0 0 10px var(--emerald),
    0 0 15px var(--emerald),
    0 0 30px var(--emerald),
    0 0 30px var(--emerald),
    0 0 30px var(--emerald),
    0 0 40px var(--emerald);
}

[data-rank="S"]::before {
  text-shadow:
    0 0 10px var(--sapphire),
    0 0 15px var(--sapphire),
    0 0 30px var(--sapphire),
    0 0 30px var(--sapphire),
    0 0 30px var(--sapphire),
    0 0 40px var(--sapphire);
}

[data-rank="R"]::before {
  text-shadow:
    0 0 10px var(--ruby),
    0 0 15px var(--ruby),
    0 0 30px var(--ruby),
    0 0 30px var(--ruby),
    0 0 30px var(--ruby),
    0 0 40px var(--ruby);
}

[data-rank="D"]::before {
  text-shadow:
    0 0 10px var(--diamond),
    0 0 15px var(--diamond),
    0 0 30px var(--diamond),
    0 0 30px var(--diamond),
    0 0 30px var(--diamond),
    0 0 40px var(--diamond);
}

[data-rank="A"]::before {
  text-shadow:
    0 0 10px var(--amethyst),
    0 0 15px var(--amethyst),
    0 0 30px var(--amethyst),
    0 0 30px var(--amethyst),
    0 0 30px var(--amethyst),
    0 0 40px var(--amethyst);
}

[data-rank="O"]::before {
  text-shadow:
    0 0 10px var(--onyx),
    0 0 15px var(--onyx),
    0 0 30px var(--onyx),
    0 0 30px var(--onyx),
    0 0 30px var(--onyx),
    0 0 40px var(--onyx);
}

[data-rank="M"]::before {
  text-shadow:
    0 0 10px var(--master),
    0 0 15px var(--master),
    0 0 30px var(--master),
    0 0 30px var(--master),
    0 0 30px var(--master),
    0 0 40px var(--master);
}

[dara-rank="L"]::before {
  animation-name: rainbowNeon;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainbowNeon {
  0% {
    text-shadow:
      0 0 10px red,
      0 0 15px red,
      0 0 30px red,
      0 0 30px red,
      0 0 30px red,
      0 0 40px red;
  }

  17% {
    text-shadow:
      0 0 10px #FF0,
      0 0 15px #FF0,
      0 0 30px #FF0,
      0 0 30px #FF0,
      0 0 30px #FF0,
      0 0 40px #FF0;
  }

  33% {
    text-shadow:
      0 0 10px #0F0,
      0 0 15px #0F0,
      0 0 30px #0F0,
      0 0 30px #0F0,
      0 0 30px #0F0,
      0 0 40px #0F0;
  }

  50% {
    text-shadow:
      0 0 10px #0FF,
      0 0 15px #0FF,
      0 0 30px #0FF,
      0 0 30px #0FF,
      0 0 30px #0FF,
      0 0 40px #0FF;
  }

  67% {
    text-shadow:
      0 0 10px #00F,
      0 0 15px #00F,
      0 0 30px #00F,
      0 0 30px #00F,
      0 0 30px #00F,
      0 0 40px #00F;
  }

  84% {
    text-shadow:
      0 0 10px #F0F,
      0 0 15px #F0F,
      0 0 30px #F0F,
      0 0 30px #F0F,
      0 0 30px #F0F,
      0 0 40px #F0F;
  }

  100% {
    text-shadow:
      0 0 10px red,
      0 0 15px red,
      0 0 30px red,
      0 0 30px red,
      0 0 30px red,
      0 0 40px red;
  }
}