Update style.css

style.css

@@ -6,29 +6,29 @@
 
 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #2A2A2A, #333333); /* Latar belakang gelap yang lebih adem */
+  background: linear-gradient(135deg, #F3F4F9, #C9D6E3);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  color: #E0E0E0; /* Warna teks terang untuk kontras yang nyaman */
+  color: #333;
   position: relative;
 }
 
 .container {
-  background: rgba(255, 255, 255, 0.9); /* Latar belakang putih transparan untuk konten */
+  background: #ffffff;
   border-radius: 15px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   padding: 40px;
   width: 100%;
-  max-width: 600px; /* Membatasi lebar maksimum untuk desktop */
+  max-width: 600px;
   text-align: center;
   position: relative;
-  margin: 0 20px; /* Memberikan margin kiri dan kanan agar tidak terlalu menempel di tepi layar */
+  margin: 0 20px;
 }
 
 h1 {
-  font-size: 2rem; /* Ukuran font lebih besar untuk desktop */
+  font-size: 2rem;
   margin-bottom: 20px;
   color: #2D3A3A;
   font-weight: 600;
@@ -85,8 +85,12 @@ button:hover {
   margin-top: 20px;
   font-size: 20px;
   font-weight: bold;
-  color: #E0E0E0; /* Teks hasil yang terang */
+  color: #333; /* Warna teks tetap seperti semula */
+  background-color: #f4f4f4; /* Latar belakang terang untuk hasil output */
+  padding: 15px;
+  border-radius: 8px;
   text-transform: uppercase;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Memberikan efek bayangan agar terlihat lebih elegan */
 }
 
 /* Watermark dengan Copyright */
@@ -111,11 +115,11 @@ body::after {
 @media (max-width: 768px) {
   .container {
     padding: 30px;
-    max-width: 100%; /* Lebar penuh di layar kecil */
+    max-width: 100%;
   }
 
   h1 {
-    font-size: 1.5rem; /* Ukuran font lebih kecil untuk mobile */
+    font-size: 1.5rem;
   }
 
   input, select {