modified the form color and perofrmance desktop

Author: yonasdesbelegebre

Form-Controls/index.html

@@ -5,11 +5,11 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
-    <meta name="description" content="" />
+    <meta name="description" content="The page Contains Form to submit customer information about T-shirts" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
     input:valid{
-    border:2px solid blue;
+    border:2px solid yellow;
 }
 input:invalid:not(:placeholder-shown){
     border:2px solid red;
@@ -24,7 +24,7 @@ <h1>Product Pick</h1>
       <form>
         <!-- -->
         <div>
-        <label for="customername">Customer name: </label>
+        <label for="customername">Customer name *: </label>
         <input type="text" id="customername" name="customername" required 
         pattern="^[A-Za-z]{2,}$" 
         placeholder="Customer name"/>
@@ -38,7 +38,7 @@ <h1>Product Pick</h1>
         </div>
 
         <div>
-        <label for="color">T-shirt color:</label>
+        <label for="color">T-shirt color *:</label>
         <div class="control">
         <label class="t-color">
         <input type="radio" name="color" value="Black"  required/>
@@ -55,8 +55,8 @@ <h1>Product Pick</h1>
         </div>
       </div>
       <div>
-        <label for="sizes">T-shirt size:</label>
-        <select name="size" id="sizes" required>
+        <label for="sizes">T-shirt size *:</label>
+        <select name="sizes" id="sizes" required>
         <option value="xs">XS</option>
         <option value="s">S</option>
         <option value="m">M</option>

Form-Controls/style.css

@@ -5,7 +5,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 40px;
+    padding: 25px;
 }
 
 header h1 {
@@ -14,14 +14,17 @@ header h1 {
 }
 
 form {
-    background: #ffffff;
+    background: skyblue;
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 400px;
 }
-
+input:focus {
+    border-color: #3498db;
+    outline: none;
+}
 /* Labels and Inputs */
 label {
     display: block;
@@ -43,19 +46,6 @@ select,button {
     transition: border-color 0.3s ease;
 }
 
-/* Validation Styling */
-input:focus {
-    outline: none;
-    border-color: #3498db;
-}
-
-
-.control {
-    margin-top: 2px;
-    display: flex;
-    gap: 15px;
-}
-
 .radio {
     display: flex;
     align-items: center;
@@ -68,7 +58,6 @@ input:focus {
     border: none;
     cursor: pointer;
     font-size: 1rem;
-    transition: background-color 0.3s ease;
 }
 
 /* Footer */