add some colors

src/public/styles/style.css

@@ -1,3 +1,43 @@
+/* https://www.colorhexa.com/c2b280 */
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-color: rgb(245, 242, 234);
+        --text-color: rgb(6, 5, 3);
+        --selection: rgb(232, 226, 208);
+        --link-color: rgb(13, 71, 161);
+        --link-color-hover: rgb(181, 162, 101);
+        --grey: rgb(207, 216, 220);
+        --shadow: rgba(0, 0, 0, 0.5);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: rgb(19, 16, 9);
+        --text-color: rgb(251, 250, 247);
+        --selection: rgb(226, 218, 194);
+        --link-color: rgb(100, 181, 246);
+        --link-color-hover: rgb(175, 154, 88);
+        --grey: rgb(55, 71, 79);
+        --shadow: rgba(125, 109, 60, 0.288);
+    }
+}
+
+::selection {
+    color: rgb(0, 0, 0);
+    background: var(--selection);
+}
+
+html {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+        Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
+        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 17px;
+    scroll-behavior: smooth;
+}
+
 .text-center {
     text-align: center;
 }
@@ -5,3 +45,17 @@
 header > .text-title {
     font-size: 2.5rem;
 }
+
+main {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2%;
+    padding: 0.9% 0.9% 0.9% 0.9%;
+    width: 42%;
+    border-radius: 6px;
+    border: 1px solid rgb(170, 170, 170);
+    text-align: center;
+
+    border-radius: 8px;
+    box-shadow: 0 4px 30px 0 var(--shadow), 0 4px 30px 0 var(--shadow);
+}