added the text box in the middle. added some content and finish the light and dark mode

css/mainpage.css

@@ -0,0 +1,25 @@
+/* the text box isn't center yet */
+.box_body{
+    display: flex;
+    align-items:center;
+    justify-content:center;
+    flex-direction: column;
+}
+
+
+/* welcome text and name text color */
+.tittle_text{
+    font-size: 2.5rem;
+    font-family: 'Courier New', Courier, monospace;
+    margin-bottom: 10px;
+}
+
+.main_page_name{
+    color: var(--temp_primary-color);
+}
+
+.description{
+    font-family: monospace;
+    font-size: 1.5rems;
+    font-weight: normal;
+}

css/style.css

@@ -4,14 +4,25 @@
     --ground-footer-color: #CFAB8D;
     --second-footer-color: #D9C4B0;
     --secondary-background-color: #BBDCE5;
+    --temp_primary-color: #fffdd0;
+    --temp_secondary-color:#0070A9;
+    --text-color: #fcffe9;
+    margin: 0;
+    overflow: hidden;
 
 }
-
+/* darkmode color */
 .dark{
     --primary-background-color: #78B9B5;
     --ground-footer-color: #320A6B;
     --second-footer-color: #065084;
     --secondary-background-color: #0F828C;
+    --text-color: #1a033b;
+
+}
+/* background color */
+.bg_color{
+    background-color: var(--primary-background-color);
 }
 
 /* the darkmode button */
@@ -24,6 +35,7 @@
     border-style: none;
     cursor: pointer;
 }
+
 #theme_switch svg{
     width: 3.5rem;
     height: auto;
@@ -37,4 +49,39 @@
 
 .dark #theme_switch svg:first-child{
     display: none;
-}
+}
+
+.dark #theme_switch svg:last-child{
+    display: block;
+}
+
+/* the style of the main page */
+
+.content_container{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.Square_content{
+    width: 50rem;
+    height: 50rem;
+    background: var(--secondary-background-color);
+    border-radius: 1rem;
+    box-sizing: border-box;
+}
+
+.website_top{
+    background-color: var(--temp_secondary-color);
+    padding:1rem;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+}
+
+.website_text{
+    font-family: monospace;
+    font-size: 1.5rem;
+    color: var(--text-color);
+}
+