From c2ea8d3cfe00d887792faac114fca67fa694386d Mon Sep 17 00:00:00 2001
From: aliciajwang <165428897+aliciajwang@users.noreply.github.com>
Date: Thu, 25 Jul 2024 19:56:39 -0400
Subject: [PATCH] a

---
 index.html |  2 +-
 style.css  | 54 ++++++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index fe3240c..7cfb862 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     <div class="element">
       <!-- Navbar -->
         <nav id="navbar">
-          <div class="container">
+          <div>
             <h1><a href="#" style="color: #8E8B62;">My Personal Website</a></h1>
             <ul class="sidebar">
               <li onclick=hideSidebar()><a><i class='bx bx-x'></i></a></li>
diff --git a/style.css b/style.css
index 99345a2..ea193c8 100644
--- a/style.css
+++ b/style.css
@@ -29,8 +29,9 @@ a{
 
 .container{
     margin:auto;
-    width: 80%;
+    max-width: 100%;
     justify-content: space-around;
+    overflow-x: hidden;
 }
 
 .clr{
@@ -41,6 +42,7 @@ a{
 
 html{
     scroll-behavior: smooth;
+    overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {
@@ -71,6 +73,8 @@ html{
     top: 0;
     width: 100%;
     z-index:100;
+    padding-left: 9%;
+    padding-right: 9%;
 }
 
 #navbar h1{
@@ -248,16 +252,16 @@ html{
         content: "Web Developer";
     }
     21%, 40% {
-        content: "Full Stack Developer";
+        content: "Software Engineer";
     }
     41%, 60% {
-        content: "Software Engineer";
+        content: "Web Developer";
     }
     61%, 80% {
-        content: "Web Developer";
+        content: "Software Engineer";
     }
     81%, 100% {
-        content: "Full Stack Developer";
+        content: "Web Developer";
     }
 }
 
@@ -281,13 +285,13 @@ html{
 }
 
 .about-text{
-    width: 60vh;
+    width: 50vh;
     margin-top: 8%;
 }
 
 .main{
-    width: 1130px;
-    max-width: 95%;
+    max-width: 70%;
+    width: 1530px;
     display: flex;
 }
 
@@ -503,7 +507,7 @@ p{
 
 /* Sizing */
 
-@media only screen and (max-width: 900px){
+@media only screen and (max-width: 940px){
     .hideOnMobile{
         display: none;
     }
@@ -511,9 +515,39 @@ p{
     .menu-button{
         display: block;
     }
+    .contain{
+        width: 90%;
+        padding: 30px 35px 40px 35px;
+    }
 }
 
-@media only screen and (max-width: 431px){
+@media only screen and (max-width: 1100px){
+
+    .contain{
+        margin: 40px 0;
+        height: 100%;
+    }
+
+    .contain .contact{
+        flex-direction: column-reverse;
+    }
+
+    .contain .contact .left-side{
+        width: 100%;
+        flex-direction: row;
+        margin-top: 40px;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .contact .left-side::before{
+        display: none;
+    }
+
+    .contain .contact .right-side{
+        width: 90%;
+        margin-left: 0;
+    }
 
     #about img{
         height: 38vh;