/* Day/Night Cycles */

#weatherLayer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

/* Rain/Snow */

@-webkit-keyframes weatherFall {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 1050px;
    }
}

@-moz-keyframes weatherFall {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 1050px;
    }
}

@-o-keyframes weatherFall {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 1050px;
    }
}

@keyframes weatherFall {
    0% {
        background-position-y: 0;
    }
    100% {
        background-position-y: 1050px;
    }
}

#cloudLayer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.weather-type {
    width: 2000px;
    height: 3000px;
    background-size: 600px 600px;
    background-repeat: repeat;
    transition: opacity 5s linear;
    position: absolute;
}

/* Rain */

.cloudy {
    background: black;
    opacity: .3;
}

#weather-raindrops {
    background-image: url(../../../files/system/raindrop_scatter.svg);
    -webkit-animation: weatherFall 1.5s linear infinite;
    -moz-animation: weatherFall 1.5s linear infinite;
    -o-animation: weatherFall 1.5s linear infinite;
    animation: weatherFall 1.5s linear infinite;
}

#weather-raindrops.light {
    background-image: url(../../../files/system/raindrop_scatter_light.svg);
}

/* Snow */

.snowy {
    background: white;
    box-shadow: inset 0 0 50px 20px rgba(255,255,255,0.6);
    background: linear-gradient(to bottom,
    rgba(255,255,255,0.1)   0%,
    rgba(255,255,255,0.5)   90%,
    rgba(255,255,255,0.8)   95%,
    rgba(255,255,255,1)     100%
    );
    opacity: 0.9;
}

#weather-snowflakes {
    background-image: url(../../../files/system/snowflake_scatter.svg);
    -webkit-animation: weatherFall 2.5s linear infinite;
    -moz-animation: weatherFall 2.5s linear infinite;
    -o-animation: weatherFall 2.5s linear infinite;
    animation: weatherFall 2.5s linear infinite;
}

/* Urthquakes */

@-webkit-keyframes urthquake {
    0%      {   transform: translateX(-8px) translateY(-4px);   }
    100%    {   transform: translateX(8px) translateY(8px);     }
}

.urthquake {
    -webkit-animation: urthquake 0.08s linear infinite;
}
