Update style.css

style.css

@@ -13,6 +13,7 @@ body {
   height: 100vh;
   color: #333;
   position: relative;
+  padding: 20px;
 }
 
 .container {
@@ -24,18 +25,18 @@ body {
   max-width: 600px;
   text-align: center;
   position: relative;
-  margin: 0 20px;
 }
 
 header {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
 h1 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: #2D3A3A;
   font-weight: 600;
   animation: slideIn 2s ease-out;
+  margin-bottom: 20px;
 }
 
 /* Efek animasi untuk header */
@@ -108,6 +109,7 @@ button {
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  margin-top: 20px;
 }
 
 button:hover {
@@ -127,8 +129,8 @@ button:hover {
 }
 
 footer {
-  margin-top: 40px;
-  font-size: 16px;
+  margin-top: 30px;
+  font-size: 14px;
   color: #555;
   text-align: center;
 }
@@ -147,6 +149,7 @@ footer p {
 
   h1 {
     font-size: 1.5rem;
+    margin-bottom: 15px;
   }
 
   input, select {
@@ -156,6 +159,10 @@ footer p {
   button {
     font-size: 16px;
   }
+
+  footer {
+    font-size: 12px;
+  }
 }
 
 /* Responsif untuk tampilan yang lebih besar (Tablet ke atas) */
@@ -175,4 +182,8 @@ footer p {
   button {
     font-size: 20px;
   }
+
+  footer {
+    font-size: 14px;
+  }
 }