diff --git a/css/general.css b/css/general.css
index 18bcb1e..7a0da90 100644
--- a/css/general.css
+++ b/css/general.css
@@ -682,32 +682,13 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
   width: 400px;
   min-width: 300px;
   border-radius: 10px;
-  background-color: #0d1117;
-  background-color: #1e2227;
+  background-color: #181a1d;
   margin: 10px auto;
   padding: 10px 30px;
-  box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
+  box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
   text-align: left;
 }
 
-.list-item {
-  margin: 0 0 30px 30px;
-  padding: 10px;
-  position: relative;
-}
-
-.list-item::before {
-  content: "";
-  position: relative;
-  margin-right: 10px;
-  width: 10px;
-  height: 10px;
-  background: rgb(255, 255, 255);
-  border-radius: 999px;
-  float: left;
-  border: 3px solid rgb(44, 44, 44);
-}
-
   /* Outer Layer with the steps border */
   .outer {
     border-left: 2px solid #333;
@@ -718,11 +699,16 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     position: relative;
     margin: 0 0 20px 20px;
     padding: 10px;
-    background: #333;
+    background: rgb(49, 48, 48);
     color: gray;
     border-radius: 8px;
     max-width: 400px;
   }
+
+  .card:hover {
+    filter: brightness(120%);
+    transition: 0.5s;
+  }
   
   #signup-header {
     padding-top: 10px;
@@ -741,10 +727,11 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
     position: absolute;
     width: 10px;
     height: 10px;
-    background: white;
+    background: rgb(56, 105, 56);
     border-radius: 50%;
     left: -28px;
-    border: 2px solid rgb(155, 144, 144);
+    cursor: pointer;
+    border: 2px solid rgb(255, 255, 255);
   }
 
 #rules-description {
@@ -1045,6 +1032,18 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 #line-header {
     width: 200px;
     margin: 0 auto 5px;
+    animation: grow-wide ease 2s;
+}
+
+@keyframes grow-wide {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 abbr[title] {
@@ -1121,4 +1120,82 @@ footer li {
 footer a {
     color:rgb(108, 176, 231);
     font-size: 16px;
+}
+
+@keyframes move {
+  50% {
+    padding-left: 8px;
+    padding-right: 0px;
+  }
+  100% {
+    padding-right: 4px;
+  }
+}
+@keyframes slice {
+  60% {
+    width: 100%;
+    left: 4px;
+  }
+  100% {
+    width: 100%;
+    left: -2px;
+    padding-left: 0;
+  }
+}
+@keyframes check-01 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+  100% {
+    width: 5px;
+    top: 8px;
+    transform: rotate(45deg);
+  }
+}
+@keyframes check-02 {
+  0% {
+    width: 4px;
+    top: auto;
+    transform: rotate(0);
+  }
+  50% {
+    width: 0px;
+    top: auto;
+    transform: rotate(0);
+  }
+  51% {
+    width: 0px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+  100% {
+    width: 10px;
+    top: 8px;
+    transform: rotate(-45deg);
+  }
+}
+@keyframes firework {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
+  }
 }
\ No newline at end of file