/*    <====[VIP && THEMES]====>   */
.list__item--gold-vip {
  background-image: url(gold-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--silver-vip {
  background-image: url(silver-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--bronze-vip {
  background-image: url(bronze-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--girl-vip {
  background-image: url(girl-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--gunner-vip {
  background-image: url(gunner-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--zula-vip {
  background-image: url(zula-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--minecraft-vip {
  background-image: url(minecraft-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--wow-vip {
  background-image: url(wow-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--mta-vip {
  background-image: url(mta-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--cs2-vip {
  background-image: url(cs2-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.list__item--hexo-vip {
  background-image: url(hexo-vip.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

/*    <====[FIRST-CHILD]====>   */
.list__item--gold-vip:first-child {
  background-image: url(gold-vip-first.webp);
}

.list__item--silver-vip:first-child {
  background-image: url(silver-vip-first.webp);
}

.list__item--bronze-vip:first-child {
  background-image: url(bronze-vip-first.webp);
}

/*    <====[TEXTS]====>    */
.list__item--gold-vip span {
  color: var(--gray-dark);
  font-family: Bold;
}

.list__item--girl-vip span {
  color: var(--danger);
  font-family: bold;
  text-shadow: -2px -2px 0 var(--white-2), 2px -2px 0 var(--white-2),
    -2px 2px 0 var(--white-2), 2px 2px 0 var(--white-2);
}

.list__item--gunner-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 var(--dark), 2px -2px 0 var(--dark),
    -2px 2px 0 var(--dark), 2px 2px 0 var(--dark);
}

.list__item--wow-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 #0c4a6e, 2px -2px 0 #0c4a6e, -2px 2px 0 #0c4a6e,
    2px 2px 0 #0c4a6e;
}

.list__item--minecraft-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 #14532d, 2px -2px 0 #14532d, -2px 2px 0 #14532d,
    2px 2px 0 #14532d;
}

.list__item--zula-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 #31020f, 2px -2px 0 #31020f, -2px 2px 0 #31020f,
    2px 2px 0 #31020f;
}

.list__item--mta-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 #31020f, 2px -2px 0 #31020f, -2px 2px 0 #31020f,
    2px 2px 0 #31020f;
}

.list__item--cs2-vip span {
  color: var(--white);
  font-family: bold;
  text-shadow: -2px -2px 0 #78350f, 2px -2px 0 #78350f, -2px 2px 0 #78350f,
    2px 2px 0 #78350f;
}

/*    <====[STATUS]====>    */
.online span:last-child {
  color: var(--success);
  background-color: var(--success-bg);
  border: 1px solid var(--success);
  display: flex;
  width: 100px;
  height: 30px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-shadow: unset;
}

.rgb {
  border: 3px solid;
  animation: rainbow-br 2.5s infinite linear;
}

.rgb span {
  animation: rainbow 2.5s infinite linear;
  text-shadow: unset !important;
  font-size: 1.375rem !important;
}

.offline {
  opacity: 0.4;
}

.offline span:last-child {
  color: var(--danger);
  background-color: var(--success-bg);
  border: 1px solid var(--danger);
  display: flex;
  width: 100px;
  height: 30px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.off {
  background: linear-gradient(135deg, #1e40af60, #17255460);
  animation: warning 1s linear infinite;
}

.off span:last-child {
  opacity: 0.4;
  color: var(--danger);
  background-color: var(--success-bg);
  border: 1px solid var(--danger);
  display: flex;
  width: 100px;
  height: 30px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

@media screen and (max-width: 1290px) {
  .list__item--cs2-vip {
    background-image: url(cs2-vip-res.webp);
  }

  .list__item--wow-vip {
    background-image: url(wow-vip-res.webp);
  }

  .list__item--hexo-vip {
    background-image: url(hexo-vip-res.webp);
  }
}