version 5, more bright bone

fire.css

@@ -24,7 +24,7 @@
     position: absolute;
     z-index: 1;
     width: 100%;
-    height: 97%;
+    height: 100%;
     min-width: 400px;
     min-height: 400px;
 }
@@ -33,11 +33,11 @@
     background-image: linear-gradient(
                 180deg,
                 rgb(0 0 0) 29% /* blending top of the smog */,
-                rgb(86, 86, 86) 80% /* making the central smog gray */,
-                transparent 88% /* ignore the fire */
+                rgb(145 75 0) 80% /* making the central smog gray */,
+                #00000000 88% /* ignore the fire */
             )
             /* linear gradient for the smog */,
-        url(noiseMedium.svg), url(noiseMedium.svg), url(noiseSmall.svg),
+        url(noiseMedium2.svg), url(noiseMedium2.svg), url(noiseSmall.svg),
         url(noiseBig.svg);
     background-blend-mode: color-burn /* smog gradient and noiseMedium */,
         color-burn /* noiseMedium and noiseMedium */,
@@ -56,13 +56,13 @@
     min-height: 400px;
 
     background-image: radial-gradient(
-                ellipse 21% 157% at 50% 87%,
+                ellipse 19% 167% at 50% 128%,
                 transparent 35%,
                 black 70%
             )
             /* limiting the hight of the fire */,
-        radial-gradient(ellipse 79% 131% at 50% 25%, transparent 44%, black 53%)
-            /* limiting the bottom of the fire to not go over the stones */;
+        radial-gradient(ellipse 28% 114% at 50% 33%, transparent 44%, black 53%);
+    /* limiting the bottom of the fire to not go over the stones */
 }
 
 .fire_lights {
@@ -73,34 +73,34 @@
     min-width: 400px;
     min-height: 400px;
     background-image: radial-gradient(
-            ellipse 48% 13% at 50% 95%,
-            #ff990033 12% /* center of fire light */,
-            #4040400c 50% /* general light outside bone */,
+            ellipse 45% 31% at 50% 88%,
+            #08040454 12% /* center of fire light */,
+            #372b1da3 42% /* general light outside bone */,
             transparent 100% /* no effect outside */
         ),
         /* horizontal lights on the ground around bone*/
             radial-gradient(
-                ellipse 22% 42% at 50% 85%,
-                #ff990033 0% /* center of fire light */,
-                #4040400c 28% /* general light outside bone */,
+                ellipse 18% 42% at 50% 86%,
+                #ffb20082 0% /* center of fire light */,
+                #ffad0017 28% /* general light outside bone */,
                 transparent 100% /* no effect outside */
             )
             /* vertical lights */;
-    mix-blend-mode: luminosity;
-    /* background-blend-mode: luminosity; */
+    mix-blend-mode: lighten;
+    background-blend-mode: color-burn;
+    filter: blur(10px) opacity(0.7);
 }
 
-.bone_back {
+.bone_front {
     z-index: 4;
     position: absolute;
     width: 100%;
     height: 100%;
-    filter: drop-shadow(0px 11px 14px black);
     background-position: 51% bottom;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
-    mix-blend-mode: overlay;
+    mix-blend-mode: color-dodge;
 }
 
 @keyframes firing {

index.html

@@ -10,7 +10,7 @@
             <div id="fire" class="fire"></div>
             <div class="fire_limits"></div>
             <div class="fire_lights"></div>
-            <div class="bone_back"></div>
+            <div class="bone_front"></div>
             <button id="start" onclick="startSound()">START THE FIRE</button>
         </div>