#Chinese_LanternsContainer 
{
    position: fixed;
    width: calc(100% - 100px);
    height: 100vh;
    z-index:1; 
    pointer-events:none;
}
#Chinese_LanternsContainer > div 
{
    position: absolute;
    width: 50px;
    height: 50px;
    
    /* We use the following properties to apply the fade and drop animations to each Chinese_Lanterns.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the Chinese_LanternsContainer div. In other words, it matches the 'img' elements
   inside the Chinese_LanternsDivs which are created in the createAChinese_Lanterns() function.
*/
#Chinese_LanternsContainer > div > img {
     position: absolute;
     width: 50px;
     height: 50px;

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


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


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

/* Rotates a Chinese_Lanterns from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    /* Rotate a Chinese_Lanterns by -50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-50deg); }
    /*  Rotate a Chinese_Lanterns by 50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(50deg); }
}


/* Flips a Chinese_Lanterns and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    /* Flip a Chinese_Lanterns and rotate it by 50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    /* Flip a Chinese_Lanterns and rotate it by -50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}