header {
overflow: hidden;
}

header svg {
    width: 200vw;
   }

.st0 {
    fill: #3e4f44;
    stroke: #000;
}

.st1 {
    fill: #6c503b;
    stroke: #000;
}

.st2 {
    fill: #eef4f1;
}

.st3 {
    fill: #3b7d5a;
}

.st4 {
    fill: #205c44;
}

/* animation styles */

#darkgreen-5 {
    animation: wavemaker 66s ease-in-out infinite alternate;
}

#brown-4 {
    animation: wavemaker 48s ease-in-out infinite alternate reverse;
}

#white-3 {
    animation: wavemaker 30s ease-in-out infinite alternate;
}

#lightgreen-2 {
    animation: wavemaker 18s ease-in-out infinite alternate reverse;
}

#midgreen-1 {
    animation: wavemaker 12s ease-in-out infinite alternate;
}

@keyframes wavemaker {
    0% {
        transform: translateX(-4vw);
    }
    100% {
        transform: translateX(-90vw);
    }
}

#Layer_1 {
    position: relative;
    z-index: 1;
}

main, header {
    position: relative;
    z-index: 10;
}