#play-pause-button {
    margin-left: 10px;
    margin-right: 10px;
}

.icon {
    width: 40px;
    height: 40px;
}

.clickable {
    user-select: none;
    cursor: pointer;
    /* How Long it Takes to Scale Up */
    transition: transform 0.3s;
}

/* Slightly Scale up on Hover */
.clickable:hover {
    transform: scale(1.2);
}

/* Applying the pulse animation continuously on hover */
.up:hover {
    animation: pulse 1s infinite;
}

/* Scaling the icon slightly when it’s clicked */
.left:active {
    transform: scale(1.1) rotate(-50deg);
}

.right:active {
    transform: scale(1.1) rotate(50deg);
}

/* Define a smoother pulse animation */
@keyframes pulse {

    /* Return to original size */
    0%,
    100% {
        transform: scale(1);
    }

    /* Slightly larger at midpoint */
    50% {
        transform: scale(1.1);
    }
}