add longer flames, add flickering animation, clean the css

fire.css

@@ -1,5 +1,6 @@
 * {
     margin: 0;
+    width: 100%;
     height: 100%;
 }
 
@@ -10,22 +11,16 @@
 .bone_back {
     z-index: 0;
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-position: 51% bottom;
+    background-position: 51% 100%;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
-    filter: drop-shadow(0px 10px 15px black);
+    animation: flickering 10s cubic-bezier(0.4, 0, 1, 1) infinite;
 }
 
 .fire {
-    position: absolute;
     z-index: 1;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
 }
 
 .fire.on {
@@ -40,16 +35,12 @@
 }
 
 .fire_limits {
-    position: absolute;
     z-index: 2;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
 
     background-image: radial-gradient(
                 ellipse 21% 24% at 50% 81%,
-                white 30%,
+                #cb8f8f 30%,
                 black 52%
             )
             /* limiting the hight of the fire */,
@@ -60,12 +51,9 @@
 }
 
 .fire_lights {
-    position: absolute;
     z-index: 3;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
+
     background-image: radial-gradient(
             ellipse 45% 31% at 50% 88%,
             #08040454 12% /* center of fire light */,
@@ -88,12 +76,12 @@
 .bone_front {
     z-index: 4;
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-position: 51% bottom;
+
+    background-position: 51% 100%;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
+    background-blend-mode: color-burn;
     mix-blend-mode: color-dodge;
 }
 
@@ -110,17 +98,31 @@
     }
 }
 
+@keyframes flickering {
+    0% {
+        filter: brightness(1);
+    }
+    25% {
+        filter: brightness(12);
+    }
+    66% {
+        filter: brightness(5);
+    }
+    80% {
+        filter: brightness(21);
+    }
+}
+
 button {
-    position: fixed;
+    z-index: 5;
+    position: absolute;
+
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     font-size: xx-large;
     font-family: monospace;
     color: rgb(98, 48, 1);
-    background-color: #000000e1;
+    background-color: #000000;
     border: none;
     cursor: pointer;
-    z-index: 5; /* Ensure button is on top */
 }