diff --git a/assets/photos/ai-generated-8432825-dgstudios.png b/assets/photos/ai-generated-8432825-dgstudios.png
deleted file mode 100644
index ce0e20a..0000000
Binary files a/assets/photos/ai-generated-8432825-dgstudios.png and /dev/null differ
diff --git a/assets/photos/aurora-1197753.jpg b/assets/photos/aurora-1197753.jpg
new file mode 100644
index 0000000..34c0291
Binary files /dev/null and b/assets/photos/aurora-1197753.jpg differ
diff --git a/assets/photos/avenue-815297.jpg b/assets/photos/avenue-815297.jpg
new file mode 100644
index 0000000..1ddb75a
Binary files /dev/null and b/assets/photos/avenue-815297.jpg differ
diff --git a/assets/photos/clouds-8459053.jpg b/assets/photos/clouds-8459053.jpg
new file mode 100644
index 0000000..48e1777
Binary files /dev/null and b/assets/photos/clouds-8459053.jpg differ
diff --git a/assets/photos/field-6574455.jpg b/assets/photos/field-6574455.jpg
new file mode 100644
index 0000000..67f1ae8
Binary files /dev/null and b/assets/photos/field-6574455.jpg differ
diff --git a/assets/photos/forest-3622519.jpg b/assets/photos/forest-3622519.jpg
new file mode 100644
index 0000000..a6310cc
Binary files /dev/null and b/assets/photos/forest-3622519.jpg differ
diff --git a/assets/photos/hintersee-3601004.jpg b/assets/photos/hintersee-3601004.jpg
new file mode 100644
index 0000000..833285d
Binary files /dev/null and b/assets/photos/hintersee-3601004.jpg differ
diff --git a/assets/photos/milky-way-1845068.jpg b/assets/photos/milky-way-1845068.jpg
new file mode 100644
index 0000000..aa80e3e
Binary files /dev/null and b/assets/photos/milky-way-1845068.jpg differ
diff --git a/assets/photos/mountain-landscape-2031539.jpg b/assets/photos/mountain-landscape-2031539.jpg
new file mode 100644
index 0000000..1b11ee7
Binary files /dev/null and b/assets/photos/mountain-landscape-2031539.jpg differ
diff --git a/assets/photos/road-1072821.jpg b/assets/photos/road-1072821.jpg
new file mode 100644
index 0000000..c097209
Binary files /dev/null and b/assets/photos/road-1072821.jpg differ
diff --git a/assets/photos/road-8395119.jpg b/assets/photos/road-8395119.jpg
new file mode 100644
index 0000000..d93f895
Binary files /dev/null and b/assets/photos/road-8395119.jpg differ
diff --git a/assets/photos/sunset-1373171.jpg b/assets/photos/sunset-1373171.jpg
new file mode 100644
index 0000000..00cf534
Binary files /dev/null and b/assets/photos/sunset-1373171.jpg differ
diff --git a/assets/photos/sunset-2582687-dreamypixel.jpg b/assets/photos/sunset-2582687-dreamypixel.jpg
deleted file mode 100644
index 69f1ffb..0000000
Binary files a/assets/photos/sunset-2582687-dreamypixel.jpg and /dev/null differ
diff --git a/assets/photos/sunset-404072.jpg b/assets/photos/sunset-404072.jpg
new file mode 100644
index 0000000..6914c07
Binary files /dev/null and b/assets/photos/sunset-404072.jpg differ
diff --git a/assets/photos/thunderstorm-3625405.jpg b/assets/photos/thunderstorm-3625405.jpg
new file mode 100644
index 0000000..1bba7d9
Binary files /dev/null and b/assets/photos/thunderstorm-3625405.jpg differ
diff --git a/assets/photos/winter-2080070.jpg b/assets/photos/winter-2080070.jpg
deleted file mode 100644
index 7ab3c52..0000000
Binary files a/assets/photos/winter-2080070.jpg and /dev/null differ
diff --git a/css/styles.css b/css/styles.css
index 6f028fd..645063b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3,50 +3,101 @@
 /* applies to screens smaller than 500px (first breakpoint) */
 /* and above unless overwritten below */
 
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
+
 :root {
-  --background-color: #0d0d0d;
+  
 }
 
 body {
-  background: #fcc;
+  font-family: 'Outfit', sans-serif;
   margin: 0;
   padding: 0;
-} 
-
-main {
-  width: 100vw;
-  height: 100vh;
-  background-image: url(/assets/photos/winter-2080070.jpg);
-  background-size: cover;
-  overflow: hidden;
+  box-sizing: border-box;
 }
 
-.textWindow {
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: 100%;
+@keyframes fadeImage {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
+#textWindow {
+  width: 100vw;
+  height: 100vh;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  transition: opacity 1s forwards; /*transition does not work for images*/
+  position: relative;
+}
 
-  background-color: black;
-  mix-blend-mode: multiply;
+#textWindow #background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -2;
+}
+
+#textWindow #background-transition {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
 }
 
 h1 {
-  font-size: 18vw;
-  color: white;
-  margin: 0;
-  padding: 0;
-  padding-left: 2vw;
-  padding-top: 10vh;
-  font-family: 'Outfit', sans-serif;
+  font-size: 10vw;
+  text-align: center;
 }
 
-h1#title2 {
-  padding-left: 8vw;
-  padding-top: 0;
+#titleBanner {
+  padding-left: 5%;
+  padding-right: 5%;
+  transition: color 1s, background-color 1s;
+}
+
+.black {
+  background-color: #000;
+  color: #fff;
+  mix-blend-mode: multiply;
+}
+
+.white {
+  background-color: #fff;
+  color: #000;
+  mix-blend-mode: lighten;
+}
+
+#colorSelector {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 10px;
+  align-items: center;
+}
+
+#colorSelector input {
+  margin-left: 10px;
+}
+
+#colorSelector label {
+  font-size: 1.5em;
 }
 
 /* TABLET STYLES */
@@ -54,24 +105,7 @@ h1#title2 {
 @media screen and (min-width: 500px) {
 
   /* applies to screens wider than 499px */
-  .textWindow {
-    justify-content: center;
-  }
 
-  h1 {
-    font-size: 20vw;
-    padding-left: 2vw;
-    padding-top: 0vh;
-  }
-
-  h1#title2 {
-    padding-left: 10vw;
-    padding-top: 0;
-  }
-  
-  body {
-    background: #cfc;
-  } 
 }
 
 
@@ -82,40 +116,4 @@ h1#title2 {
 
   /* applies to screens wider than 999px */
 
-  body {
-    background: #ccf;
-  } 
-
-  main {
-    display: grid;
-    grid-template-areas: "left right";
-  }
-
-  .textWindow {
-    grid-column: left;
-    width: 50vw;
-    height: 100vh;
-  }
-
-  .extraWindow {
-    grid-column: right;
-    width: 50vw;
-    height: 100vh;
-    background-image: url(/assets/photos/ai-generated-8432825-dgstudios.png);
-    filter: saturate(50%) ;
-    
-    background-size: cover;
-    mix-blend-mode: darken;
-  }
-
-  h1 {
-    font-size: 12vw;
-    padding-left: 2vw;
-    padding-top: 0vh;
-  }
-
-  h1#title2 {
-    padding-left: 8vw;
-    padding-top: 0;
-  }
 }
diff --git a/index.html b/index.html
index 877206e..7febd6d 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,23 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>P2672045</title>
-  <link rel="stylesheet" href="css/styles.css">
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap" rel="stylesheet"> 
-</head>
-<body>
-  <main>
-    <div class="textWindow">
-      <h1 id="title1">Tom</h1>
-      <h1 id="title2">Cornes</h1>
-    </div>
-    <div class="extraWindow"></div>
-  </main>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>P2672045</title>
+    <link rel="stylesheet" href="css/styles.css"> 
+  </head>
+  <body>
+    <main>
+      <div id="textWindow">
+        <div id="background"></div>
+        <div id="background-transition"></div>
+        <h1 id="titleBanner" class="black">Tom Cornes</h1>
+        <div id="colorSelector">
+          <label for="bgColor">Background Color:</label>
+          <input id="bgColor" type="color" value="#ffffff">
+        </div>
+      </div>
+    </main>
     <script src="js/scripts.js"></script>
-</body>
+  </body>
 </html>
diff --git a/js/scripts.js b/js/scripts.js
index ad86b2e..c092d16 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -1 +1,101 @@
-console.log("hello");
\ No newline at end of file
+console.log("hello");
+
+function changeBackground(R, G, B) {
+    const colours = [
+        [255, 255, 255],
+        [210, 100, 110],
+        [90, 65, 125],
+        [210, 160, 100],
+        [220, 100, 15],
+        [210, 15, 0],
+        [100, 125, 150],
+        [100, 140, 90],
+        [20, 40, 20],
+        [220, 140, 180],
+        [0, 0, 0],
+        [0, 140, 220],
+        [0, 255, 160],
+        [60, 90, 20]
+    ]
+    
+}
+
+function transitionBackground(newUrl, blackwhite) {
+    const background = document.getElementById("background");
+    const transitionLayer = document.getElementById("background-transition");
+    const title = document.getElementById("titleBanner");
+
+    title.className = blackwhite;
+
+    transitionLayer.style.background = `url(${newUrl}) 50% 50% / cover`;
+    transitionLayer.style.display = "block";
+    transitionLayer.style.opacity = "0";
+
+    setTimeout(() => {
+        transitionLayer.style.opacity = '1'; 
+    }, 10);
+
+    transitionLayer.addEventListener("transitionend", () => {
+        background.style.background = `url(${newUrl}) 50% 50% / cover`;
+        transitionLayer.style.display = "none";
+        transitionLayer.style.opacity = "0";
+    }, {once: true});
+}
+
+function transitionFog() {
+    transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black");
+}
+
+function transitionSunset() {
+    transitionBackground("assets/photos/sunset-5928907-lizzymay.jpg", "white");
+}
+
+function transitionSunsetPurple() {
+    transitionBackground("assets/photos/sunset-1373171.jpg", "black");
+}
+
+function transitionSunsetYellow() {
+    transitionBackground("assets/photos/sunset-404072.jpg", "black");
+}
+
+function transitionRoadOrange() {
+    transitionBackground("assets/photos/road-1072821.jpg", "white");
+}
+
+function transitionRoadRed() {
+    transitionBackground("assets/photos/road-8395119.jpg", "white");
+}
+
+function transitionClouds() {
+    transitionBackground("assets/photos/clouds-8459053.jpg", "black");
+}
+
+function transitionForest() {
+    transitionBackground("assets/photos/forest-3622519.jpg", "black");
+}
+
+function transitionAvenue() {
+    transitionBackground("assets/photos/avenue-815297.jpg", "black");
+}
+
+function transitionMountain() {
+    transitionBackground("assets/photos/mountain-landscape-2031539.jpg", "black");
+}
+
+function transitionGalaxy() {
+    transitionBackground("assets/photos/milky-way-1845068.jpg", "white");
+}
+
+function transitionThunderstorm() {
+    transitionBackground("assets/photos/thunderstorm-3625405.jpg", "black");
+}
+
+function transitionAurora() {
+    transitionBackground("assets/photos/aurora-1197753.jpg", "black");
+}
+
+function transitionLake() {
+    transitionBackground("assets/photos/hintersee-3601004.jpg", "white");
+}
+
+transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black")
\ No newline at end of file