:root{
    --color: #111;
}

.main{
    position: relative;
    height: 15vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}


/*  waves */

.waves{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background-color: var(--color);
    box-shadow: inset 0 0 50px #111;
    transition: 10ms;
}

.waves::before,
.waves::after{
    content: '';
    position: absolute;
    width: 300vw;
    height: 300vw;
    top: -73.1vw;
    left: 50%;
    transform: translate(-30%, -30%);
}

.waves::before{
    border-radius: 44%;
    background: white;
    animation: waves 35s linear infinite;
}

.waves::after{
    border-radius: 44%;
    background: rgb(255, 255, 255);
    animation: waves 30s linear infinite;
}

@keyframes waves{
    0%{
        transform: translate(-50%, -75%) rotate(0deg);
    }

    100%{
        transform: translate(-50%, -75%) rotate(360deg);
    }
}