:root {
  --bg-red: 255 0 0;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
}

@-webkit-keyframes ripple-white {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 10px rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1);
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 10px rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 30px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-black {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgba(0, 0, 0, 0.1),
      0 0 0 10px rgba(0, 0, 0, 0.1),
      0 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow:
      0 0 0 0 rgba(0, 0, 0, 0.1),
      0 0 0 10px rgba(0, 0, 0, 0.1),
      0 0 0 20px rgba(0, 0, 0, 0.1);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 10px rgba(0, 0, 0, 0.1),
      0 0 0 20px rgba(0, 0, 0, 0.1),
      0 0 0 30px rgba(0, 0, 0, 0);
    box-shadow:
      0 0 0 10px rgba(0, 0, 0, 0.1),
      0 0 0 20px rgba(0, 0, 0, 0.1),
      0 0 0 30px rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes ripple-yellow {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgba(249 217 33 / 0.1),
      0 0 0 10px rgba(249 217 33 / 0.1),
      0 0 0 20px rgba(249 217 33 / 0.1);
    box-shadow:
      0 0 0 0 rgba(249 217 33 / 0.1),
      0 0 0 10px rgba(249 217 33 / 0.1),
      0 0 0 20px rgba(249 217 33 / 0.1);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 10px rgba(249 217 33 / 0.1),
      0 0 0 20px rgba(249 217 33 / 0.1),
      0 0 0 30px rgba(249 217 33 / 0);
    box-shadow:
      0 0 0 10px rgba(249 217 33 / 0.1),
      0 0 0 20px rgba(249 217 33 / 0.1),
      0 0 0 30px rgba(249 217 33 / 0);
  }
}

@keyframes ripple-red {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgb(var(--bg-red) / 0.1),
      0 0 0 10px rgb(var(--bg-red) / 0.1),
      0 0 0 20px rgb(var(--bg-red) / 0.1);
    box-shadow:
      0 0 0 0 rgb(var(--bg-red) / 0.1),
      0 0 0 10px rgb(var(--bg-red) / 0.1),
      0 0 0 20px rgb(var(--bg-red) / 0.1);
  }
  100% {
    -webkit-box-shadow:
      0 0 0 10px rgb(var(--bg-red) / 0.1),
      0 0 0 20px rgb(var(--bg-red) / 0.1),
      0 0 0 30px rgb(var(--bg-red) / 0.1);
    box-shadow:
      0 0 0 10px rgb(var(--bg-red) / 0.1),
      0 0 0 20px rgb(var(--bg-red) / 0.1),
      0 0 0 30px rgb(var(--bg-red) / 0);
  }
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1.05);
  }
}

.btn-play {
  -webkit-animation: ripple-black 1s linear infinite;
  animation: ripple-black 1s linear infinite;

  background-color: rgb(var(--bg-primary));
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  z-index: 999;
  cursor: pointer;
}

.btn-play-youtube {
  -webkit-animation: zoom-in 1s ease-in-out infinite alternate;
  animation: zoom-in 1s ease-in-out infinite alternate;
}