
/* Button Design Only */
.audio-icon-button {
/*   border: 0.06rem Red solid;
  padding: 0.1rem; */
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  	background: white;
	background-image: url(https://tomarabhay.netlify.app/img/icons/man-with-black-glasses-and-headphones.png);/* url(https://tomarabhay.netlify.app/img/smallAbhayFace.png); */
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
  position: fixed;
  right: 0.5rem;
  top: 3rem;
  z-index: 4200;
  aspect-ratio: 1;
  display: flex;
  gap: 0.125rem;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 2.5s ease;
  
      -webkit-animation-name: settings;
      animation-name: settings;
      -webkit-animation-duration: 3.05s;
      animation-duration: 3.05s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
    	  box-shadow: 0 0px 4px 2px white;
}
@media (hover) {
  .audio-icon-button {
    cursor: pointer;
  }
  .audio-icon-button:hover {
    opacity: 1;
    box-shadow: 0 4px 4px 4px white;
  }
}
.audio-icon-button .bar {
/* 
	background: blue;
	height: 1.5rem;
	width: 0.0825rem;
 */
}
.audio-icon-button .bar:nth-of-type(1), .audio-icon-button .bar:nth-of-type(5) {
  height: 0.5rem;
}
.audio-icon-button .bar:nth-of-type(2), .audio-icon-button .bar:nth-of-type(4) {
  height: 1rem;
}
