Pure CSS Water Wave Text Animation Effects Using CSS Clip-path

Pure CSS Water Wave Text Animation Effects Using CSS Clip-path

/* Goolge Fonts */

/* ===== Global ===== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul {
list-style: none;
}
.active {
color: #fc036b;
text-decoration: underline;
font-weight: bold;
}

/* Navbar */
.navbar {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
justify-content: space-between;
padding: 20px;
color: black;
}
.nav-links {
display: flex;
align-items: center;
}

.nav-links li {
margin: 0 30px;
}

header{
width: 100vw;
height: 100vh;
background-position: bottom;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.header-content {
margin-bottom: 150px;
color: whitesmoke;
text-align: center;
}
.header-content h2 {
font-size: 4vmin;
}
.line {
width: 150px;
height: 4px;
background: #fc036b;
margin: 10px auto;
}
.header-content h1 {
font-size: 7vmin;
margin-top: 50px;
margin-bottom: 30px;
}
.ctn {
padding: 8px 15px;
background: #fc036b;
border-radius: 30px;
color: whitesmoke;
}