.sound-wave {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
.bar {
  background: #52467b;
  bottom: 1px;
  height: 3px;
  width: 10px;
  margin: 0px 4px;
  border-radius: 5px;
  animation: sound 0ms -600ms linear infinite alternate;
}

@keyframes sound {
  0% {
     opacity: .35;
      height: 3px; 
  }
  100% {
      opacity: 1;       
      height: 70px;        
  }
}

.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 15px; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 29px; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 43px; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 57px; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 71px; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 85px; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 99px; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 113px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 127px; animation-duration: 442ms; } */

.bar {
  animation-name: wave-lg;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  background: #ffffff;
  margin: 0 1.5px;
  max-height: 30px; 
  width: 2px;
}
.bar:nth-child(-n+7), body .bar:nth-last-child(-n+7) {
  animation-name: wave-md;
}
.bar:nth-child(-n+3), body .bar:nth-last-child(-n+3) {
  animation-name: wave-sm;
}

@keyframes wave-sm {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 10px;
  }
}
@keyframes wave-md {
  0% {
    opacity: 0.35;
    height: 7px;
  }
  100% {
    opacity: 1;
    height: 15px;
  }
}
@keyframes wave-lg {
  0% {
    opacity: 0.35;
    height: 15px;
  }
  100% {
    opacity: 1;
    height: 25px;
  }
}

.sound-wave, .counter {
  display: none; /* Initially hidden */
}

.space-bar{
  width: 300px;
}

.threeseconds{
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  display: none;
}
.recording-elements{
  height: 50px;
}

.pulseBtn {
  padding: 5px;
  border-radius: 50px;
  box-shadow: 0 0 0 0 rgb(72 72 72 / 40%);
  -moz-animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite;
  animation: pulse 1s infinite;
  }
@keyframes pulse {
  0% {
      box-shadow: 0 0 0 0 rgb(44, 44, 44);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(88, 120, 243, 0);
  }
  100% {
      box-shadow: 0 0 0 50px rgba(88, 120, 243, 0);
  }
}