.custom-shape-divider-bottom { 
    width: 200%;
    /*animation: wave 3s linear infinite;*/
}

.custom-shape-divider-bottom svg {
    height: 100px;
}

/*main needs bigger margin because of larger height of waves*/
main {
    padding-top: 8em;
    overflow-x: hidden;
    overflow-y: visible;
}

h1 {
    cursor: pointer;
    transition: transform 0.5s;
}
h1:hover { transform: scale(110%); }

/*WAVES*/
#wave2 {
    transform: translateX(-10%);
}

#wave3 {
    transform: translateX(-35%);
}

@keyframes wave1 {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes wave2 {
    0% { transform: translateX(-10%); }
    40% { transform: translateX(-50%); }
    90% { transform: translateX(0%); }
    100% { transform: translateX(-10%); }
}

@keyframes wave3 {
    0% { transform: translateX(-35%); }
    15% { transform: translateX(-50%); }
    65% { transform: translateX(0%); }
    100% { transform: translateX(-35%); }
}

#wave1.animated { animation: wave1 3.3s linear infinite; }
#wave2.animated { animation: wave2 3s linear infinite; }
#wave3.animated { animation: wave3 2.7s linear infinite; }
#wave4.animated { animation: wave1 3.6s linear infinite; }