buttons and input css

css/style.css

@@ -134,24 +134,37 @@ textarea::placeholder {
     caret-color: #fff;
 }
 
+input[type="file"] {
+    max-width: 12rem;
+    margin: 0.5rem;
+}
+
 #save-area {
     width: 100%;
     height: 5.65rem;
-    margin: .5rem 2px .3rem 2px;
+    margin: 0.5rem 2px 0.3rem 2px;
 }
 
 .buttons {
     display: flex;
-    align-items: center;
+    flex-direction: row;
+    align-items: flex-end;
     justify-content: space-between;
 }
 
 .input-buttons {
+    display: flex;
     flex-direction: column;
 }
 
+.checkboxes {
+    margin-top: 1rem;
+}
+
 .button {
     display: flex;
+    align-items: center;
+    max-width: max-content;
     font-size: 1rem;
     font-weight: 500;
     font-family: 'Heebo', sans-serif;
@@ -178,6 +191,17 @@ textarea::placeholder {
     outline-offset: -2px;
 }
 
+@media screen and (max-width: 360px) {
+    .buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+    .input-buttons {
+        align-items: center;
+        justify-content: center;
+    }
+}
+
 p {
     margin-top: 0.6rem;
     margin-bottom: 0.6rem;

index.html

@@ -51,7 +51,7 @@
             <div class="input-buttons">
                 <!-- <button id="save-area-file" class="button" onclick="">Load Save</button> -->
                 <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this)">
-                <button id="save-area-read" class="button" onclick="HKReadTextArea();">Analyze</button>
+                <button id="save-area-read" class="button" onclick="HKReadTextArea();">Analyze Text</button>
             </div>
 
             <div class="checkboxes">