Update style.css

clear code

Author: Rohit12012007

Countdown_Timer/style.css

@@ -4,41 +4,51 @@
     box-sizing: border-box;
 }
 
-body{
-    
+body {
+    /* Use a background image that covers the whole body */
     background-image: url(./deepavali.jpg);
-    background-size: contain;
+    background-size: cover; /* Changed to cover for better responsiveness */
     background-position: center center;
+
+    /* Center content and provide a minimum height for the viewport */
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
+
+    /* Set the font family and color for the text */
     font-family: 'Roboto', sans-serif;
-     margin-top: 4rem;
-    color:  #ffae42;
+    margin: 0; /* Reset margin to remove default body margin */
+    color: #ffae42; /* Set the text color */
 }
-.countdown-container{
+
+/* Countdown container layout */
+.countdown-container {
     display: flex;
-    
 }
-h1{
+
+/* Main heading style */
+h1 {
     font-size: 4rem;
-    margin-top: 100 rem;
-     
+    margin-top: 2rem; /* Adjusted for a more reasonable top margin */
 }
-.big-text{
+
+/* Big text for countdown numbers */
+.big-text {
     font-weight: bold;
     font-size: 8rem;
-    line-height: 0.5;
-    margin: 1rem 2rem;
-
+    line-height: 0.5; /* Adjusted for spacing between lines */
+    margin: 1rem 2rem; /* Consistent margin around each number */
 }
-.countdown-el{
+
+/* Individual countdown element styling */
+.countdown-el {
     text-align: center;
-    margin-left: 2rem;
+    margin: 0 2rem; /* Center text and space elements evenly */
 }
-.countdown-el span{
-    margin-left: -1 rem;
-    margin-top: 50 rem;
+
+/* Span styling for countdown labels */
+.countdown-el span {
+    margin-top: 1rem; /* Adjusted to provide proper spacing above the label */
     font-size: 2rem;
-}
+}