﻿.poolwater {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #8ddbf5;
    box-shadow: inset 0 0 50px #1c637a;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    padding:10px;
    margin:auto;
}

    .poolwater::before, .water::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: var(--background);
        left: -50%;
        background-color: #ececec;
        border-radius: 40%;
        animation: moving 12s linear infinite;
    }

    .poolwater::after {
        background-color: #ececec80;
        animation-delay: 0.5s;
    }

@keyframes moving {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
