/* body {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/1-default/soybean.png'),
        url('/static/img/1-default/soybean.png');
    background-color: #cc9b6d;
    background-size: 100px 100px, 100px 100px;
    background-repeat: repeat, repeat;
    background-position:  0 0, 50px 50px;
    background-blend-mode: overlay, overlay;
    animation: movePattern 10s linear infinite;
} */

body {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/1-default/kelp.png'),
        url('/static/img/1-default/kelp.png');
    background-color: #32b617;
    background-size: 100px 100px, 100px 100px;
    background-repeat: repeat, repeat;
    background-position:  0 0, 50px 50px;
    background-blend-mode: overlay, overlay;
    animation: movePattern 10s linear infinite;
}

body.egg {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/egg-inc/egg.png');
    background-color: #cc62d6;
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position:  0 0;
    background-blend-mode: overlay;
    animation: movePattern-single 20s linear infinite;
}

body.sushi {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/svz/sushi.png'),
        url('/static/img/svz/sushi.png');
    background-color: #e4a78e;
    background-size: 100px 100px, 100px 100px;
    background-repeat: repeat, repeat;
    background-position:  0 0, 50px 50px;
    background-blend-mode: overlay, overlay;
    animation: movePattern 10s linear infinite;
}

body.sunflower {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/pvz2/sunflower.png');
    background-color: #dfd54a;
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position:  0 0;
    background-blend-mode: overlay;
    animation: movePattern-single 20s linear infinite;
}

body.cat {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/battle-cats/cat.png'),
        url('/static/img/battle-cats/tank-cat.png');
    background-color: #82dbc1;
    background-size: 100px 100px, 100px 100px;
    background-repeat: repeat, repeat;
    background-position:  0 0, 50px 50px;
    background-blend-mode: overlay, overlay;
    animation: movePattern-long 10s linear infinite;
}

body.talpia {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: 
        url('/static/img/2-softwares/talpia/talpia.png');
    background-color: #f7bc79;
    background-size: 200px 200px;
    background-repeat: repeat;
    background-position:  0 0;
    background-blend-mode: overlay;
    animation: movePattern-talpia 20s linear infinite;
}

@keyframes movePattern {
    0% {
        background-position: 0 0, 50px 50px;
    }
    100% {
        background-position: 50px 50px, 100px 100px;
    }
}

@keyframes movePattern-single {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

@keyframes movePattern-long {
    0% {
        background-position: 0 0, 50px 50px;
    }
    100% {
        background-position: 100px 100px, 150px 150px;
    }
}

@keyframes movePattern-talpia {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200px 200px;
    }
}