@keyframes moveInRight {
    0% {
        transform: translateX(10rem);
        opacity: 0;
    }

    50% {
        transform: translateX(-1rem);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    color: white;
}

.header {
    width: 100vw;
    height: 100%;

    display: grid;
    /*one column grid*/
    grid-template-columns: 100%;
    justify-content: center;
    align-items: center;
    /*adding in background image*/
    background-image: linear-gradient(to right bottom, rgba(126,213,111, 0.6), rgba(40, 180, 133, 0.3)), url(../img/ee80acca-city-6668-16682a32985.jpg);
    background-size: cover;
}

.headerPrimary {
    text-align: center;

    /*insert animation to an element*/
    animation: moveInRight 2s ease-in;
}

.cls-1{
    fill:#c3dba3;
}

#Layer_1{
    width: 100%;

    /*set svg to the bottom*/   
    position: absolute;
    bottom: 0;
}