diff --git a/index.html b/index.html
index 4a00831..b4ae38a 100644
--- a/index.html
+++ b/index.html
@@ -50,6 +50,7 @@ <h2>About Me</h2>
               onkeydown="handleKeyDown(event)"
             />
             <button onclick="updateUsername()">Update</button>
+            
           </div>
           <select
             class="gh-search-list"
@@ -86,5 +87,26 @@ <h2 id="overlay-title"></h2>
     <script type="text/javascript" src="js/predict.js"></script>
     <script type="text/javascript" src="js/settings.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
+
+    <script>
+      if (isUnsplashEnabled()) {
+        fetch('https://source.unsplash.com/1600x900/?nature')
+          .then(response => {
+            document.body.style.backgroundImage = `url(${response.url})`;
+          })
+          .catch(error => console.error('Fehler beim Laden des Hintergrundbilds:', error));
+      }
+
+      window.addEventListener('resize', () => {
+        const windowHeight = window.innerHeight;
+        const formHeight = document.getElementById('form').offsetHeight;
+        const padding = (windowHeight - formHeight) / 2;
+        document.body.style.paddingTop = padding + 'px';
+      });
+
+      window.dispatchEvent(new Event('resize'));
+
+      
+    </script>
   </body>
 </html>
diff --git a/js/index.js b/js/index.js
index d15e89c..47c2ab9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,162 +1,205 @@
-   // Default username
-let username = "schBenedikt";
-const home = document.getElementById("home");
-home.href = `https://www.github.com/${username}`;
-
-
-// Function to get the GitHub user data via API
-async function getGitHubUser(username) {
-  const response = await fetch(`https://api.github.com/users/${username}`);
-  const data = await response.json();
-  return data;
-}
-
-// Function to get the GitHub project data via API
-async function getGitHubProjects(username) {
-  const response = await fetch(`https://api.github.com/users/${username}/repos`);
-  const data = await response.json();
-  return data.slice(0, 15);
-}
-
-// Function to create the project cards based on the project data
-function createProjectCards(projects) {
-  const projectsContainer = document.querySelector(".projects");
-  projectsContainer.innerHTML = ""; // Clear existing project cards
-
-  const maxProjectsToShow = 5; // Maximum number of projects to show initially
-  const showAllButton = document.createElement("button");
-  showAllButton.textContent = "Show All Projects";
-  showAllButton.onclick = () => {
-    showAllButton.style.display = "none"; // Hide the button after clicking
-    projects.forEach((project, index) => {
-      if (index >= maxProjectsToShow) {
-        const projectCard = createProjectCard(project);
-        projectsContainer.appendChild(projectCard);
-      }
-    });
-    const collapseButton = document.createElement("button");
-    collapseButton.textContent = "Collapse";
-    collapseButton.onclick = () => {
-      projectsContainer.innerHTML = ""; // Clear project cards
-      for (let i = 0; i < Math.min(projects.length, maxProjectsToShow); i++) {
-        const projectCard = createProjectCard(projects[i]);
-        projectsContainer.appendChild(projectCard);
-      }
-      projectsContainer.appendChild(showAllButton); // Show the "Show All Projects" button
-    };
-    projectsContainer.appendChild(collapseButton); // Show the "Collapse" button
-  };
+  // Default username
+  let username = "schBenedikt";
+  const home = document.getElementById("home");
+  home.href = `https://www.github.com/${username}`;
 
-  for (let i = 0; i < Math.min(projects.length, maxProjectsToShow); i++) {
-    const project = projects[i];
-    const projectCard = createProjectCard(project);
-    projectsContainer.appendChild(projectCard);
+
+  // Function to get the GitHub user data via API
+  async function getGitHubUser(username) {
+    const response = await fetch(`https://api.github.com/users/${username}`);
+    const data = await response.json();
+    return data;
   }
 
-  if (projects.length > maxProjectsToShow) {
-    projectsContainer.appendChild(showAllButton);
+  // Function to get the GitHub project data via API
+  async function getGitHubProjects(username) {
+    const response = await fetch(`https://api.github.com/users/${username}/repos`);
+    const data = await response.json();
+    return data.slice(0, 15);
   }
-}
-
-function createProjectCard(project) {
-  const projectCard = document.createElement("div");
-  projectCard.classList.add("project");
-  projectCard.onclick = () => openOverlay(project);
-
-  const title = document.createElement("h2");
-  title.textContent = project.name;
-
-  const description = document.createElement("p");
-  description.textContent = project.description;
-
-  const viewLink = document.createElement("a");
-  viewLink.href = project.html_url;
-  viewLink.textContent = "View Project";
-  viewLink.target = "_blank"; // Open link in a new tab
-
-  projectCard.appendChild(title);
-  projectCard.appendChild(description);
-  projectCard.appendChild(viewLink);
-
-  return projectCard;
-}
-
-// Function to get the contents of a project's README.md file
-async function getReadmeContent(username, repoName) {
-  const response = await fetch(`https://api.github.com/repos/${username}/${repoName}/readme`);
-  const data = await response.json();
-
-  if (data.download_url) {
-    const readmeResponse = await fetch(data.download_url);
-    const readmeContent = await readmeResponse.text();
-    return readmeContent;
-  } else {
-    return "No README.md file found.";
+
+  // Function to create the project cards based on the project data
+  function createProjectCards(projects) {
+    const projectsContainer = document.querySelector(".projects");
+    projectsContainer.innerHTML = ""; // Clear existing project cards
+
+    const maxProjectsToShow = 5; // Maximum number of projects to show initially
+    const showAllButton = document.createElement("button");
+    showAllButton.textContent = "Show All Projects";
+    showAllButton.onclick = () => {
+      showAllButton.style.display = "none"; // Hide the button after clicking
+      projects.forEach((project, index) => {
+        if (index >= maxProjectsToShow) {
+          const projectCard = createProjectCard(project);
+          projectsContainer.appendChild(projectCard);
+        }
+      });
+      const collapseButton = document.createElement("button");
+      collapseButton.textContent = "Collapse";
+      collapseButton.onclick = () => {
+        projectsContainer.innerHTML = ""; // Clear project cards
+        for (let i = 0; i < Math.min(projects.length, maxProjectsToShow); i++) {
+          const projectCard = createProjectCard(projects[i]);
+          projectsContainer.appendChild(projectCard);
+        }
+        projectsContainer.appendChild(showAllButton); // Show the "Show All Projects" button
+      };
+      projectsContainer.appendChild(collapseButton); // Show the "Collapse" button
+    };
+
+    for (let i = 0; i < Math.min(projects.length, maxProjectsToShow); i++) {
+      const project = projects[i];
+      const projectCard = createProjectCard(project);
+      projectsContainer.appendChild(projectCard);
+    }
+
+    if (projects.length > maxProjectsToShow) {
+      projectsContainer.appendChild(showAllButton);
+    }
   }
-}
 
-async function getRepositoryDetails(username, projectName) {
-  try {
-    const response = await fetch(`https://api.github.com/repos/${username}/${projectName}`);
-    const data = await response.json();
-    data.username = username; // Füge den Username zum Datenobjekt hinzu
-    return data;
-  } catch (error) {
-    console.error("Error fetching repository details:", error);
-    return null;
+  function createProjectCard(project) {
+    const projectCard = document.createElement("div");
+    projectCard.classList.add("project-card"); // Updated class name
+    projectCard.onclick = () => openOverlay(project);
+
+    const title = document.createElement("h2");
+    title.textContent = project.name;
+
+    const description = document.createElement("p");
+    description.textContent = project.description;
+
+    const viewLink = document.createElement("a");
+    viewLink.href = project.html_url;
+    viewLink.textContent = "View Project";
+    viewLink.target = "_blank"; // Open link in a new tab
+
+    projectCard.appendChild(title);
+    projectCard.appendChild(description);
+    projectCard.appendChild(viewLink);
+
+    return projectCard;
   }
-}
 
-async function openOverlay(project) {
-  const overlay = document.getElementById("overlay");
-  const overlayReadme = document.getElementById("overlay-readme");
+  // Function to get the contents of a project's README.md file
+  async function getReadmeContent(username, repoName) {
+    const response = await fetch(`https://api.github.com/repos/${username}/${repoName}/readme`);
+    const data = await response.json();
 
-  if (project === 'about') {
-    const aboutDescription = document.getElementById("about-description");
-    overlayReadme.innerHTML = aboutDescription.innerHTML;
-  } else {
+    if (data.download_url) {
+      const readmeResponse = await fetch(data.download_url);
+      const readmeContent = await readmeResponse.text();
+      return readmeContent;
+    } else {
+      return "No README.md file found.";
+    }
+  }
 
+  async function getRepositoryDetails(username, projectName) {
     try {
-      // Get README.md content
-      const readmeContent = await getReadmeContent(username, project.name);
+      const response = await fetch(`https://api.github.com/repos/${username}/${projectName}`);
+      const data = await response.json();
+      data.username = username; // Füge den Username zum Datenobjekt hinzu
+      return data;
+    } catch (error) {
+      console.error("Error fetching repository details:", error);
+      return null;
+    }
+  }
 
-      // Get repository details (including the number of stars, forks, watchers, and contributors)
-      const repositoryDetails = await getRepositoryDetails(username, project.name);
+  async function openOverlay(project) {
+    const overlay = document.getElementById("overlay");
+    const overlayReadme = document.getElementById("overlay-readme");
 
-      // Get the topics for the project
-      const topicsResponse = await fetch(`https://api.github.com/repos/${username}/${project.name}/topics`, {
-        headers: {
-          Accept: "application/vnd.github.mercy-preview+json" // Include the 'topics' preview header
-        }
-      });
-      const topicsData = await topicsResponse.json();
-      const topics = topicsData.names.join(", ");
+    if (project === 'about') {
+      const aboutDescription = document.getElementById("about-description");
+      overlayReadme.innerHTML = aboutDescription.innerHTML;
+    } else {
 
-      // Open the new page with README content, number of stars, forks, watchers, topics, and project description
-      window.open(`project.html?username=${encodeURIComponent(username)}&project=${encodeURIComponent(project.name)}&content=${encodeURIComponent(readmeContent)}&stars=${encodeURIComponent(repositoryDetails.stargazers_count)}&forks=${encodeURIComponent(repositoryDetails.forks_count)}&watchers=${encodeURIComponent(repositoryDetails.watchers_count)}&topics=${encodeURIComponent(topics)}&description=${encodeURIComponent(project.description)}`, '_blank');
-    } catch (error) {
-      console.error("Error getting README.md content, repository details, or topics:", error);
-      return;
+      try {
+        // Get README.md content
+        const readmeContent = await getReadmeContent(username, project.name);
+
+        // Get repository details (including the number of stars, forks, watchers, and contributors)
+        const repositoryDetails = await getRepositoryDetails(username, project.name);
+
+        // Get the topics for the project
+        const topicsResponse = await fetch(`https://api.github.com/repos/${username}/${project.name}/topics`, {
+          headers: {
+            Accept: "application/vnd.github.mercy-preview+json" // Include the 'topics' preview header
+          }
+        });
+        const topicsData = await topicsResponse.json();
+        const topics = topicsData.names.join(", ");
+
+        // Open the new page with README content, number of stars, forks, watchers, topics, and project description
+        window.open(`project.html?username=${encodeURIComponent(username)}&project=${encodeURIComponent(project.name)}&content=${encodeURIComponent(readmeContent)}&stars=${encodeURIComponent(repositoryDetails.stargazers_count)}&forks=${encodeURIComponent(repositoryDetails.forks_count)}&watchers=${encodeURIComponent(repositoryDetails.watchers_count)}&topics=${encodeURIComponent(topics)}&description=${encodeURIComponent(project.description)}`, '_blank');
+      } catch (error) {
+        console.error("Error getting README.md content, repository details, or topics:", error);
+        return;
+      }
     }
+
+    overlay.classList.add("inactive");
   }
 
-  overlay.classList.add("inactive");
-}
-
-// Function to update the username and reload data
-function updateUsername() {
-  const usernameInput = document.getElementById("username-input");
-  const newUsername = usernameInput.value.trim();
-  home.href = `https://www.github.com/${newUsername}`;
-  if (newUsername === "") {
-    alert("Please enter a valid username.");
-    return;
+  // Function to update the username and reload data
+  function updateUsername() {
+    const usernameInput = document.getElementById("username-input");
+    const newUsername = usernameInput.value.trim();
+    home.href = `https://www.github.com/${newUsername}`;
+    if (newUsername === "") {
+      alert("Please enter a valid username.");
+      return;
+    }
+
+    username = newUsername;
+    usernameInput.value = ""; // Clear the input field
+
+    // Reload data
+    Promise.all([
+      getGitHubUser(username),
+      getGitHubProjects(username),
+      getReadmeContent(username, username)
+    ])
+      .then(([user, projects, aboutContent]) => {
+        createProjectCards(projects);
+        const aboutDescription = document.getElementById("about-description");
+        const converter = new showdown.Converter();
+        const htmlContent = converter.makeHtml(aboutContent);
+        aboutDescription.innerHTML = htmlContent;
+
+        // Update the user profile picture
+        const profileImg = document.getElementById("profile-picture");
+        profileImg.src = user.avatar_url;
+        profileImg.alt = `${username}'s Profile Picture`;
+      })
+      .catch((error) => {
+        console.error("Error updating username:", error);
+      });
   }
 
-  username = newUsername;
-  usernameInput.value = ""; // Clear the input field
+  // Get the projects container
+  const projectsContainer = document.querySelector(".projects");
+
+  // Filter the projects based on the search input
+  function filterProjects() {
+    const searchInput = document.getElementById("search-input").value.toLowerCase();
+    const projectCards = projectsContainer.getElementsByClassName("project-card"); // Updated class name
+
+    for (const projectCard of projectCards) {
+      const title = projectCard.querySelector("h2").textContent.toLowerCase();
+      const description = projectCard.querySelector("p").textContent.toLowerCase();
+
+      if (title.includes(searchInput) || description.includes(searchInput)) {
+        projectCard.style.display = "block";
+      } else {
+        projectCard.style.display = "none";
+      }
+    }
+  }
 
-  // Reload data
+  // Load initial data
   Promise.all([
     getGitHubUser(username),
     getGitHubProjects(username),
@@ -169,89 +212,48 @@ function updateUsername() {
       const htmlContent = converter.makeHtml(aboutContent);
       aboutDescription.innerHTML = htmlContent;
 
-      // Update the user profile picture
+      // Set the user profile picture
       const profileImg = document.getElementById("profile-picture");
       profileImg.src = user.avatar_url;
       profileImg.alt = `${username}'s Profile Picture`;
     })
     .catch((error) => {
-      console.error("Error updating username:", error);
-    });
-}
-
-// Get the projects container
-const projectsContainer = document.querySelector(".projects");
-
-// Filter the projects based on the search input
-function filterProjects() {
-  const searchInput = document.getElementById("search-input").value.toLowerCase();
-  const projectCards = projectsContainer.getElementsByClassName("project");
-
-  for (const projectCard of projectCards) {
-    const title = projectCard.querySelector("h2").textContent.toLowerCase();
-    const description = projectCard.querySelector("p").textContent.toLowerCase();
-
-    if (title.includes(searchInput) || description.includes(searchInput)) {
-      projectCard.style.display = "block";
-    } else {
-      projectCard.style.display = "none";
-    }
-  }
-}
-
-// Load initial data
-Promise.all([
-  getGitHubUser(username),
-  getGitHubProjects(username),
-  getReadmeContent(username, username)
-])
-  .then(([user, projects, aboutContent]) => {
-    createProjectCards(projects);
-    const aboutDescription = document.getElementById("about-description");
-    const converter = new showdown.Converter();
-    const htmlContent = converter.makeHtml(aboutContent);
-    aboutDescription.innerHTML = htmlContent;
-
-    // Set the user profile picture
-    const profileImg = document.getElementById("profile-picture");
-    profileImg.src = user.avatar_url;
-    profileImg.alt = `${username}'s Profile Picture`;
-  })
-  .catch((error) => {
-    console.error("Error loading initial data:", error);
-  }); 
-  
-  // Function to handle keydown event on the username input field
-  function handleKeyDown(event) {
-    if (event.key === "Enter") {
-      updateUsername();
+      console.error("Error loading initial data:", error);
+    }); 
+    
+    // Function to handle keydown event on the username input field
+    function handleKeyDown(event) {
+      if (event.key === "Enter") {
+        updateUsername();
+      }
     }
-  }
 
-$(document).ready(function(){
-  var retryCount = 0;
-  var maxRetries = 3;
-
-  function fetchData() {
-    $.ajax({
-      url: "https://api.github.com/",
-      type: "GET",
-      success: function(){
-        $(".container").addClass("success");
-        $("#github-api-status").html("🟢 GitHub API is working");
-      },
-      error: function(){
-        if (retryCount < maxRetries) {
-          retryCount++;
-          $("#github-api-status").html("🔵 Connection error. Retrying... (" + retryCount + "/" + maxRetries + ")");
-          setTimeout(fetchData, 3000); // Retry after 3 seconds
-        } else {
-          $(".container").addClass("error");
-          $("#github-api-status").html("🔴 GitHub API is not available. <br> <br>Please wait some minutes.");
+  $(document).ready(function(){
+    var retryCount = 0;
+    var maxRetries = 3;
+
+    function fetchData() {
+      $.ajax({
+        url: "https://api.github.com/",
+        type: "GET",
+        success: function(){
+          $(".container").addClass("success");
+          $("#github-api-status").html("🟢 GitHub API is working");
+        },
+        error: function(){
+          if (retryCount < maxRetries) {
+            retryCount++;
+            $("#github-api-status").html("🔵 Connection error. Retrying... (" + retryCount + "/" + maxRetries + ")");
+            setTimeout(fetchData, 3000); // Retry after 3 seconds
+          } else {
+            $(".container").addClass("error");
+            $("#github-api-status").html("🔴 GitHub API is not available. <br> <br>Please wait some minutes.");
+          }
         }
-      }
-    });
-  }
+      });
+    }
+
+    fetchData();
 
-  fetchData();
-}); 
+    
+  });
diff --git a/js/settings.js b/js/settings.js
index 4a90fb3..e83e0e6 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -1,54 +1,33 @@
-
-    function saveBackgroundColor(color) {
-      document.cookie = `background_color=${encodeURIComponent(color)}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
-    }
-
-    function getBackgroundColor() {
-      const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)background_color\s*=\s*([^;]*).*$)|^.*$/, "$1");
-      return decodeURIComponent(cookieValue) || "#ededed";
-    }
-
-    function applyBackgroundColor() {
-      const body = document.body;
-      const backgroundColor = getBackgroundColor();
-      body.style.backgroundColor = backgroundColor;
-    }
-
-    function saveButtonColor(color) {
-      document.cookie = `button_color=${encodeURIComponent(color)}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
-    }
-
-    function getButtonColor() {
-      const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)button_color\s*=\s*([^;]*).*$)|^.*$/, "$1");
-      return decodeURIComponent(cookieValue) || "#fff";
-    }
-
-    function applyButtonColor() {
-      const buttons = document.querySelectorAll(".button");
-      const buttonColor = getButtonColor();
-      buttons.forEach(button => {
-        button.style.backgroundColor = buttonColor;
-        button.style.color = "#333";
-      });
-    }
-
-    function saveProjectColor(color) {
-      document.cookie = `project_color=${encodeURIComponent(color)}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
-    }
-
-    function getProjectColor() {
-      const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)project_color\s*=\s*([^;]*).*$)|^.*$/, "$1");
-      return decodeURIComponent(cookieValue) || "#f8f8f8";
-    }
-
-    function applyProjectColor() {
-      const projects = document.querySelectorAll(".project");
-      const projectColor = getProjectColor();
-      projects.forEach(project => {
-        project.style.backgroundColor = projectColor;
-      });
-    }
-
-    applyBackgroundColor();
-    applyButtonColor();
-    applyProjectColor();
+function saveBackgroundColor(color) {
+  document.cookie = `background_color=${encodeURIComponent(color)}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
+}
+
+function getBackgroundColor() {
+  const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)background_color\s*=\s*([^;]*).*$)|^.*$/, "$1");
+  return decodeURIComponent(cookieValue) || "#ededed";
+}
+
+function applyBackgroundColor() {
+  const body = document.body;
+  const backgroundColor = getBackgroundColor();
+  body.style.backgroundColor = backgroundColor;
+}
+
+function toggleUnsplash(checked) {
+  document.cookie = `unsplash_enabled=${checked}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
+}
+
+function isUnsplashEnabled() {
+  const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)unsplash_enabled\s*=\s*([^;]*).*$)|^.*$/, "$1");
+  return cookieValue === "true";
+}
+
+function applyUnsplash() {
+  const unsplashCheckbox = document.getElementById("unsplash");
+  unsplashCheckbox.checked = isUnsplashEnabled();
+}
+
+applyBackgroundColor();
+applyUnsplash();
+applyStyle();
+applyGlassStyle();
diff --git a/project.html b/project.html
index b6bf6b6..7e1ed92 100644
--- a/project.html
+++ b/project.html
@@ -45,5 +45,24 @@ <h3 id="project-owner"></h3>
     </div>
 
     <script type="text/javascript" src="js/project.js"></script>
+    <script type="text/javascript" src="js/settings.js"></script>
+    <script>
+      if (isUnsplashEnabled()) {
+        fetch('https://source.unsplash.com/1600x900/?nature')
+          .then(response => {
+            document.body.style.backgroundImage = `url(${response.url})`;
+          })
+          .catch(error => console.error('Fehler beim Laden des Hintergrundbilds:', error));
+      }
+
+      window.addEventListener('resize', () => {
+        const windowHeight = window.innerHeight;
+        const formHeight = document.getElementById('form').offsetHeight;
+        const padding = (windowHeight - formHeight) / 2;
+        document.body.style.paddingTop = padding + 'px';
+      });
+
+      window.dispatchEvent(new Event('resize'));
+    </script>
   </body>
 </html>
diff --git a/settings.html b/settings.html
index c94e0f7..0f900ee 100644
--- a/settings.html
+++ b/settings.html
@@ -12,7 +12,7 @@
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       border-radius: 5px;
     }
-    .color-picker-label {
+    .unsplash-check {
       font-size: 18px;
       margin-bottom: 10px;
       background-image: linear-gradient(135deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000);
@@ -43,7 +43,7 @@
     .button:hover {
       transform: scale(1.16);
     }
-    .project {
+    .project, .project-card {
       background-color: #f8f8f8;
       padding: 20px;
       margin-bottom: 20px;
@@ -68,7 +68,7 @@
 <body>
   <div class="container">
     <div class="color-picker-container">
-      <h2 class="color-picker-label">Choose Background Color:</h2>
+      <h2 class="unsplash-check">Choose Background Color:</h2>
       <input
         type="color"
         class="color-picker"
@@ -76,23 +76,14 @@ <h2 class="color-picker-label">Choose Background Color:</h2>
         value="#ededed"
         onchange="saveBackgroundColor(this.value); applyBackgroundColor()"
       />
-      <br>
-      <h2 class="color-picker-label">Choose Button Color:</h2>
-      <input
-        type="color"
-        class="color-picker"
-        id="button-color"
-        value="#333"
-        onchange="saveButtonColor(this.value); applyButtonColor()"
-      />
-      <br>
-      <h2 class="color-picker-label">Choose Project Color:</h2>
+      <br><br>
+
+
+      <h2 class="unsplash-check">Enable Unsplash:</h2>
       <input
-        type="color"
-        class="color-picker"
-        id="project-color"
-        value="#f8f8f8"
-        onchange="saveProjectColor(this.value); applyProjectColor()"
+        type="checkbox"
+        id="unsplash"
+        onchange="toggleUnsplash(this.checked)"
       />
     </div>
   </div>
@@ -100,5 +91,36 @@ <h2 class="color-picker-label">Choose Project Color:</h2>
     <script type="text/javascript" src="js/settings.js"></script>
     <script type="text/javascript" src="js/predict.js"></script>
     <script type="text/javascript" src="js/script.js"></script>
+    <script>
+      const unsplashCheckbox = document.getElementById('unsplash');
+      if (unsplashCheckbox.checked) {
+
+        // Zufälliges Hintergrundbild von Unsplash holen
+        fetch('https://source.unsplash.com/1600x900/?nature')
+          .then(response => {
+              document.body.style.backgroundImage = `url(${response.url})`;
+          })
+          .catch(error => console.error('Fehler beim Laden des Hintergrundbilds:', error));
+
+        // Automatische Anpassung des oberen Paddings
+        window.addEventListener('resize', () => {
+            const windowHeight = window.innerHeight;
+            const formHeight = document.getElementById('form').offsetHeight;
+            const padding = (windowHeight - formHeight) / 2;
+            document.body.style.paddingTop = padding + 'px';
+        });
+
+        // Initialisierung der Anpassung des oberen Paddings
+        window.dispatchEvent(new Event('resize'));
+      }
+
+if (document.getElementById('style').checked) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'style-glass.css';
+  document.head.appendChild(link);
+}
+
+    </script>
 </body>
 </html>
diff --git a/style.css b/style.css
index 0911292..5c87a31 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,13 @@
 body {
-  background-color: gainsboro;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover; 
   font-family: Arial, sans-serif;
   display: flex;
+  margin: 0px;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
@@ -13,11 +19,10 @@ body {
   width: 80%;
   height: 80%;
   padding: 40px;
-  background-color: #f0f0f0;
+  background-color: #f0f0f0e7;
   border-radius: 20px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  /* transform: scale(0.95); */
-  transition: transform 0.3s ease;
   display: flex;
 }
 
@@ -95,7 +100,7 @@ body {
 }
 
 .project p {
-  color: #812020;
+  color: #070202;
 }
 
 .project a {
@@ -368,3 +373,43 @@ img {
   padding-left: 5%;
   min-width: 45%;
 }
+
+.project-card {
+  background-color: #f8f8f8;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.project-card:hover {
+  transform: scale(1.1);
+  transition: 0.4s;
+  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.project-card h2 {
+  margin-top: 0;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  transition: text-shadow 0.3s ease;
+}
+
+.project-card:hover h2 {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.project-card p {
+  color: #070202;
+}
+
+.project-card a {
+  display: inline-block;
+  padding: 8px 12px;
+  background-color: #fff;
+  color: #333;
+  border-radius: 5px;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  text-decoration: none;
+}