fix css for serverdetails

src/pages/ServerDetails/ServerDetails.module.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   color: var(--text-color);
-  width: 100%; 
+  width: 100%;
   box-sizing: border-box; 
 }
 
@@ -16,8 +16,8 @@
   background-color: var(--card-bg-color);
   width: 100%;
   max-width: 60rem; 
-  border-radius: 1rem;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 1.5rem;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 }
 
@@ -28,23 +28,46 @@
 }
 
 .formGroup label {
-  font-weight: bold;
-  margin-bottom: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
   font-size: 1.4rem;
+  color: var(--label-color);
 }
 
 .formGroup input,
 .formGroup select {
-  width: 100%; 
+  width: 100%;
   padding: 1.2rem;
-  height: 4rem;
+  height: auto;  
   background-color: var(--input-bg-color);
   border: 1px solid var(--input-border-color);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   color: var(--text-color);
   font-size: 1.2rem;
-  line-height: 1.4rem; 
+  line-height: 1.5rem;  
   box-sizing: border-box;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.formGroup input:focus,
+.formGroup select:focus {
+  border-color: var(--focus-border-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  outline: none;
+}
+
+/* Chrome- styles */
+@supports (-webkit-appearance: none) {
+  .formGroup select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ddd" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 1.2rem center;
+    background-size: 1rem;
+    padding-right: 3rem; 
+  }
 }
 
 .saveButton,
@@ -52,9 +75,9 @@
   padding: 1.2rem 2.5rem;
   color: var(--button-text-color);
   border: none;
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s ease, transform 0.3s ease;
   font-size: 1.2rem;
   margin-top: 1rem;
 }
@@ -65,7 +88,17 @@
 
 .quitButton {
   background-color: gray;
-  margin-left: 1rem; 
+  margin-left: 1rem;
+}
+
+.saveButton:hover,
+.quitButton:hover {
+  transform: translateY(-3px);
+}
+
+.saveButton:active,
+.quitButton:active {
+  transform: translateY(0);
 }
 
 .saveButton:hover {
@@ -73,13 +106,14 @@
 }
 
 .error {
-  color: red;
+  color: var(--error-color);
   font-size: 1.2rem;
 }
 
 .details h1 {
   font-size: 2.5rem;
   margin-bottom: 3rem;
+  color: var(--header-color);
 }
 
 @media (max-width: 768px) {
@@ -90,15 +124,15 @@
 
   .formGroup input,
   .formGroup select {
-    height: 3rem;
-    font-size: 1rem;
+    height: auto;
+    font-size: 1.1rem;
     padding: 1rem;
   }
 
   .saveButton,
   .quitButton {
     padding: 1rem 2rem;
-    font-size: 1rem;
+    font-size: 1.1rem;
   }
 
   .details h1 {
@@ -106,11 +140,3 @@
     margin-bottom: 2rem;
   }
 }
-
-.formGroup input[type="number"],
-.formGroup input[type="text"],
-.formGroup select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}