//CSS Style Doc
@charset "UTF-8";


.div{ 
position: relative; 
height: 100vh; 
width: 100vw; 
overflow: hidden;
background-color: #dee6d7 ;
background-size:cover; 
z-index:-1;

 
}
.meniscus{ 

position: absolute;
bottom: 0%;
left: 0%; 
width: 100%;
height: 110%; 
background-color: #d2c0fc;
background-size: contain;
/*background: linear-gradient( #f2f5e7,#f2f5e7 50%, #774A91 50%, #774A91);*/ 
transform: translateY(100%);
animation: fillUp 7s forwards; 
box-shadow: 0px 20px 25px #dee6d7 inset;/*webkit required */ 
/*webkit required */ 
z-index:-2;
}


.fillThis{ 
position: absolute;
bottom: 0%;
left: 0%; 
width: 100%;
height: 100%; 
background-color:  #774A91;
/*background: linear-gradient( #f2f5e7,#f2f5e7 50%, #774A91 50%, #774A91);*/ 
transform: translateY(100%);/*webkit required */ 
animation: fillUp 7s forwards; /*webkit required */ 
box-shadow: 0px 20px 25px #d2c0fc inset;/*webkit required */ 
z-index:-1;

}



@keyframes fillUp { 
to{ 
transform: translateY(0);/*webkit required */ 
}

}
/*
notes for hover animate fill 
background-size: 100% 200%; 
transition: background-position 5s;
} 
div:hover{ 
background-position: 0% 100% ;
} */