feat: rewrite app system

apps/main/src/index.css

@@ -0,0 +1,105 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  width: 100%;
+  height: 100%;
+  background: rgb(76, 96, 188);
+  background: linear-gradient(
+    415deg,
+    rgba(4, 168, 243, 1),
+    rgb(76, 136, 188, 1),
+    rgba(76, 96, 188, 1),
+    rgb(115, 76, 188, 1),
+    rgb(87, 76, 188, 1)
+  );
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+#root {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.panel {
+  display: block;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 10px 20px;
+  box-shadow: 2px 2px #3333331d;
+}
+
+.panel p, .panel ul {
+  margin-top: 10px;
+}
+
+.text-centered {
+  text-align: center;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-small {
+  font-size: 0.8em;
+}
+
+.fullwidth {
+  width: 100%;
+}