:root {
  --clip-position: center;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: black;
}

.text {
    color: MidnightBlue;
    margin: auto;
    margin-top: 10px;
    width: 70%;
    padding: 20px 30px 20px 30px;
    background-color: rgb(120, 186, 227) ;
    opacity: 90%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.486);
    
}

.container {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    min-height: 100%;
    cursor: none;

    /*background-image: radial-gradient(#114544, #1B655E,#2A9187,#3CAEA3,#6ED7D3,#A8EEEB,#E7FFFE);*/
    background-image: url('https://mircuskasarok.neocities.org/underwater_text/bg.svg');
    background-size: 100% 100%;   
}

#wavy-lens {
    filter: url(#wavy);
    clip-path: circle(70px at var(--clip-position) );
}