body {
    background-image: linear-gradient( 70deg, rgb(121, 255, 199), rgb(25, 78, 102));
    background-size: 100vw 100vh;
    margin: 0;
}
.background {
    position: absolute; top: 0; left: 0;
    height: 100vh; width: 100vw; 
    padding: 0;
    background-image: url("./img/water.png");
    background-size: 50vw;
    background-position: 10px 10px;
    filter: grayscale(100%) brightness(40%) url("#turbulence") blur(1px);
}
.surface {
    position: absolute; top: 0; left: 0;
    height: 100vh; width: 100vw;
    background-image: url("./img/water.png");
    background-size: 50vw;
    opacity: 0.7;
    filter: url("#turbulence");
}
.pond {
    filter: url("#turbulence2") blur(.3px);
    box-shadow: 10px 5px 1px black;
}
#tui-la {
    position: absolute; top: 0; left: 0;
    height: 100vh; width: 100vw;
}
.mark .corner{
    background-image: url("./img/corner.svg");
    background-size: contain;
    position: absolute;
    height: 56px; width: 56px;
    filter: blur(.2px);
}
.mark #ul {left: 0; top: 0; transform: rotateZ(0deg);}
.mark #ur {right: 0; top: 0; transform: rotateZ(90deg);}
.mark #br {right: 0; bottom: 0; transform: rotateZ(180deg);}
.mark #bl {left: 0; bottom: 0; transform: rotateZ(270deg);}
.mark .side{
    background-color:Crimson;
    position: absolute;
    height: 4px; width: 4px;
    filter: blur(.2px);
}
.mark #u {left: 56px; top: 4px; width: calc(100vw - 112px);}
.mark #r {top: 56px; right: 4px; height: calc(100vh - 112px);}
.mark #b {left: 56px; bottom: 4px; width: calc(100vw - 112px);}
.mark #l {top: 56px; left: 4px; height: calc(100vh - 112px);}