.content {
    max-width: 600px;
    margin: 0 auto;
}

/* ========================= */

.waves {
    position: absolute;
    bottom: -500px;
    left: 0;
    right: 0;
    height: 600px;
    background-color: #ffffff00;
    transition: 500ms;
}

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

.waves::before {
    border-radius: 44%;
    background: #d01341;
    animation: waves 8s linear infinite;
}

.waves::after {
    border-radius: 44%;
    background: #2d4f95;
    animation: waves 15s linear infinite;
}

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

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