.button {
  border: 0;
  margin: 0 5rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: rgba(var(--light-blue));
  position: relative;
}

.play__button,
.pause__button,
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

.play__button {
  transform: translate(-35%, -50%);
  height: 60%;
  width: 50%;
  background-color: rgba(var(--light-yellow));
  clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

.pause__button {
  display: flex;
  width: 8rem;
  transform: translate(-50%, -50%);
  justify-content: space-around;
}

.pause__half {
  width: 25%;
  height: 5rem;
  background-color: rgba(var(--light-yellow));
}

.scale {
  transform: translate(-50%, -50%) scale(2) !important;
  transition: all 0.4s ease-in;
}

.circle {
  height: 70%;
  width: 70%;
  border-radius: 50%;
  background-color: rgba(var(--light-yellow));
  transform: translate(-50%, -50%);
}
