/*nav styles*/
ul {
  background: transparent;
  width: 100%; 
  margin: 0 auto;
}
ul li {
  list-style-type: none;
  /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
  position: relative;
  overflow: hidden;
}
ul li a {
  font: normal 14px/28px Montserrat;
  display: block; 
  padding: 0;
  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.*/
.ink {
  display: block; position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 100%;
  transform: scale(0);
}
/*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);}
}