/*
=================
RIPPLE EFFECT
=================
*/
*[ripple]{
    list-style-type: none;
    position: relative;
    overflow: hidden;
}

.ink {
    display: block; position: absolute;
    background: rgba(255, 255, 255, 0.3);/*hsl(180, 40%, 80%);*/
    border-radius: 100%;
    transform: scale(0);
}

*[ripple-dark] .ink{
    background: rgba(0, 0, 0, 0.3);;
}

/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {opacity: 0; transform: scale(2.5);}
}