.cls-1 {
        fill: #da1c5c;
      }

      .cls-2 {
        fill: #9e1f63;
      }

      .cls-3 {
        fill: #ec008c;
      }

      .cls-4 {
        fill: #662d91;
      }

      main{
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
      }

      main svg{
        width: 200vw;
        
      }

            #purple{
            animation: wavemaker 30s ease-in-out infinite alternate-reverse;
            opacity: 70%;
            }

            #dark_pink{
            animation: wavemaker 30s ease-in-out infinite alternate;
            opacity: 70%;
            }

            #bright_pink{
            animation: wavemaker 18s ease-in-out infinite alternate-reverse;
            opacity: 70%;
            }

            #magenta{
            animation: wavemaker 12s ease-in-out infinite alternate;
            opacity: 70%;
            }

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

            100% {transform: translateX(-40vw);}
            }