@keyframes shake {
	25% {
		transform: rotate(calc(var(--angle) * -1));
        opacity: 0;
	}

	50% {
		transform: rotate(var(--angle));
        opacity: 0.5;
	}

	100% {
		transform: rotate(0deg);
        opacity: 1;
	}
}

.ripple-hover {
	--width: 100%;
	--time: 0.3s;

	position: relative;
	display: inline-block;

	color: white;
	background: #222;
	overflow: hidden;
}

.ripple-hover text {
	position: relative;
	z-index: 5;
	
	transition: color var(--time);
}

.ripple-hover:hover text {
	color: #222;
}

.ripple-hover span {
	position: absolute;
	display: block;
	content: "";
	z-index: 0;
	width: 0;
	height: 0;
	
	border-radius: 100%;
	background: #fff;
	
	transform: translate(-50%, -50%);
	transition: width var(--time), padding-top var(--time);
}

.ripple-hover:hover span {
	width: calc(var(--width) * 2.25);
	padding-top: calc(var(--width) * 2.25);
}

.ripple-hover.ripple-flash:hover text {
	color: white;
}

.ripple-hover.ripple-flash span {
	background: #ff3b3b;
}

.animated {
	--angle: 5deg;
	animation: shake 0.3s;
}

.link{
	position: absolute;
	right: 10px;
	bottom: 10px;
	
	font-size: 1rem;
}