@property --unit-gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.valentine {
  background-image: repeating-linear-gradient(150deg, rgb(31, 74, 133) 0%, rgb(241, 243, 246) 12%, rgb(208, 16, 58) 25%, rgb(241, 243, 246) 38%, rgb(31, 74, 133) 50%);
  background-size: 200% 200%;
}

.obita {
  background-image: repeating-linear-gradient(150deg, #9e9eed 0%, #06060a 25%, #9e9eed 50%);
  background-size: 200% 200%;
}

.gilgamesh {
  background-image: repeating-linear-gradient(150deg, #fef000 0%, #ff0300 12%, #5c0000 25%, #ff0300 38%, #fef000 50%);
  background-size: 200% 200%;
}

.tengon {
  background-image: repeating-linear-gradient(150deg, #b4327b 0%, #2d311c 18%, #d1ab42 25%, #2d311c 32%, #b4327b 50%);
  background-size: 200% 200%;
}

.brolzisuper {
  background-image: repeating-linear-gradient(150deg, #28ab19 0%, #38eb14 10%, #91ff00 20%, #38eb14 30%, #28ab19 50%);
  background-size: 200% 200%;
}

.gujo {
  background-image: repeating-linear-gradient(150deg, #2b0d3a 0%, #20d5ff 10%, #ffffff 20%, #20d5ff 30%, #2b0d3a 50%);
  background-size: 200% 200%;
}

.sukono {
  background-image: repeating-linear-gradient(150deg, #F44336 0%, #C93572 10%, #721D7F 20%, #C93572 30%, #F44336 50%);
  background-size: 200% 200%;
}

.iscanur {
  background-image: repeating-linear-gradient(150deg, #ff2a00 0%, #ffda98 15%, #ff2a00 50%);
  background-size: 200% 200%;
}

.koguro {
  background-image: repeating-linear-gradient(150deg, #8369c5 0%, #999999 10%, #ffffff 20%, #999999 30%, #8369c5 50%);
  background-size: 200% 200%;
}

.vsjw {
  background-image: repeating-linear-gradient(150deg, #5502ff 0%, #5553ff 10%, #160023 20%, #5553ff 30%, #5502ff 50%);
  background-size: 200% 200%;
}

.divalo {
  background-image: repeating-linear-gradient(150deg, #c00060 0%, #700090 20%, #e0a02d 30%, #c00060 50%);
  background-size: 200% 200%;
}

.rogita {
  background-image: repeating-linear-gradient(150deg, #e54e6a 0%, #ff0d7f 10%, #ff1e52 25%, #ff4d0b 40%, #e54e6a 50%);
  background-size: 200% 200%;
}

.secret {
  background-image: repeating-linear-gradient(150deg, #c60000 0%, #500000 20%, #f40000 30%, #c60000 50%);
  background-size: 200% 200%;
}

.exclusive {
  background-image: repeating-linear-gradient(150deg, #ec0004 0%, #e385ef 25%, #ec0004 50%);
  background-size: 200% 200%;
}

.mythic {
  background-image: repeating-linear-gradient(150deg, #33ffcc 0%, #45ff41 5%, #d6ff33 10%, #fdd233 15%, #ff7c33 20%, #ff3346 25%, #ff33b7 30%, #763ce2 40%, #33ffcc 50%);
  background-size: 200% 200%;
}

.legendary {
  background-image: repeating-linear-gradient(135deg, #f1ff00 0%, #ff6f00 20%, #ffff00 30%, #f1ff00 50%);
  background-size: 200% 200%;
}

.epic {
  background-image: repeating-linear-gradient(150deg, #b20eff 0%, #3e00d4 25%, #b20eff 50%);
  background-size: 200% 200%;
}

.rare {
  background-image: repeating-linear-gradient(150deg, #08f3ff 0%, #2747d3 25%, #08f3ff 50%);
  background-size: 200% 200%;
}

.text-gradient {
  color: transparent;
  background-clip: text;
  
  animation: spinUnitGradient 8s linear infinite;
}

@keyframes spinUnitGradient {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}