fix resizing issue

css/about.css

@@ -1,35 +1,36 @@
 /* text box and make it so it doesn't overflow out of the box */
-#about.description{
+.description {
     font-family: monospace;
-    font-size: 1.5rems;
+    font-size: 1.5rem;
     font-weight: normal;
     overflow-y: auto;
     overflow-x: hidden;
     white-space: normal;
     word-wrap: break-word;
-    height: 100rem;
-    width: 40rem;
+    height: inherit;
+    width: inherit;
 }
 
-/* tittle (contain name, and simple text with icon)  */
-#about.tittle_text{
+/* title (contain name, and simple text with icon)  */
+.title_text {
     padding-bottom: 0rem;
 }
-#about.tittle_text h1{
+
+.title_text h1 {
     font-size: 2.5rem;
 }
 
 /* education section */
-#textbox.brooklyncollege{
-   border-left: 3px solid rgba(17, 17, 17, 0.5);
+.brooklyn_college_container {
+    border-left: 3px solid rgba(17, 17, 17, 0.5);
 }
 
-#education.brooklyncollege{
+.education_detail {
     padding-left: 4px;
     font-size: .9rem;
 }
 
-/* hobbie section */
-#bulletpoint.hobbie{
-    font-size:1.2rem;
-}
+/* hobby section */
+.hobby_list {
+    font-size: 1.2rem;
+}

css/main_button.css

@@ -1,15 +1,15 @@
-#social_button{
+#social_button {
     cursor: pointer;
     background: none;
     border: none;
-
 }
-#social_text{
+
+#social_text {
     margin-top: 0;
-    color:var(--text-color)
+    color: var(--text-color);
 }
 
-.social{
+.social {
     display: flex;
     flex-direction: row;
     justify-content: space-between;

css/mainpage.css

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

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);
 }