dos

Public/static/css/index.css

@@ -49,7 +49,10 @@ input::-webkit-input-placeholder {
   overflow: hidden;
 }
 
-//leaf animation css
+.leafContainer img {
+  width: auto;
+  height: auto;
+} 
 /* Defines the position and dimensions of the leafContainer div */
 .leafContainer
 {
@@ -57,22 +60,6 @@ input::-webkit-input-placeholder {
   width: 100%;
   height: 100%;
 }
-/* This CSS rule is applied to all div elements in the leafContainer div.
-   It styles and animates each leafDiv.
-*/
-.leafContainer > div
-{
-  position: absolute;
-  width: 81px;
-  height: 81px;
-  /* We use the following properties to apply the fade and drop animations to each leaf.
-     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 leafContainer div. In other words, it matches the 'img' elements
    inside the leafDivs which are created in the createALeaf() function.

Public/static/js/leaves.js

@@ -113,7 +113,7 @@ function createALeaf()
     var leafDiv = document.createElement('div');
     var image = document.createElement('img');
     /* Randomly choose a leaf image and assign it to the newly created element */
-    image.src = window.base_resource_url + '/image2/snow-' + randomInteger(1, 3) + '.png';
+    image.src = window.base_resource_url + '/image2/snow-' + randomInteger(1, 4) + '.png';
     console.log(randomInteger(1, 3));
     leafDiv.style.top = "-100px";
     /* Position the leaf at a random location along the screen */