Added textures and a animated background done with particles.js and did a slight change in the level variable to round it up.

cards.css

@@ -1,4 +1,11 @@
 @import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
+@font-face {
+    font-family: "8-bit-pusab";
+  
+    src: url("./assets/fonts/8-bit-pusab.woff") format("woff"); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+  }
 *{
     transition: .3s;
 }
@@ -6,7 +13,10 @@
     cursor: pointer;
     padding-bottom: 85%;
     width: 100%;
-    background: rgba(50, 114, 210, 0.5);
+    /* background: rgba(50, 114, 210, 0.5); */
+    background: url(assets/textures/crate.png);
+    background-repeat: round;
+    background-size: cover;
     border-radius: 10px;
     margin: 3px;
 }
@@ -35,7 +45,8 @@
 }
 
 .animations {
-    background-color: rgb(80, 0, 146);
+    /* background-color: rgb(80, 0, 146); */
+    filter: invert(1);
 }
 
 .card:hover {
@@ -61,10 +72,10 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #fff;
+    color: #fff; 
     /* font-weight: 900; */
-    font-size: 50vh;
-    font-family: 'Lalezar', cursive;
+    font-size: 9vw;
+    font-family: "8-bit-pusab";
     -webkit-text-stroke: 2px rgb(10, 10, 10);
     text-shadow: -5px 14px 20px rgb(0, 0, 0);
     cursor: pointer;