08-pomodoro/src/components/AudioControl/AudioControl.css
@font-face {
  font-family: 'Yomogi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/yomogi/v12/VuJwdNrS2ZL7rpoPWA.ttf) format('truetype');
}
.audio-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
}
.audio-control .audio-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.66666667%;
  box-sizing: border-box;
  height: 100%;
  padding: 38px 0;
  cursor: pointer;
}
.audio-control .audio-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: none;
  border: none;
}
.audio-control .audio-item button p {
  font-family: "Iowan Old style" !important;
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
  color: var(--grad1);
}
.audio-control .audio-item div:nth-child(6) a {
  border-right: none;
}
.audio-wrapper {
  display: flex;
  /* justify-content: center; */
  align-items: flex-end;
  transform: scale(1.2);
  margin-right: 10px;
  position: relative;
}
.audio-wrapper:before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
  font-weight: bold;
}
[class^="bar-"] {
  background-color: #fff;
  width: 2px;
  margin: 0 1px;
  border-radius: 3px;
}
[class^="bar-"].bar-3 {
  background-color: #fff;
}
.regular [class^="bar-"] {
  animation: lineWave 0.6s both infinite alternate;
}
@keyframes lineWave {
  from {
    height: 2px;
  }
  to {
    height: 10px;
  }
}
.regular .bar-2 {
  animation-delay: 0.2s;
}
.regular .bar-3 {
  animation-delay: 0.35s;
}
.regular .bar-4 {
  animation-delay: 0.5s;
}
.regular .bar-5 {
  animation-delay: 0.65s;
}
