From 1f4c13e84096d9c9e503216237d25ced0fa82ae4 Mon Sep 17 00:00:00 2001
From: Alec Dilanchian <alec.dilanchian@gmail.com>
Date: Sun, 20 Nov 2022 21:41:27 -0500
Subject: [PATCH] Making vertical instead of horizontal

---
 pages/index.js   |  2 +-
 pages/styles.css | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index aac220c..8dabcc8 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -49,7 +49,7 @@ const Home = () => {
               onChange={onChange}
             />
             <textarea
-              className="text-area"
+              className="text-area text-area-output"
               placeholder="your lyrics and song titles will go here"
               value={output}
               disabled
diff --git a/pages/styles.css b/pages/styles.css
index 265011f..7042961 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -50,6 +50,7 @@ body {
 
 .text-container {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%
@@ -60,11 +61,11 @@ body {
             serif;
     color: #000;
     width: 100%;
-    height: 400px;
+    height: 75px;
     font-size: 14px;
     border-radius: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
     padding: 5px;
     background-color: #EDF2F7;
     border-color: rgba(118, 118, 118, 0.3);
@@ -73,6 +74,7 @@ body {
 
 .text-area-output {
     position: relative;
+    height: 250px;
 }
 
 .generate-button {
@@ -121,7 +123,7 @@ body {
 .lds-ring {
     display: inline-block;
     position: relative;
-    width: 20px;
+    width: px;
     height: 20px;
 }