Update style.css

style.css

@@ -13,7 +13,6 @@ body {
   height: 100vh;
   color: #333;
   position: relative;
-  flex-direction: column;
 }
 
 .container {
@@ -26,6 +25,7 @@ body {
   text-align: center;
   position: relative;
   margin: 0 20px;
+  padding-bottom: 80px;  /* Menambah ruang bawah di container agar footer tidak terlalu mepet */
 }
 
 h1 {
@@ -109,27 +109,43 @@ button:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Hapus watermark body::after yang muncul sebelumnya */
-body::after {
-  content: none; /* Menghapus watermark dari body */
-}
-
-/* Gaya untuk watermark di footer */
+/* Styling untuk Footer */
 footer {
-  background-color: black;
-  color: white;
+  background-color: black;  /* Warna hitam untuk footer */
+  color: white;  /* Warna tulisan di dalam footer menjadi putih */
   text-align: center;
-  padding: 10px 0;
+  padding: 30px 0;  /* Menambahkan jarak atas dan bawah lebih besar untuk footer */
   font-size: 16px;
   position: relative;
-  margin-top: 20px;
+  margin-top: 40px;  /* Memberikan jarak antara footer dan konten */
+}
+
+/* Watermark dengan Copyright */
+footer::before {
+  content: "© 2025 Teggar Eka Mustaqim Sitanggang";
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
 
 /* Responsif untuk Mobile */
 @media (max-width: 768px) {
+  footer {
+    padding: 20px 0;  /* Mengurangi padding di footer untuk tampilan mobile */
+  }
+
   .container {
-    padding: 30px;
-    max-width: 100%;
+    padding-bottom: 60px;  /* Menambah ruang bawah untuk footer di tampilan mobile */
   }
 
   h1 {