body {
    background: url("flyinghearts.gif") repeat;
    background-color: #ffd9e0;
    animation: bg-scroll 3s infinite linear 0s;
    font-family: 'Schibsted Grotesk', sans-serif;
}

ul {
    list-style: url("heart-sparkle.gif");
}

/* Classes */

.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex2 {
    display: flex;
    justify-content: space-around;
}

.container {
    background-color: #fff;
    padding: 2em;
    border-radius: 2em;
    justify-self: center;
    margin: 3em 10em 3em 10em;
}

.container2 {
    padding: 2em;
    justify-self: center;
    margin: 3em 10em 3em 10em;  
}

.ex-1 {
    margin: 0 8em 1em 8em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    border: solid pink 5px;
}

.ex-2 {
    margin: 0 8em 1em 8em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll2 3s infinite linear 0s;
    border: solid pink 5px;
    max-width: 100%;
    height: auto;
}

.ex-3 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll2 3s infinite linear 0s;
    border: solid pink 5px;
}

.ex-4 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll3 3s infinite linear 0s;
    border: solid pink 5px;
}

.ex-5 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll4 3s infinite linear 0s;
    border: solid pink 5px;
}

.ex-6 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll5 3s infinite linear 0s;
    border: solid pink 5px;
}

.ex-7 {
    padding: 1em;
    margin: 1em;
    background: url("flyinghearts.gif") repeat;
    text-align: center;
    animation: bg-scroll 4s infinite linear 0s;
    border: solid pink 5px;
}

.ex-8 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll2 1s infinite linear 0s;
    border: solid pink 5px;
}

.ex-9 {
    padding: 1em;
    margin: 1em;
    background: url("flowers.jpg") repeat;
    text-align: center;
    animation: bg-scroll2 8s infinite linear 0s;
    border: solid pink 5px;
}

/* Animation */

/* For body */
@keyframes bg-scroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -200px -100px;
    }
}

/* Examples */

@keyframes bg-scroll2 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 320px 320px;
    }
}

@keyframes bg-scroll3 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -320px -320px;
    }
}

@keyframes bg-scroll4 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -320px 320px;
    }
}

@keyframes bg-scroll5 {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 320px -320px;
    }
}