Started colour scheme work

Added a GIMP file to play around in for colour picking [Cutieguwu Website Template.xcf].
Added a CSS file to keep track of theme colours [theme.css].
Adjusted current theme colours according to current mock theme.
Adjusted some class wording and heading choices in home.html and style.css

Global_Resources/style.css

@@ -1,7 +1,7 @@
 body
 {
     font-family: Arial;
-    background-color: #ffd589;
+    background-color: #3f0073;
 }
 
 hr
@@ -9,9 +9,30 @@ hr
     visibility: hidden;
 }
 
+
+h1{
+    color: #ff7fbc;
+    font-size: 2.5vw;
+}
+
+h2{
+    color: white;
+    font-size: 2vw;
+}
+
+a{
+    font-size: 1vw;
+}
+
 p
 {
-    font-size: 1.03vw;
+    font-size: 0.95vw;
+    color: white;
+    font-weight: bold;
+    padding-top: 0.5vw;
+    padding-bottom: 0.5vw;
+    padding-left: 0.5vw;
+    padding-right: 0.5vw;
 }
 
 .titleimg
@@ -21,10 +42,9 @@ p
     margin-right: auto;
 }
 
-.subtitle
+.title
 {
     text-align: center;
-    color: black;
 }
 
 .menubar ul
@@ -38,18 +58,18 @@ p
     float: left;
     width: 10vw;
     height: 2vw;
-    background-color: #5181ff;
+    background-color: #bf00b6;
     line-height: 2vw;
     text-align: center;
-    font-size: 1.03vw;
     text-decoration: none;
+    font-weight: bold;
     color: white;
     display: inline;
 }
 
 .menubar ul a:hover
 {
-    background-color: #8800ff;
+    background-color: #990091;
 }
 
 .dropdown
@@ -60,13 +80,17 @@ p
     float: left;
     width: 10vw;
     height: 2vw;
-    background-color: #8800ff;
+    background-color: #bf00b6;
     line-height: 2vw;
     text-align: center;
-    font-size: 1.03vw;
     display: inline;
 }
 
+.dropdownContent 
+{
+    display: none;
+}
+
 .dropdown:hover .dropdownContent 
 {
     display: block;
@@ -74,20 +98,10 @@ p
     z-index: 10;
 }
 
-.dropdownContent 
-{
-    display: none;
-    background-color: #5181ff;
-}
-
-.dropdownContent a:hover
-{
-    background-color: #8800ff;
-}
-
 .dropdownContent a
 {
     text-decoration: none;
+    font-weight: bold;
     color: white;
     display: block;
 }
@@ -98,6 +112,7 @@ p
     display: table;
     width: 10vw;
     margin-left: 2.5%;
+    margin-top: 2vw;
     line-height: 2vw;
     display: inline;
     position: relative;
@@ -105,61 +120,55 @@ p
 
 .menubar-side ul a
 {
-    background-color: #5181ff;
+    background-color: #bf00b6;
     text-align: center;
-    font-size: 1.03vw;
     text-decoration: none;
+    font-weight: bold;
     color: white;
     height: 2vw;
     position: relative;
     display: block;
+    border-radius: 1vw;
 }
 
 .menubar-side ul a:hover
 {
-    background-color: #8800ff;
+    background-color: #990091;
 }
 
-.global-page-subtitle
+.main-page-subtitle
 {
-    color: white;
-    opacity: 1;
     text-align: center;
     width: fit-content;
     position: relative;
-    border-radius: 5px;
+    border-radius: 1vw;
-    background-color: #9e84ff;
+    background-color: #c57fff;
     margin-left: 1.5vw;
 }
 
-.global-page-subtitle p
+.main-page-subtitle p
 {
-    color: white;
-    opacity: 1;
     position: relative;
-    text-align: center, justify; 
+    text-align: center;
-    padding: 5px;
 }
 
 .global-page-bg
 {
     float: right;
-    margin-top: 4vw;
+    margin-top: 2vw;
     margin-right: 14.875%;
     width: 68.25%;
-    background-color: #84a6ff;
+    background-color: #b061f2;
-    opacity: 0.9;
     z-index: 1;
-    border-radius: 10px;
+    border-radius: 1vw;
     position: relative;
 }
 
 .main-page-greet
 {
     float: right;
-    border-radius: 20px;
+    border-radius: 1vw;
-    background-color: #84a6ff;
+    background-color: #b061f2;
-    opacity: 1 !important;
     margin-top: 2vw;
     margin-right: 14.875%;
     width: 68.25%;
@@ -167,21 +176,16 @@ p
 
 .main-page-greet p
 {
-    color: white;
-    opacity: 1;
     position: relative;
-    text-align: center, justify; 
+    text-align: center; 
-    padding: 5px;
 }
 
 .main-page-title
 {
-    border-radius: 20px;
+    border-radius: 1vw;
-    background-color: #ff9646;
+    background-color: #b772f1;
-    color: white;
-    opacity: 1 !important;
     text-align: center;
-    margin-top: 2vw;
+    margin-top: 1px;
     margin-left: auto;
     margin-right: auto;
     padding-top: 1px;
@@ -192,23 +196,20 @@ p
 
 .main-page-content
 {
-    opacity: 1;
     padding-top: 3px;
     padding-bottom: 3px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
     z-index: 2;
-    background-color: #9e84ff;
+    background-color: #b772f1;
-    border-radius: 5px;
+    border-radius: 1vw;
     text-align: center;
     width: 55vw;
 }
 
 .main-page-content p
 {
-    color: white;
-    opacity: 1;
     position: relative;
-    text-align: center, justify;
+    text-align: center;
 }

Global_Resources/theme.css

@@ -0,0 +1,31 @@
+.background{
+    color: #3f0073;
+}
+
+.foreground_1{
+    color: #b061f2;
+}
+
+.foreground_2{
+    color: #b772f1;
+}
+
+.foreground_3{
+    color: #c57fff;
+}
+
+.button{
+    color: #bf00b6;
+}
+
+.button:hover{
+    color: #990091;
+}
+
+.text_1{
+    color: white;
+}
+
+.heading_1{
+    color: #ff7fbc;
+}

home.html

@@ -8,7 +8,7 @@
         <title>Cutieguwu - Home</title>
         <link rel="stylesheet" type="text/css" href="./Global_Resources/style.css">
         <img class="titleimg" src="">
-        <h3 class="subtitle">Welcome to my official site! Explore my projects!</p>
+        <h1 class="title">Welcome to my official site! Explore my projects!</h1>
         <nav>
             <div class="menubar">
                 <ul>
@@ -57,7 +57,7 @@
                 <div class="main-page-content" id="News1">
                     <p>I've started actual work on the website!</p>
                 </div>
-                <div class="global-page-subtitle">
+                <div class="main-page-subtitle">
                     <p>Website managed by Olive [Cutieguwu]</p>
                 </div>
                 <hr>