Update index.css

Added English comments to index.css for better documentation.
Each CSS selector and property now has a clear explanation in English,
describing its purpose and effect on the layout or design.
No logic or functionality was changed, only comments were added
to improve readability and maintainability for developers.

Author: MarcosSoftwareEngineering

src/index.css

@@ -1,68 +1,68 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; /* Defines the default font family */
+  line-height: 1.5; /* Sets the default line height */
+  font-weight: 400; /* Sets the default font weight */
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light dark; /* Enables support for light and dark themes */
+  color: rgba(255, 255, 255, 0.87); /* Default text color */
+  background-color: #242424; /* Default background color */
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none; /* Prevents synthetic bold/italic styles */
+  text-rendering: optimizeLegibility; /* Improves text rendering for readability */
+  -webkit-font-smoothing: antialiased; /* Smooths fonts on WebKit browsers */
+  -moz-osx-font-smoothing: grayscale; /* Smooths fonts on macOS Firefox */
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+  font-weight: 500; /* Sets link font weight */
+  color: #646cff; /* Default link color */
+  text-decoration: inherit; /* Inherits text decoration from parent */
 }
 a:hover {
-  color: #535bf2;
+  color: #535bf2; /* Link color when hovered */
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  margin: 0; /* Removes default margin */
+  display: flex; /* Uses flexbox layout */
+  place-items: center; /* Centers content both vertically and horizontally */
+  min-width: 320px; /* Minimum width for responsiveness */
+  min-height: 100vh; /* Full viewport height */
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+  font-size: 3.2em; /* Large heading size */
+  line-height: 1.1; /* Tight line spacing for headings */
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+  border-radius: 8px; /* Rounded corners */
+  border: 1px solid transparent; /* Transparent border by default */
+  padding: 0.6em 1.2em; /* Button padding */
+  font-size: 1em; /* Button text size */
+  font-weight: 500; /* Button text weight */
+  font-family: inherit; /* Inherits font from parent */
+  background-color: #1a1a1a; /* Default button background */
+  cursor: pointer; /* Pointer cursor on hover */
+  transition: border-color 0.25s; /* Smooth border color transition */
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #646cff; /* Border color when hovered */
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: 4px auto -webkit-focus-ring-color; /* Outline for accessibility focus */
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: #213547; /* Text color in light mode */
+    background-color: #ffffff; /* Background color in light mode */
   }
   a:hover {
-    color: #747bff;
+    color: #747bff; /* Link hover color in light mode */
   }
   button {
-    background-color: #f9f9f9;
+    background-color: #f9f9f9; /* Button background in light mode */
   }
 }