.candle-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #00000000;
}

.candle-chart {
  display: flex;
  align-items: flex-end;
  height: 80px;
  gap: 4px;
}

.candle {
  width: 6px;
  height: 110%;
  position: relative;
  animation: fade 2.6s infinite ease-in-out;
  filter: drop-shadow(0 0 2.7px #ffff);
}

.candle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background: #ffff;
  border: 1px solid #ffff;
  bottom: var(--b);
  height: var(--h);
}

.candle::before {
  content: "";
  position: absolute;
  left: 63%;
  transform: translateX(-50%);
  width: 1px;
  background: #ffff;
  bottom: var(--wb);
  height: var(--wh);
}

.candle:nth-child(1) {
  --b: 7.1%;
  --h: 18.93%;
  --wb: 0%;
  --wh: 31.95%;
  animation-delay: 0s;
}
.candle:nth-child(2) {
  --b: 26.04%;
  --h: 2.37%;
  --wb: 19.41%;
  --wh: 14.91%;
  animation-delay: 0.065s;
}
.candle:nth-child(3) {
  --b: 28.64%;
  --h: 4.5%;
  --wb: 16.92%;
  --wh: 21.66%;
  animation-delay: 0.13s;
}
.candle:nth-child(4) {
  --b: 31.42%;
  --h: 3.43%;
  --wb: 19.76%;
  --wh: 27.93%;
  animation-delay: 0.195s;
}
.candle:nth-child(5) {
  --b: 31.42%;
  --h: 15.44%;
  --wb: 27.43%;
  --wh: 28.07%;
  animation-delay: 0.26s;
}
.candle:nth-child(6) {
  --b: 46.54%;
  --h: 0.28%;
  --wb: 43.43%;
  --wh: 24.38%;
  animation-delay: 0.325s;
}
.candle:nth-child(7) {
  --b: 35.86%;
  --h: 8.7%;
  --wb: 29.7%;
  --wh: 24.5%;
  animation-delay: 0.39s;
}
.candle:nth-child(8) {
  --b: 11.67%;
  --h: 24.19%;
  --wb: 5.33%;
  --wh: 31.83%;
  animation-delay: 0.455s;
}
.candle:nth-child(9) {
  --b: 11.83%;
  --h: 15.1%;
  --wb: 7.93%;
  --wh: 24.97%;
  animation-delay: 0.52s;
}
.candle:nth-child(10) {
  --b: 27.81%;
  --h: 12.04%;
  --wb: 27.69%;
  --wh: 28.17%;
  animation-delay: 0.585s;
}
.candle:nth-child(11) {
  --b: 39.85%;
  --h: 28.25%;
  --wb: 39.53%;
  --wh: 28.58%;
  animation-delay: 0.65s;
}
.candle:nth-child(12) {
  --b: 70.8%;
  --h: 6.27%;
  --wb: 60.96%;
  --wh: 24.84%;
  animation-delay: 0.715s;
}
.candle:nth-child(13) {
  --b: 75.8%;
  --h: 2.71%;
  --wb: 68.38%;
  --wh: 31.62%;
  animation-delay: 0.78s;
}
.candle:nth-child(14) {
  --b: 67.23%;
  --h: 8.71%;
  --wb: 64.8%;
  --wh: 24.97%;
  animation-delay: 0.845s;
}
.candle:nth-child(15) {
  --b: 67.81%;
  --h: 7.85%;
  --wb: 57.54%;
  --wh: 27.55%;
  animation-delay: 0.91s;
}
.candle:nth-child(16) {
  --b: 70.08%;
  --h: 6.14%;
  --wb: 55.68%;
  --wh: 21.83%;
  animation-delay: 0.975s;
}
.candle:nth-child(17) {
  --b: 66.39%;
  --h: 3.69%;
  --wb: 58.11%;
  --wh: 26.11%;
  animation-delay: 1.04s;
}
.candle:nth-child(18) {
  --b: 64.8%;
  --h: 9.78%;
  --wb: 45.47%;
  --wh: 29.61%;
  animation-delay: 1.105s;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  10% {
    opacity: 1;
    transform: scaleY(1.5);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.35);
  }
  70% {
    opacity: 0;
    transform: scaleY(1.5);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

/*  IG: @bilalbstn7  */