ui updates

src/styles/Contact.css

@@ -1,10 +1,12 @@
-.contact {
+.contact 
+{
     width: 100%;
     height: 90vh;
     display: flex;
   }
   
-  .contact .leftSide {
+  .contact .leftSide 
+  {
     height: 100%;
     flex: 50%;
     background-position: center;
@@ -12,7 +14,8 @@
     background-size: cover;
   }
   
-  .contact .rightSide {
+  .contact .rightSide 
+  {
     height: 100%;
     flex: 50%;
     display: flex;
@@ -20,7 +23,8 @@
     justify-content: center;
   }
   
-  .contact .rightSide h1 {
+  .contact .rightSide h1 
+  {
     font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
       "Lucida Sans", Arial, sans-serif;
     font-weight: 10;
@@ -28,7 +32,8 @@
     margin-left: 30px;
   }
   
-  form {
+  form 
+  {
     display: flex;
     flex-direction: column;
     width: auto;
@@ -36,7 +41,8 @@
     padding: 30px;
   }
   
-  form input {
+  form input 
+  {
     height: 40px;
     width: 80%;
     border: none;
@@ -44,7 +50,8 @@
     color: black;
   }
   
-  form textarea {
+  form textarea 
+  {
     margin-top: 15px;
     height: 70px;
     width: 80%;
@@ -52,29 +59,46 @@
     border-bottom: 1px solid #121619;
     color: black;
   }
+  
   input::placeholder,
-  textarea::placeholder {
+  textarea::placeholder 
+  {
     font-weight: bold;
     color: black;
     font-family: Arial, Helvetica, sans-serif;
   }
+
   form input:focus,
-  textarea:focus {
+  textarea:focus 
+  {
     outline: none;
   }
   
-  form label {
+  form label 
+  {
     margin-top: 15px;
     color: grey;
   }
   
-  form button {
-    margin-top: 40px;
+  form button 
+  {
+    margin-top: 10px;
     width: 140px;
-    height: 40px;
+    border-radius: 20px;
+    padding: 10px;
     border: none;
     background-color: #121619;
     color: whitesmoke;
     font-size: 15px;
     cursor: pointer;
+  }
+
+  form button:hover 
+  {
+    text-decoration: none;
+    width: 160px;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+    transition: 0.3s ease-in;
   }