Working on adding scalability

Global_Resources/style.css

@@ -36,12 +36,12 @@ p
 .menubar ul a
 {
     float: left;
-    width: 200px;
-    height: 40px;
+    width: 10vw;
+    height: 2vw;
     background-color: #5181ff;
-    line-height: 40px;
+    line-height: 2vw;
     text-align: center;
-    font-size: 20px;
+    font-size: 1.03vw;
     text-decoration: none;
     color: white;
     display: inline;
@@ -58,12 +58,12 @@ p
     padding: 0;
     list-style: none;
     float: left;
-    width: 200px;
-    height: 40px;
+    width: 10vw;
+    height: 2vw;
     background-color: #8800ff;
-    line-height: 40px;
+    line-height: 2vw;
     text-align: center;
-    font-size: 20px;
+    font-size: 1.03vw;
     display: inline;
 }
 
@@ -80,7 +80,8 @@ p
     background-color: #5181ff;
 }
 
-.dropdownContent a:hover {
+.dropdownContent a:hover
+{
     background-color: #8800ff;
 }
 
@@ -91,33 +92,32 @@ p
     display: block;
 }
 
-.menubar-side
-{
-    float: left;
-    width: 200px;
-    text-align: center;
-    color: white;
-    display: inline;
-}
-
 .menubar-side ul
 {
+    float: left;
     display: table;
-    margin: 0 auto;
+    width: 10vw;
+    margin-left: 2.5%;
+    line-height: 2vw;
+    display: inline;
+    position: relative;
 }
 
 .menubar-side ul a
 {
-    float: left;
-    width: 200px;
-    height: 40px;
     background-color: #5181ff;
-    line-height: 40px;
     text-align: center;
-    font-size: 20px;
+    font-size: 1.03vw;
     text-decoration: none;
     color: white;
-    display: inline;
+    height: 2vw;
+    position: relative;
+    display: block;
+}
+
+.menubar-side ul a:hover
+{
+    background-color: #8800ff;
 }
 
 .global-page-subtitle
@@ -125,12 +125,11 @@ p
     color: white;
     opacity: 1;
     text-align: center;
-    margin-left: 20px;
-    margin-bottom: 10px;
     width: fit-content;
     position: relative;
     border-radius: 5px;
     background-color: #9e84ff;
+    margin-left: 1.5vw;
 }
 
 .global-page-subtitle p
@@ -144,33 +143,26 @@ p
 
 .global-page-bg
 {
-    margin-top: 50px;
-    margin-left: 300px;
-    margin-right: 250px;
-    max-width: 1300px;
-    min-width: fit-content;
-    align-self: center;
+    float: right;
+    margin-top: 4vw;
+    margin-right: 14.875%;
+    width: 68.25%;
     background-color: #84a6ff;
     opacity: 0.9;
     z-index: 1;
     border-radius: 10px;
+    position: relative;
 }
 
 .main-page-greet
 {
+    float: right;
     border-radius: 20px;
     background-color: #84a6ff;
-    color: white;
     opacity: 1 !important;
-    text-align: center;
-    margin-top: 50px;
-    margin-left: 300px;
-    margin-right: 250px;
-    max-width: 1300px;
-    min-width: fit-content;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    position: relative;
+    margin-top: 2vw;
+    margin-right: 14.875%;
+    width: 68.25%;
 }
 
 .main-page-greet p
@@ -189,26 +181,28 @@ p
     color: white;
     opacity: 1 !important;
     text-align: center;
-    margin-top: 20px;
-    margin-left: 50px;
-    margin-right: 50px;
-    max-width: 1200px;
-    min-width: fit-content;
+    margin-top: 2vw;
+    margin-left: auto;
+    margin-right: auto;
     padding-top: 1px;
     padding-bottom: 1px;
     position: relative;
+    width: 65vw;
 }
 
 .main-page-content
 {
     opacity: 1;
-    padding-top: 20px;
-    margin-left: 20px;
-    margin-right: 20px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    margin-left: auto;
+    margin-right: auto;
     position: relative;
     z-index: 2;
     background-color: #9e84ff;
     border-radius: 5px;
+    text-align: center;
+    width: 55vw;
 }
 
 .main-page-content p