fix: add hover effect to counter display

Author: danielaEsc

style.css

@@ -1,65 +1,72 @@
 body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f0f2f5;
 }
 
 h1 {
-    color: #333;
+  color: #333;
 }
 
 .counter-display {
-    font-size: 4rem;
-    font-weight: bold;
-    margin: 1rem 0;
-    color: #2c3e50;
+  font-size: 4rem;
+  font-weight: bold;
+  margin: 1rem 0;
+  color: #2c3e50;
+  transition: transform 0.2s ease;
+}
+
+.counter-display:hover {
+  transform: scale(1.05);
 }
 
 .buttons {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
 }
 
 .btn {
-    padding: 10px 20px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    transition: background-color 0.3s, transform 0.1s;
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  transition:
+    background-color 0.3s,
+    transform 0.1s;
 }
 
 .btn:active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }
 
 .decrease {
-    background-color: #e74c3c;
-    color: white;
+  background-color: #e74c3c;
+  color: white;
 }
 
 .decrease:hover {
-    background-color: #c0392b;
+  background-color: #c0392b;
 }
 
 .reset {
-    background-color: #95a5a6;
-    color: white;
+  background-color: #95a5a6;
+  color: white;
 }
 
 .reset:hover {
-    background-color: #7f8c8d;
+  background-color: #7f8c8d;
 }
 
 .increase {
-    background-color: #2ecc71;
-    color: white;
+  background-color: #2ecc71;
+  color: white;
 }
 
 .increase:hover {
-    background-color: #27ae60;
+  background-color: #27ae60;
 }