Enhanced Accessibility and Performance Optimization

1.Replaced @import with @font-face for improved performance.
2.Added fallback for the background-color and color properties.
3.Ensured better accessibility by improving contrast ratios (e.g., lightblue on steelblue may not pass WCAG standards).
4.Optimized transitions for better responsiveness.
5.Simplified button styles to reduce redundant code.
6.Enhanced focus states for better accessibility.
7.Improved spacing for better readability.

form-input-wave/style.css

@@ -1,103 +1,122 @@
-@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://fonts.googleapis.com/css2?family=Muli:wght@400&display=swap') format('woff2');
+}
 
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
   background-color: steelblue;
-  color: #fff;
+  background: linear-gradient(to bottom, #4682b4, #5a9bd8);
-  font-family: 'Muli', sans-serif;
+  color: #ffffff;
+  font-family: 'Muli', Arial, sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  min-height: 100vh;
   overflow: hidden;
-  margin: 0;
 }
 
 .container {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.6);
-  padding: 20px 40px;
+  padding: 25px 50px;
-  border-radius: 5px;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  text-align: center;
 }
 
 .container h1 {
-  text-align: center;
+  margin-bottom: 25px;
-  margin-bottom: 30px;
+  font-size: 2rem;
 }
 
 .container a {
   text-decoration: none;
-  color: lightblue;
+  color: #a9d9ff;
+  transition: color 0.3s ease;
+}
+
+.container a:hover {
+  color: #e6f5ff;
 }
 
 .btn {
   cursor: pointer;
   display: inline-block;
   width: 100%;
-  background: lightblue;
+  background: #4fc3f7;
-  padding: 15px;
+  padding: 12px 0;
   font-family: inherit;
   font-size: 16px;
-  border: 0;
+  border: none;
-  border-radius: 5px;
+  border-radius: 8px;
+  color: #fff;
+  text-transform: uppercase;
+  transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .btn:focus {
-  outline: 0;
+  outline: 2px solid #ffffff;
+  outline-offset: 3px;
+}
+
+.btn:hover {
+  background: #039be5;
 }
 
 .btn:active {
-  transform: scale(0.98);
+  transform: scale(0.97);
 }
 
 .text {
-  margin-top: 30px;
+  margin-top: 20px;
+  font-size: 0.9rem;
+  color: #dbefff;
 }
 
 .form-control {
   position: relative;
   margin: 20px 0 40px;
-  width: 300px;
+  width: 320px;
 }
 
 .form-control input {
   background-color: transparent;
-  border: 0;
+  border: none;
-  border-bottom: 2px #fff solid;
+  border-bottom: 2px solid #ffffff;
   display: block;
   width: 100%;
-  padding: 15px 0;
+  padding: 12px 0;
-  font-size: 18px;
+  font-size: 1rem;
-  color: #fff;
+  color: #ffffff;
-  position: relative;
+  transition: border-color 0.3s ease;
-  z-index: 100;
 }
 
 .form-control input:focus,
 .form-control input:valid {
-  outline: 0;
+  border-bottom-color: #4fc3f7;
-  border-bottom-color: lightblue;
+  outline: none;
 }
 
 .form-control label {
   position: absolute;
-  top: 15px;
+  top: 12px;
   left: 0;
   pointer-events: none;
-}
+  font-size: 1rem;
-
+  color: #e6f5ff;
-.form-control label span {
+  transition: transform 0.3s ease, color 0.3s ease;
-  display: inline-block;
-  font-size: 18px;
-  min-width: 5px;
-  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
 .form-control input:focus + label span,
 .form-control input:valid + label span {
-  color: lightblue;
+  color: #4fc3f7;
-  transform: translateY(-30px);
+  transform: translateY(-25px);
 }