fix resizing issue

added more text to the second page and style it

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;
+    height: inherit;
-    width: 40rem;
+    width: inherit;
 }
 
-/* tittle (contain name, and simple text with icon)  */
+/* title (contain name, and simple text with icon)  */
-#about.tittle_text{
+.title_text {
     padding-bottom: 0rem;
 }
-#about.tittle_text h1{
+
+.title_text h1 {
     font-size: 2.5rem;
 }
 
 /* education section */
-#textbox.brooklyncollege{
+.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 */
+/* hobby section */
-#bulletpoint.hobbie{
+.hobby_list {
     font-size: 1.2rem;
 }

css/main_button.css

@@ -2,11 +2,11 @@
     cursor: pointer;
     background: none;
     border: none;
-
 }
+
 #social_text {
     margin-top: 0;
-    color:var(--text-color)
+    color: var(--text-color);
 }
 
 .social {

css/mainpage.css

@@ -7,20 +7,19 @@
     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);
+    color: var(--primary-accent-color);
 }
 
 .description {
     font-family: monospace;
-    font-size: 1.5rems;
+    font-size: 1.5rem;
     font-weight: normal;
 }

css/style.css

@@ -4,13 +4,16 @@
     --ground-footer-color: #CFAB8D;
     --second-footer-color: #D9C4B0;
     --secondary-background-color: #BBDCE5;
-    --temp_primary-color: #fffdd0;
+    --primary-accent-color: #fffdd0;
-    --temp_secondary-color:#0070A9;
+    --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;
@@ -23,8 +26,8 @@
     --second-footer-color: #065084;
     --secondary-background-color: #0F828C;
     --text-color: #1a033b;
-
 }
+
 /* background color */
 .bg_color {
     background-color: var(--primary-background-color);
@@ -45,7 +48,6 @@
     width: 3.5rem;
     height: auto;
     fill: var(--secondary-background-color);
-    
 }
 
 #theme_switch svg:last-child {
@@ -61,27 +63,26 @@
 }
 
 /* the style of the main page */
-
 .content_container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }
-.Square_content{
+
-    width: 50rem;
+.square_content {
-    height: 50rem;
+    width: 50vw;
+    height: 65vh;
     background: var(--secondary-background-color);
     border-radius: 1rem;
     box-sizing: border-box;
 }
 
 .website_top {
-    background-color: var(--temp_secondary-color);
+    background-color: var(--secondary-accent-color);
     padding: 1rem;
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
-
 }
 
 .website_text {
@@ -102,12 +103,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
 }
 
 #home_button svg {
     width: 3.5rem;
     height: auto;
     fill: var(--secondary-background-color);
-    
 }

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- tittle  -->
+    <!-- title  -->
     <title>Rain website</title>
     <!-- add a image -->
 
@@ -36,7 +36,7 @@
 
         <!-- my info from who i am and my social linke -->
         <div class="content_container">
-            <div class = "Square_content">
+            <div class="square_content">
                 <div class="website_top">
                     <div class="website_text">
                         Home
@@ -45,7 +45,7 @@
                 <!-- this might be where the whole stuff should be in -->
                 <div class="box_body">
                 <!-- this is the text for the main page -->
-                    <p class = "tittle_text">
+                    <p class="title_text">
                         HI I'm <span class="main_page_name"> Simon Zheng</span>
                     </p>
                     <h2 class="description">

info.html

@@ -43,35 +43,35 @@
 
         <!-- my info from who i am and my social linke -->
         <div class="content_container">
-            <div class = "Square_content">
+            <div class="square_content">
                 <div class="website_top">
                     <div class="website_text">
                         About
                     </div>                        
                 </div>
                 <!-- this might be where the whole stuff should be in -->
-                <div class = "box_body" id = "about">
+                <div class="box_body">
                 <!-- this is the text for the main page -->
                     
                     <!-- adding my pfp image -->
-                    <div class = "tittle_text" id = "about">
+                    <div class="title_text">
                         <h1>Simon Zheng</h1>
                         <!-- add paragraph here to explain what i do -->
                     </div>
 
-                    <div class = "description" id = "about">
+                    <div class="description">
                         <h2>
                             Hi I'm Simon, Student studying in computer science.
                         </h2>
 
                         <br>
 
-                        <div class = "education" id = "textbox">
+                        <div class="education">
                             <h1>
                             Education
                             </h1>
-                            <div class = "brooklyncollege" id = "textbox">
+                            <div class="brooklyn_college_container">
-                                <div class = "brooklyncollege" id = education>
+                                <div class="education_detail">
                                     <p>
                                         Bachelor of Science in Computer Science
                                     </p>
@@ -81,11 +81,11 @@
                                 </div>
                             </div>
                         </div>
-                        <div class = "interest" id = "textbox">
+                        <div class="interest">
                             <h1>
                                 Other interest
                             </h1>
-                            <ul class = "hobbie" id = "bulletpoint">
+                            <ul class="hobby_list">
                                 <li>
                                     Game
                                 </li>