public/css/index.css

@@ -1,5 +1,11 @@
 #login {
-    display: block;
+    background: #212121;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
 }
 
 #game {
@@ -8,4 +14,38 @@
 
 #chat {
     display: none;
+}
+
+#login > form {
+    margin-right: auto;
+    margin-left: auto;
+    color: #ffffff;
+    width: 50%;
+}
+
+#login label {
+    font-size: 1.5em;
+}
+
+#login input, #login button {
+    font-size: 2em;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    height: 2.5em;
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+#login input {
+    background-color: #404040;
+    color: #ffffff;
+}
+
+#login button {
+    background-color: #0062ff;
+    color: #ffffff;
 }

public/index.html

@@ -21,7 +21,7 @@
 <main>
     <div id="login">
         <form>
-            <label for="username">Anmeldename: </label>
+            <label for="username">Benutzername: </label>
             <input type="text" name="username" id="username" placeholder="Benutzername">
 
             <label for="room">Raumnummer: </label>