* { 
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

body {
    background-color: rgb(255, 222, 77);
    color: white;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

header {
    overflow: hidden;
}
header svg {
    width: 200vw;
}





.st0{
    fill:#BAFFEF;
}

.st1{
    fill:#B0FFC1;
}

.st2{
    fill:#F1FFC8;
}

.st3{
    fill:#FFFFFB;
}

/* animations  */

#cyan {
    animation: wavemaker 40s ease-in-out infinite alternate-reverse;

}

#green {
    animation: wavemaker 25s ease-in-out infinite alternate;

}

#yellow {
    animation: wavemaker 18s ease-in-out infinite alternate-reverse;

}

#white {
    animation: wavemaker 12s ease-in-out infinite alternate;

}

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