A bit of styling

Author: snelg

index.html

@@ -12,7 +12,7 @@
             <label>
                 Word list (separated by commas or linebreaks)
                 <br>
-                <textarea style="width: 99%;" :rows="Math.max(listLength,2)" x-model="wordBox" @input="changeWordBox()"></textarea>
+                <textarea placeholder="Add words here..." style="width: 99%;" :rows="Math.max(listLength,2)" x-model="wordBox" @input="changeWordBox()"></textarea>
             </label>
         </div>
         <br>
@@ -74,7 +74,7 @@
                         <tbody>
                         <template x-for="(word, index) in node.words">
                             <tr x-show="word != ''">
-                                <td x-text="word"></td>
+                                <td class="wordhere" x-text="word"></td>
                                 <template x-for="(exists, index) in node.matrix[index]">
                                     <td class="pickercol" :class=" node.colors[index] + (hindex == index ? ' hovering' : '')" @click.stop="selectLetter(node, index)" @mouseenter="hindex = index" @mouseleave="hindex = -1">
                                         <template x-if="exists"><span>X</span></template>
@@ -119,7 +119,7 @@
                                 <tbody>
                                 <template x-for="(word, index) in node.words">
                                     <tr x-show="word != ''">
-                                        <td x-text="word"></td>
+                                        <td class="wordhere" x-text="word"></td>
                                         <template x-for="(exists, index) in node.matrix[index]">
                                             <td class="pickercol" :class="node.colors[index] + (hindex == index ? ' hovering' : '')" @click.stop="selectLetter(node, index)" @mouseenter="hindex = index" @mouseleave="hindex = -1">
                                                 <template x-if="exists"><span>X</span></template>

main.css

@@ -1,6 +1,37 @@
-body{
+@media (min-width: 576px) {
+    body {
+        max-width: 510px;
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+@media (min-width: 768px) {
+    body {
+        max-width: 700px;
+    }
+}
+@media (min-width: 1024px) {
+    body {
+        max-width: 950px;
+    }
+}
+@media (min-width: 1280px) {
+    body {
+        max-width: 1200px;
+    }
+}
+@media (min-width: 1536px) {
+    body {
+        max-width: 1450px;
+    }
+}
+body {
     -webkit-print-color-adjust:exact !important;
     print-color-adjust:exact !important;
+    font-family: sans-serif;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
 }
 th, td { border: 1px solid; vertical-align: top; }
 table { border-collapse: collapse; border: 1px solid; }
@@ -15,6 +46,7 @@ table { border-collapse: collapse; border: 1px solid; }
 .picker { margin: 0.5em; }
 .gridclicky { place-content: center; padding: 1em; }
 .pickersum { font-weight: normal; }
+.wordhere { padding-left: 0.5em; }
 .dupewarn {
     border: 2px solid red;
     margin-bottom: 1em;