updates

styles/main.css

@@ -32,7 +32,6 @@ body {
     width: 100%;
     margin: 0px;
     padding: 40px;
-    padding-bottom: 100px;
     top: 0;
     justify-content: center;
     background-color: var(--dark-color);

styles/tw_main.css

@@ -47,30 +47,10 @@
   position: fixed
 }
 
-.absolute {
-  position: absolute
-}
-
-.top-4 {
-  top: 1rem
-}
-
-.left-4 {
-  left: 1rem
-}
-
-.right-4 {
-  right: 1rem
-}
-
 .top-0 {
   top: 0px
 }
 
-.right-0 {
-  right: 0px
-}
-
 .left-0 {
   left: 0px
 }
@@ -79,8 +59,16 @@
   z-index: -10
 }
 
-.mb-0 {
-  margin-bottom: 0px
+.mt-10 {
+  margin-top: 2.5rem
+}
+
+.mt-auto {
+  margin-top: auto
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem
 }
 
 .mb-1 {
@@ -91,74 +79,48 @@
   display: block
 }
 
-.h-10 {
-  height: 2.5rem
-}
-
-.h-28 {
-  height: 7rem
-}
-
-.h-96 {
-  height: 24rem
-}
-
-.h-full {
-  height: 100%
-}
-
-.h-8 {
-  height: 2rem
-}
-
-.h-4 {
-  height: 1rem
+.flex {
+  display: flex
 }
 
 .h-6 {
   height: 1.5rem
 }
 
-.w-10 {
-  width: 2.5rem
-}
-
-.w-28 {
-  width: 7rem
-}
-
-.w-96 {
-  width: 24rem
-}
-
 .w-full {
   width: 100%
 }
 
-.bg-slate-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity))
+.flex-col {
+  flex-direction: column
 }
 
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity))
+.border {
+  border-width: 1px
 }
 
-.text-slate-600 {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity))
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity))
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem
 }
 
-.opacity-25 {
-  opacity: 0.25
+.font-bold {
+  font-weight: 700
 }
 
 .opacity-50 {
   opacity: 0.5
 }
+
+.opacity-20 {
+  opacity: 0.2
+}
+
+.opacity-40 {
+  opacity: 0.4
+}