- new loading screen

- huge loading time reducing by simplifiying ocean

style.css

@@ -1,9 +1,45 @@
 body {
   margin: 0;
-  background-color: #000;
-  color: #fff;
-  font-family: Georgia, serif;
+  background-color: #041626;
+  font-size: 1.3em;
   overscroll-behavior: none;
+  cursor: wait;
+}
+
+#loading {
+  width: fit-content;
+  color: #2c5c88;
+  font-size: 1.3em;
+  top: 20vh;
+  margin: auto;
+}
+
+#loadingMessage {
+  margin-bottom: 0.5em;
+}
+
+#labyTable {
+    width: 230px;
+    height: 230px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20vh;
+    margin-bottom: 5vh;
+    border-collapse: collapse;
+}
+
+td {
+    width: 10px;
+    height: 10px;
+    transition: background-color 1s;
+}
+
+.wall {
+    background-color: transparent;
+}
+
+.ground {
+    background-color: #214464;
 }
 
 #container {
@@ -32,48 +68,7 @@ body {
   justify-content: center;
   z-index: 1;
   color: gray;
-}
-
-#message.loading {
-  display: flex;
-  flex-direction: column;
-  top: 20vh;
-  width: 100%;
-  margin: auto;
-  align-items: center;
-  gap: 5rem;
-  text-align: center;
-  font-size: 1.7em;
-  cursor: progress;
-}
-
-#progressCircle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border: 4px solid dimgray;
-  border-radius: 50%;
-  font-size: 0;
-  font-size: 3vh;
-  font-weight: 700;
-  font-family: system-ui;
-  text-align: center;
-}
-
-#progressCircle::after {
-  content: "";
-  display: flex;
-  position: absolute;
-  width: 200px;
-  height: 200px;
-  top: -4px;
-  left: -4px;
-  border: 4px solid #1da8b7;
-  border-radius: 50%;
-  mask: conic-gradient(black var(--progress), transparent var(--progress));
+  font-family: Times, "Times New Roman", Georgia, serif;
 }
 
 #message a {