Websim

styles/home.css

@@ -12,6 +12,8 @@ body {
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
   height: auto;
   width: auto;
   margin: auto;
@@ -23,10 +25,9 @@ body {
 .sub_container {
   display: flex;
   position: relative;
-  justify-content: space-around;
-  flex-direction: column;
 }
 
+@media screen and (min-width: 800px) {
 .navbar_border {
   display: flex;
   align-items: center;
@@ -40,7 +41,7 @@ body {
   border-radius: 50px;
   box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.925);
 }
-
+}
 .navbar_icon {
   height: 40px;
 }

styles/media.css

@@ -1,33 +1,49 @@
-@media screen and (max-width: 920px) {
+@media screen and (max-width: 800px) {
+    .navbar_border {
+        display: flex;
+        padding: 3% 5% 1%;;
+        width: 20%;
+        max-width: 100px;
+        margin: 5% 5% 3%;
+        background-color: #5d3c73;
+        border-radius: 50px;
+        box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.925);
+      }
+
+
+  .monet_01 {
+    width: 100%;
+  }
 
-    .section-01_simple_text{
-        font-size: 1.3rem;
-    }
-    .section-01{
-        max-width: 1000px;
-        margin: 10%;
-        margin-top: 40%;
-    }
+  .monet_02 {
+    width: 100%;
+    top: 470%;
+    left: 50%;
+  }
 
-    .section-01_text{
-        gap: 10px;
-    }
-
-    .monet_01{
-        max-width: 450px;
-        top: 2%;
-        left: -50%;
-    }
 
-    .monet_02{
-        max-width: 400px;
-    }
+  .section_container {
+    margin: 35% 5% 35%;
+  }
+
+  .sub_container {
+    justify-content: right;
+  }
+
+  .section-01_title {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+
+  .section-01_simple_text {
+    font-size: 1rem;
+  }
+  .section-01_banner,
+  .navbar_menu, .navbar_menu_text {
+    display: none;
+  }
 
-    .navbar_border{
-        width: 90px;
-        margin: 5%;
-    }
-    .section-01_banner, .navbar_menu_text {
-        display: none;
-    }
-}
+  .footer{
+    padding: 5% 5% 10%;
+  }
+}