*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.DrinkWater{
    width: 100%;
    height: 100vh;
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.256),rgba(0, 0, 0, 0.562)) ,url("./back-water.webp") no-repeat center;
    background-size: cover;
}
/* bubble animation */
div p{
    position: absolute;
    bottom: 0px;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(50, 223, 223, 0.897);
    animation: animate 5s linear infinite;
}
div p::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.25) translate(-70%, -70%);
    background: radial-gradient(rgba(255, 255, 255, 0.397), transparent);
    border-radius: 50%;
}
@keyframes animate{
    0%{
        transform: translateY(0%);
        opacity: 1;
    }
    99%{
        opacity: 1;
    }
    100%{
        transform: translateY(-1200%);
        opacity: 1;
    }
}
/* bubble animation done */

.logo{
    padding: 0.1em;
    font-family: Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.logo>h1{
    color: rgba(0, 0, 0, 0.01);
    background-image: url('./water2.png');
    background-repeat: repeat-x;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip:text;
    font-size: 7rem;
    letter-spacing: 7px;
    animation: animate 7s linear infinite;
}
@keyframes animate{
    0%{
        background-position: left 0px;
    }
    40%{
        background-position: left 100px;
    }
}

/* styling form */

.DrinkWater .form{
    width: 50%;
    height: auto;
    margin: 5em auto;
}
form{
    width: 99%;
    margin: 0 auto;
    padding: 2em;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px 5px rgba(99, 197, 236, 0.493);
}
label{
    margin-top: 1em;
    font-size: 1.3rem;
    color: #073b6b;
}
input{
    width: 80%;
    padding: .2em;
    border-radius: 2px;
    border: 1px solid black;
    outline: none;
    background: none;
    color: rgb(4, 13, 43);
    font-size: 1.1rem;
    font-family:'Poppins',sans-serif;
    text-align: center;
}
::placeholder{
    font-size: .9rem;
    text-align: center;
    color: rgb(4, 13, 43);
    font-weight: 550;
}

/***********************
Styling know button
********************** */
a{
    position: relative;
    color: #073b6b;
    text-decoration: none;
    padding: .3em 1em;
    border: 2px solid #073b6b;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    margin-top: 2em;
    letter-spacing: 4px;
    display: inline-block;
    overflow: hidden;
    font-weight: bolder;
}
a span{
    position: relative;
    z-index: 1;
    transition: 1s;
}
a:hover span{
    color: #fff;
}

a .wave{
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    width: 100%;
    height: 100%;
    background: #00aeff;
    transition: 1s;
}
a:hover .wave{
    top:0;
}

a .wave:before{
    content: '';
    position: absolute;
    top:-22px;
    left: 0;
    width: 100%;
    height:22px;
    background:url(wave.png);
    animation:  animate .5s linear infinite;
}
@keyframes animate{
    0%{
        background-position-x: 0;
    }
    100%{ 
        background-position-x: 118px;
    } 
}