#container {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 2vw auto;
    overflow: hidden;
	background-size: cover;
}

/* Defines the position and dimensions of the Container div */
#spriteContainer 
{
    position: absolute;
    width: 100%;
    height: 100%;
}

/* This CSS rule is applied to all div elements in the Container div.
   It styles and animates each Div.
*/
#spriteContainer > div 
{
    position: fixed;
    
    /* We use the following properties to apply the fade and drop animations to each sprite.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, normal;
    animation-timing-function: linear, ease-in;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the Container div. In other words, it matches the 'img' elements
   inside the Divs which are created in the createAnObject() function.
*/
#spriteContainer > div > img {
     /* position: fixed; */
     /* width: 20vw; */
     /* height: 20vw; */

    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
       animations on each sprite.
       The createALeaf function in the sprites.js file determines whether a sprite has the 
       clockwiseSpin or counterclockwiseSpinAndFlip animation.
    */
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     transform-origin: 50% -100%;
}

/*
// on small screens like phones, largen them a little so they can be seen
@media (max-width: 700px) {
	#spriteContainer > div > img{
		width: 20vw;
		height: 20vw;
	}
}

@media (min-width: 2000px) {
	#spriteContainer > div > img{
		width: 5vw;
		height: 5vw;
	}
}
*/


/* Hides a sprite towards the very end of the animation */
@keyframes fade
{
    /* Show a sprite while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}


/* Makes a sprite fall from -300 to 600 pixels in the y-axis */
@keyframes drop
{
    /* Move a sprite to -50 pixels in the y-axis at the start of the animation */
    0%   { transform: translate(0px, -50px); } 
    /* Move a sprite to full viewport height before fading */
    100% { transform: translate(0, 100vh); }

}

/*
@keyframes clockwiseSpin
{
    0%   { transform: rotateX(-40deg) rotateY(-30deg) rotateZ(-40deg); }
    100% { transform: rotateX(40deg) rotateY(30deg) rotateZ(40deg); }
}


@keyframes counterclockwiseSpinAndFlip 
{
    0%   { transform: scale(-1, 1) rotateX(-40deg) rotateY(-30deg) rotateZ(-40deg); }
    100% { transform: scale(-1, 1) rotateX(40deg) rotateY(30deg) rotateZ(40deg); }
}
*/