/* 代码整理：时代Java NowJava.com */
* {margin: 0; padding: 0;}
/*nav styles*/
.nav ul {
	background: white; border-top: 6px solid hsl(180, 40%, 60%);
	width: 200px; margin: 5em auto;
}
.nav ul li {
	list-style-type: none;
	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
	position: relative;
	overflow: hidden;
}
.nav ul li a {
	font: normal 14px/28px Montserrat; 
	color: hsl(180, 40%, 40%);
	display: block; 
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer; /*since the links are dummy without href values*/
	/*prevent text selection*/
	user-select: none;
	/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
	position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.nav .ink {
	display: block; 
	position: absolute;
	background: hsl(180, 40%, 80%);
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.nav .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);}
}