: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);
    }
}

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

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

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