.coininfo {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.coininfo img {
    width: 26px;
}
.coin-icon {
    margin-right: 5px;
  
    width: 26px;
    height: 26px;

    will-change: transform;
   /* backface-visibility: hidden;
    -webkit-backface-visibility: hidden;*/
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.coin-spin {
  animation: coinSpin 1s ease-out;
  -webkit-animation: coinSpin 1s ease-out;
}

.coininfo .coin-name {
    color: gray;
    font-size: 0.5rem;
    margin-right: 5px;
    line-height: 26px;
}
.coininfo .coin-price {
  position: relative;
  display: inline-block;
  line-height: 26px;
  will-change: transform, color/*, text-shadow*/ ;
  transition: 
    color 1s ease,
    /*text-shadow 1s ease,*/
    transform .8s ease;

}

.price-up {
  color: #16c784; /*#00ff00;*/
  /*text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;*/
  transform: scale(1.05);
}

.price-down {
  color: #ea3943; /*#ff3b3b;*/
  /* text-shadow: 0 0 10px #ff3b3b, 0 0 20px #ff3b3b;*/
  transform: scale(1.05);
}

.coin-price.pulse-effect::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  animation: flashPulse 0.6s ease-out forwards;
  filter: blur(6px);
  z-index: -1;
}

/*1200px*/
@media (min-width: 74.99875rem) {
  .coininfo {
    gap: 1.25rem;
    font-size: 1rem;
  }
  .coininfo .coin-name { 
    font-size: 0.75rem;
  }
}
/*992px*/
@media (max-width: 61.99875rem) {
  .coininfo {
    gap: 1.55rem;
    font-size: 1rem;
  }
  .coininfo .coin-name { 
    font-size: 0.75rem;
  }
}
/*480px*/
@media (max-width: 29.99875rem) {}

@keyframes flashPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5);
  }
}

@keyframes pulseUp {
  0% {
    color: #16c784;
    text-shadow: 0 0 10px #16c784 0 0 20px #16c784 0 0 30px #16c784;
    transform: scale(1.1);
  }
  100% {
    color: #002400;
    text-shadow: none;
    transform: scale(1);
  }
}

@keyframes pulseDown {
  0% {
    color: #ea3943;
    text-shadow: 0 0 10px #ea3943, 0 0 20px #ea3943, 0 0 30px #ea3943;
    transform: scale(1.1);
  }
  100% {
    color: #250909;
    text-shadow: none;
    transform: scale(1);
  }
}

@keyframes coinSpin {
  0% {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
  }
}