.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: #000000;
    margin: 0 1.5px;
    height: 10px;
    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: 10px;
    }
    100% {
      opacity: 1;
      height: 20px;
    }
  }
  @keyframes wave-md {
    0% {
      opacity: 0.35;
      height: 15px;
    }
    100% {
      opacity: 1;
      height: 30px;
    }
  }
  @keyframes wave-lg {
    0% {
      opacity: 0.35;
      height: 15px;
    }
    100% {
      opacity: 1;
      height: 50px;
    }
  }

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

.space-bar{
    width: 300px;
  }
  
.threeseconds{
    font-size: 22px;
    font-weight: 500;
    color: #636363;
    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);
    }
}