Move footer to top (wait, what?)

src/App.css

@@ -125,7 +125,8 @@ body {
   }
 }
 
-a, a:visited {
+a,
+a:visited {
   color: #8080ff;
 }
 
@@ -133,7 +134,18 @@ a:active {
   color: #cc77ff;
 }
 
+.App-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.App-option input {
+  margin-left: 0.5rem;
+}
+
 .App-footer {
-  margin-top: 1rem;
+  margin: -1rem 0 2rem 0;
   font-size: 80%;
 }

src/App.tsx

@@ -23,10 +23,18 @@ function App() {
   return (
     <>
       <h1>hello wordl</h1>
+      <footer className="App-footer">
+        by <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
+        <a href="https://www.powerlanguage.co.uk/wordle/">wordle</a>. report
+        issues <a href="https://github.com/lynn/hello-wordl">here</a>
+      </footer>
+      <div className="App-option">
+        <label htmlFor="wordLength">Letters:</label>
         <input
           type="range"
           min="4"
           max="11"
+          id="wordLength"
           value={wordLength}
           onChange={(e) => {
             const length = Number(e.target.value);
@@ -34,6 +42,7 @@ function App() {
             setWordLength(length);
           }}
         ></input>
+      </div>
       <div className="App">
         <Game
           key={target}
@@ -45,11 +54,6 @@ function App() {
           }}
         />
       </div>
-      <footer className="App-footer">
-        By <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
-        <a href="https://www.powerlanguage.co.uk/wordle/">Wordle</a>,
-        hosted on <a href="https://github.com/lynn/hello-wordl">GitHub</a>.
-      </footer>
     </>
   );
 }