style: adjust the proto interface

src/Home/index.tsx

@@ -4,19 +4,16 @@ import './style.css'
 export default function App() { 
 
   return (
-    <>
-      <main class="w-screen flex bg-zinc-800">
-          <section class="w-1/2">
-            <div class="w-full px-2 flex justify-end">
-              <button>Translate</button>
-            </div>
-            {/* amber-500 */}
-            <textarea class="h-64 w-full" placeholder="Insert input text..." />
-          </section>
-
-          <textarea class="h-64 w-full" readonly />
-      </main>
-    </>
+    <main class="w-screen my-24 mx-5">
+      <div class="w-1/2 p-3 flex justify-end">
+        <button>Translate</button>
+      </div>
+      <section class="flex">
+          {/* amber-500 */}
+          <textarea class="h-64 p-2 w-1/2 bg-zinc-700" placeholder="Insert input text..." />
+          <textarea class="h-64 p-7 w-1/2 text-2xl" placeholder='Translation' readonly />
+      </section>
+    </main>
   )
 }
 

src/input.css

@@ -24,14 +24,12 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --primary-color: #f59e0b;
+  --primary-color-alt: #ca8a04;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+textarea { 
+    background-color: inherit;
 }
 
 button {
@@ -41,14 +39,17 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--primary-color);
   cursor: pointer;
   transition: border-color 0.25s;
+  font-weight: bold;
 }
 button:hover {
-  border-color: #646cff;
+  background-color: var(--primary-color-alt);
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: 0/* 4px auto -webkit-focus-ring-color; */
 }
+
+