remove "your name?" once chosen

src/App.css

@@ -11,6 +11,10 @@ body {
   height: 100%;
 }
 
+footer {
+  font-size: x-small;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
@@ -25,6 +29,7 @@ body {
 .hint {
   position: absolute;
   font-size: 80%;
+  padding: 4px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -33,16 +38,18 @@ body {
 }
 
 h1,
-h2 {
+h2,
+h3 {
   margin-top: 0px;
   margin-bottom: 0px;
+  padding: 4px 16px;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-evenly;
-  min-width: min(80vw, 800px);
+  min-width: 737px;
 }
 
 .dragbox {
@@ -103,10 +110,9 @@ h2 {
 
 button {
   font-weight: bold;
+  font-size: large;
   color: ghostwhite;
   background-color: black;
-  border: 4px solid black;
-  position: relative;
   z-index: 1;
   &:focus {
     outline: black;
@@ -116,6 +122,25 @@ button {
   }
 }
 
+@media only screen and (max-width: 768px) {
+  .container {
+    min-width: 96vw;
+  }
+  .submit_text {
+    display: none;
+  }
+  .submit {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    padding: 0px;
+    background-color: unset;
+    font-size: xx-large;
+    margin-bottom: 20px;
+    margin-right: 20px;
+  }
+}
+
 ::backdrop {
   background-image: linear-gradient(
     45deg,
@@ -154,6 +179,30 @@ button {
   font-size: 150%;
 }
 
+.logo {
+  position: relative;
+  text-align: center;
+  height: 196px;
+  margin: auto;
+  img {
+    display: block;
+    margin: auto;
+  }
+  h3 {
+    position: absolute;
+    width: 200px;
+    top: 33%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: aliceblue;
+    background-color: black;
+    border-radius: unset;
+    letter-spacing: 8px;
+    padding: 0px 40px;
+    font-family: monospace;
+  }
+}
+
 .loader {
   display: block;
   position: relative;

src/App.tsx

@@ -5,15 +5,24 @@ import Rankings from "./Rankings";
 function App() {
   return (
     <>
-      <a href={baseUrl}>
-        <img alt="logo" height="128px" src="logo.svg" />
-      </a>
-      <h1>cutt</h1>
-      <span className="grey">cool ultimate team tool</span>
+      <div className="logo">
+        <a href={baseUrl}>
+          <img alt="logo" height="66%" src="logo.svg" />
+        </a>
+        <h3 className="centered">cutt</h3>
+        <span className="grey">cool ultimate team tool</span>
+      </div>
       <Rankings />
       <footer>
         <p className="grey">
-          something not working? message <a href="https://t.me/x0124816">me</a>.
+          something not working?
+          <br />
+          message <a href="https://t.me/x0124816">me</a>.
+          <br />
+          or fix it here:{" "}
+          <a href="https://git.0124816.xyz/julius/cutt" key="gitea">
+            <img src="gitea.svg" alt="gitea" height="16" />
+          </a>
         </p>
       </footer>
     </>

src/Rankings.tsx

@@ -40,9 +40,9 @@ export function SelectUser({
   return (
     <>
       <div className="box user">
-        <span>your name?</span>
         {user.length < 1 ? (
           <>
+            <span>your name?</span>
             <br /> <span className="grey hint">drag your name here</span>
           </>
         ) : (
@@ -55,7 +55,6 @@ export function SelectUser({
             >
               {" ✕"}
             </span>
-            <br />
           </>
         )}
         <PlayerList
@@ -175,7 +174,9 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button onClick={() => handleSubmit()}>submit</button>
+      <button className="submit" onClick={() => handleSubmit()}>
+        💾 <span className="submit_text">submit</span>
+      </button>
       <dialog
         id="ChemistryDialog"
         onClick={(event) => {
@@ -233,8 +234,8 @@ export function MVP({ user, players }: PlayerInfoProps) {
           <h1>🏆</h1>
           {rankedPlayers.length < 1 && (
             <span className="grey hint">
-              carefully place the <i>Most Valuable Player</i> (according to your
-              humble opinion) in this box
+              carefully place as many of the <i>Most Valuable Players</i>{" "}
+              (according to your humble opinion) in this box
             </span>
           )}
           <PlayerList
@@ -252,7 +253,9 @@ export function MVP({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button onClick={() => handleSubmit()}>submit</button>
+      <button className="submit" onClick={() => handleSubmit()}>
+        💾 <span className="submit_text">submit</span>
+      </button>
       <dialog
         id="MVPDialog"
         onClick={(event) => {