/*
 *       ___      ___       ___  __    __   __   __  
 * |  | |__   /\   |  |__| |__  |__)  /  ` /__` /__` 
 * |/\| |___ /~~\  |  |  | |___ |  \ .\__, .__/ .__/ 
 *
 * Minecraft weather effects with pure CSS
 * © Copyright 2014 Moritz Marquardt
 *
 * https://github.com/moqmar/weather.css
 *
 * Licensed under MIT License (http://opensource.org/licenses/MIT)
 */

/* main element */
.weather {
    position: relative;
    overflow: hidden;
}
    /* pseudo elements: positioning and setup */
    .weather:before, .weather:after {
        content: "";
        position: absolute;
        left: -50%;
        top: -50%;
        right: -50%;
        bottom: -50%;
        z-index: 1;
        pointer-events: none;
        background: transparent repeat;
        opacity: 0.7;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
        -webkit-animation-name: weather;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-name: weather;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    .weather:after {
        opacity: 0.8;
        -webkit-animation-name: weather2;
        animation-name: weather2;
    }
    /* rain (fast, rain.png) */
    .weather.rain:before, .weather.rain:after {
        background-image: url(data:image/png;base64,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);
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
    }

    .weather.rain:after {
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
    }
    /* snow (slow, snow.png) */
    .weather.snow:before, .weather.snow:after {
        background-image: url(snow.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
    }

    .weather.snow:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    /* snowbig (slow, snowbig.png) */
    .weather.snowbig:before, .weather.snowbig:after {
        background-image: url(snowbig.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
    }

    .weather.snowbig:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    /* bats (slow, bats.png) */
    .weather.bats:before, .weather.bats:after {
        background-image: url(bats.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.bats:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    /* spiders (slow, spiders.png) */
    .weather.spiders:before, .weather.spiders:after {
        background-image: url(spiders.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.spiders:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    /* circle (slow, circle.png) */
    .weather.circle:before, .weather.circle:after {
        background-image: url(../images/lemons.png);
        -webkit-animation-duration: 12s;
        animation-duration: 12s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.circle:after {
        -webkit-animation-duration: 9.5s;
        animation-duration: 9.5s;
    }
    /* stars (slow, stars.png) */
    .weather.stars:before, .weather.stars:after {
        background-image: url(stars.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.stars:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }
    /* circle-blue (slow, circle-blue.png) */
    .weather.circle-blue:before, .weather.circle-blue:after {
        background-image: url(circle-blue.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.circle-blue:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }

    /* silver (slow, circle-silver.png) */
    .weather.silver:before, .weather.silver:after {
        background-image: url(circle-silver.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.silver:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }




    /* hearts (slow, hearts.png) */
    .weather.hearts:before, .weather.hearts:after {
        background-image: url(hearts.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.hearts:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }

    /* fairy (slow, fairy.png) */
    .weather.fairy:before, .weather.fairy:after {
        background-image: url(fairy.png);
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .weather.fairy:after {
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
    }

/* animation keyframes */
@-webkit-keyframes weather {
    from {
        background-position: 0 0px;
    }

    to {
        background-position: 0 1024px;
    }
}

@keyframes weather {
    from {
        background-position: 0 0px;
    }

    to {
        background-position: 0 1024px;
    }
}

@-webkit-keyframes weather2 {
    from {
        background-position: 64px 64px;
    }

    to {
        background-position: 64px 1088px;
    }
}

@keyframes weather2 {
    from {
        background-position: 64px 64px;
    }

    to {
        background-position: 64px 1088px;
    }
}