body{
    background: #b29dd2e3;
}
h1{
    font-size: 45px;
    padding: 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
a{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
nav,
header{
    padding: 20px;
        text-align: center;
        background: #341171;
}
nav,
a {
    color: rgb(112, 75, 165);
    opacity: 0.6;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 30px;
}

nav,
a:hover {
    color: white;
    opacity: 1;
}
svg{
    width: 150vw;
}

.st0{
    fill:#301840;}

.st1{
    fill:#A180BA;}

.st2{
    fill:#8360aa;}

.st3{
    fill:#bbaad5;}

.st4{
    fill:#f1f1f1;}

/* animation styles */

#mauve{
    animation: wavemaker 17s ease-in-out infinite alternate;
}

#lilac{
    animation: wavemaker 13s ease-in-out infinite alternate-reverse;
}

#violet{
    animation: wavemaker 9s ease-in-out infinite alternate;
}

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

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

@media screen and (max-width: 768px){
    svg{
        width: 100vw;
    }
    
}
@media screen and (min-width: 1440px){
    svg{
        width: 105vw;
    }
    
}