Update background images for "Other Sim Projects" directory for light…

… and dark modified

Lightmode - grey
Darkmode - black

otherprojects/index.html

@@ -29,13 +29,15 @@ <h1 class="heading">Other Similar Projects</h1>
       </label>
     </div>
     <p class="info">
-      <li id="other-projects-text"> These are two more projects (one website and one github repo template) I
-      made like this project. These links won't be updated often though, except
-      for a couple edits from time to time. This project, Mogul Christmas is the
-      main project for this. </li>
+      <li id="other-projects-text">
+        These are two more projects (one website and one github repo template) I
+        made like this project. These links won't be updated often though,
+        except for a couple edits from time to time. This project, Mogul
+        Christmas is the main project for this.
+      </li>
     </p>
     <div class="others">
-      <h2>Not Going To Update:</h2>
+      <h2 class="notupdating">Not Going To Update:</h2>
       <p class="duckyboi">
         <a href="https://kendalldoescoding.gq/ducksong" target="_blank"
           >Duck Song Playlist</a

otherprojects/main.css

@@ -1,35 +1,51 @@
 :root {
+  --bg-color: white;
+  --font-color-red: red;
   --font-color-blue: blue;
+  --ludsocials-color-blue: yellow;
   --font-color-heading: #1abc9c;
+  --ludsocials-color-heading: green;
   --font-color-heading2: #1abc9c;
-  --font-color-sub-heading: violet;
-  --font-color-christmas_message: violet;
+  --font-color-sub-heading: #d35400;
+  --lyrics-text-color: red;
   --yml-btn: #1abc9c;
-  --yml-btn-hover: #1abc9c;
-  --info-text: violet;
-  --info-text-bulet: black;
+  --rate-song-btn: purple;
+  --grey: black;
   font-family: "Roboto", sans-serif;
+  --other-projects-text: purple;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  --black: black;
+  --bg-image: url("/images/lightsolid-bg.png");
 }
 
 .darkMode {
-  --bg-color: black;
+  --bg-color: white;
+  --font-color-red: red;
   --font-color-blue: aqua;
-  --font-color-heading: lightgreen;
-  --font-color-heading2: #03c04a;
-  --font-color-sub-heading: #3498db;
-  --font-color-christmas_message: lightgreen;
-  --lyrics-text-color: #1e88e5;
-  --yml-btn: #03ac12;
-  --info-text: violet;
-  --info-text-bulet: lightgrey;
+  --ludsocials-color-blue: yellow;
+  --font-color-heading: #1abc9c;
+  --ludsocials-color-heading: green;
+  --font-color-heading2: #1abc9c;
+  --font-color-sub-heading: #d35400;
+  --font-color-christmas_message: violet;
+  --lyrics-text-color: red;
+  --yml-btn: #1abc9c;
+  --rate-song-btn: purple;
+  --other-projects-text: violet;
+  --grey: black;
+  --black: red;
   font-family: "Roboto", sans-serif;
-  --others: yellow;
+  --bg-image: url("/images/darksolid-bg.png");
 }
 
+/* Body */
+
+/* Needs editting, the christmastree images need to be called in a div not in the BODY */
+
 body {
-  align-items: center;
-  text-align: center;
-  /* Block User Text Selection */
   user-select: none;
   /* Normal (chrome)*/
   -webkit-touch-callout: none;
@@ -42,7 +58,16 @@ body {
   /* Old versions of Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
+  align-items: center;
+  text-align: center;
+  background-repeat: no-repeat, no-repeat;
+  background-position: right bottom, left bottom;
   background-color: var(--bg-color);
+  background: var(--bg-image) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 
 .heading {
@@ -194,7 +219,11 @@ input:checked + .slider:before {
 /* Violet text, black bullet points */
 
 #other-projects-text {
-  color: violet;
+  color: var(--other-projects-text);
+}
+
+.notupdating {
+  color: var(--black);
 }
 li::marker {
   color: var(--info-text-bulet);