made the website moblie compatiable and fix some design issue

css/style.css

@@ -11,7 +11,6 @@
 
 body {
     margin: 0;
-    overflow: hidden;
 }
 
 /* trying to make the color change */
@@ -31,25 +30,12 @@ body {
 /* background color */
 .bg_color {
     background-color: var(--primary-background-color);
-}
-
-/* the darkmode button */
-#theme_switch {
-    padding: 0;
-    background: none;
+    min-height: 100vh;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    border-style: none;
-    cursor: pointer;
-}
-
-#theme_switch svg {
-    width: 3.5rem;
-    height: auto;
-    fill: var(--secondary-background-color);
+    flex-direction: column;
 }
 
+/* the darkmode button behavior */
 #theme_switch svg:last-child {
     display: none;
 }
@@ -67,15 +53,38 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    flex-grow: 1;
+    padding: 2rem 0;
+    box-sizing: border-box;
 }
 
 .square_content {
     width: 50vw;
-    height: 65vh;
+    min-height: 65vh;
     background: var(--secondary-background-color);
     border-radius: 1rem;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 1024px) {
+    .square_content {
+        width: 70vw;
+    }
+}
+
+@media (max-width: 768px) {
+    .square_content {
+        width: 90vw;
+        min-height: 80vh;
+    }
+
+    #theme_switch, #home_button {
+        width: 3rem;
+        height: 3rem;
+        padding: 0.4rem;
+    }
 }
 
 .website_top {
@@ -94,19 +103,34 @@ body {
 .header {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
 }
 
-#home_button {
-    border-style: none;
-    background: none;
-    cursor: pointer;
+.header div {
     display: flex;
-    justify-content: center;
     align-items: center;
 }
 
-#home_button svg {
+#theme_switch, #home_button {
+    padding: 0.5rem;
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-style: none;
+    cursor: pointer;
     width: 3.5rem;
-    height: auto;
+    height: 3.5rem;
+    box-sizing: border-box;
+}
+
+#theme_switch svg, #home_button svg {
+    width: 100%;
+    height: 100%;
     fill: var(--secondary-background-color);
 }