fix resizing issue

css/style.css

@@ -1,37 +1,40 @@
 /* color for normal and darkmode */
-:root{
+:root {
     --primary-background-color: #ECEEDF;
     --ground-footer-color: #CFAB8D;
     --second-footer-color: #D9C4B0;
     --secondary-background-color: #BBDCE5;
-    --temp_primary-color: #fffdd0;
-    --temp_secondary-color:#0070A9;
+    --primary-accent-color: #fffdd0;
+    --secondary-accent-color: #0070A9;
     --text-color: #fcffe9;
+}
+
+body {
     margin: 0;
     overflow: hidden;
-
 }
+
 /* trying to make the color change */
-*{
+* {
     transition: background-color 0.4s ease, color 0.4s ease;
 }
 
 /* darkmode color */
-.dark{
+.dark {
     --primary-background-color: #78B9B5;
     --ground-footer-color: #320A6B;
     --second-footer-color: #065084;
     --secondary-background-color: #0F828C;
     --text-color: #1a033b;
-
 }
+
 /* background color */
-.bg_color{
+.bg_color {
     background-color: var(--primary-background-color);
 }
 
 /* the darkmode button */
-#theme_switch{
+#theme_switch {
     padding: 0;
     background: none;
     display: flex;
@@ -41,73 +44,69 @@
     cursor: pointer;
 }
 
-#theme_switch svg{
+#theme_switch svg {
     width: 3.5rem;
     height: auto;
-    fill:var(--secondary-background-color);
-    
+    fill: var(--secondary-background-color);
 }
 
-#theme_switch svg:last-child{
+#theme_switch svg:last-child {
     display: none;
 }
 
-.dark #theme_switch svg:first-child{
+.dark #theme_switch svg:first-child {
     display: none;
 }
 
-.dark #theme_switch svg:last-child{
+.dark #theme_switch svg:last-child {
     display: block;
 }
 
 /* the style of the main page */
-
-.content_container{
-    display:flex;
+.content_container {
+    display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }
-.Square_content{
-    width: 50rem;
-    height: 50rem;
+
+.square_content {
+    width: 50vw;
+    height: 65vh;
     background: var(--secondary-background-color);
     border-radius: 1rem;
     box-sizing: border-box;
 }
 
-.website_top{
-    background-color: var(--temp_secondary-color);
-    padding:1rem;
+.website_top {
+    background-color: var(--secondary-accent-color);
+    padding: 1rem;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
-
 }
 
-.website_text{
+.website_text {
     font-family: monospace;
     font-size: 1.5rem;
     color: var(--text-color);
 }
 
-.header{
+.header {
     display: flex;
     flex-direction: row;
 }
 
-#home_button{
+#home_button {
     border-style: none;
     background: none;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
-
 }
 
-#home_button svg{
+#home_button svg {
     width: 3.5rem;
     height: auto;
-    fill:var(--secondary-background-color);
-    
+    fill: var(--secondary-background-color);
 }