.runneth-over

$in: #b9ffe7;
$out: #c5ffd0;

@keyframes spill{
	100%{
		box-shadow: inset 0px 0px 0px -2vmin $in, 0px 5vmin 10vmin 0px $out;
		height: 0vh;
		width: 100vw;			
	}
}
.runneth-over{
	animation: spill 5s cubic-bezier(0, 0.25, 1, 0.75) alternate infinite;
	border-radius: 100%;
	box-shadow: inset -5vmin -5vmin 10vmin 0px $in, 0px 0px 0px -2vmin $out;
	box-sizing: border-box;
	height: 50vh;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10vw;
}
body{
	background: #292A2B;
}