diff --git a/index.html b/index.html
index 115ae83..beeaa4d 100644
--- a/index.html
+++ b/index.html
@@ -35,14 +35,14 @@
             </div>
         </div>
 
-        <div class="container mx-auto h-screen px-1 py-2 text-center">
+        <div class="container mx-auto h-[calc(100vh-3rem)] px-1 py-2 text-center">
             <textarea 
-                class="w-full p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
+                class="w-full h-[calc(100%-2.5rem)] p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
                 id="lyricInput" 
                 rows="20"
                 placeholder="Enter your lyric text here" 
                 required></textarea>
-            <button class="bg-orange-400 text-black rounded-md px-5 py-1 m-2" id="plainInputParser">Load</button>
+            <button class="h-8 bg-orange-400 text-black rounded-md px-5 py-1 m-2" id="plainInputParser">Load</button>
         </div>
 
         <div class="container mx-auto px-1 py-2 text-center hidden" id="syncer">
diff --git a/output.css b/output.css
index 8bd0353..b5edfb1 100644
--- a/output.css
+++ b/output.css
@@ -634,6 +634,38 @@ video {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-\[calc\(100\%-20rem\)\] {
+  height: calc(100% - 20rem);
+}
+
+.h-\[calc\(100\%-40px\)\] {
+  height: calc(100% - 40px);
+}
+
+.h-\[calc\(100vh-2\.5rem\)\] {
+  height: calc(100vh - 2.5rem);
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-\[calc\(100\%-2\.5rem\)\] {
+  height: calc(100% - 2.5rem);
+}
+
+.h-\[calc\(100vh-3rem\)\] {
+  height: calc(100vh - 3rem);
+}
+
 .w-44 {
   width: 11rem;
 }