get better names

webassets/css/styles.css

@@ -10,6 +10,8 @@ html, body {
 body {
     display: flex;
     justify-content: center;
+
+    background-color: #EFEFEF;
 }
 
 main {
@@ -20,7 +22,9 @@ main {
 }
 
 h1 {
+    font-size: 3em;
     margin-bottom: 1rem;
+    text-shadow: 0 0 8px #888;
 }
 
 #maincontent {
@@ -28,12 +32,11 @@ h1 {
     flex-direction: column;
     gap: 0.5rem;
 
-    padding: 0 1rem;
+    padding: 0 2rem;
 }
 
 .server {
     background-color: #CCC;
-    text-align: center;
     padding: 2px 0.5rem;
 
     color: black;
@@ -45,11 +48,29 @@ h1 {
     box-shadow: 0 0 4px #888;
 
     transition: all 0.2s;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-column-gap: 1rem;
+}
+
+.server .txt_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.server .txt_icon {
+    text-align: left;
+}
+
+.server .txt_port {
+    opacity: 0.6;
 }
 
 .server:hover {
     box-shadow: 0 0 4px #000;
     background-color: #AAA;
-    color: #00F;
+    color: #00A;
 }