added lightmode for footer, box shadows for header and paddings for main element

index.css

@@ -24,10 +24,14 @@ header {
     position: fixed;
     top: 0;
     width: 100%;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075);
 }
 body.light-mode header {
     background-color: #ffffff;
 }
+header.scrolled {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
 
 .logo a {
     color: white;
@@ -106,7 +110,13 @@ footer {
     background-color: rgb(27, 31, 34);
     padding: 48px 0px;
     width: 100%;
+    border-top: 1px solid #222222;
 }
+body.light-mode footer {
+    background-color: #eeeeee;
+    border-top: 1px solid #d8d8d8;
+}
+
 footer .links {
     display: flex;
     align-items: center;
@@ -130,19 +140,34 @@ footer a {
     border-radius: 50%;
     text-decoration: none;
 }
+footer a:hover {
+    background-color: rgb(20, 23, 26);
+}
+body.light-mode footer a {
+    background-color: rgb(231, 231, 231);
+    color: rgb(29, 29, 29);
+}
+body.light-mode footer a:hover {
+    background-color: rgb(192, 192, 192);
+}
+
 footer p {
     color: rgb(216, 216, 216);
     text-decoration: none;
     font-size: 14px;
     justify-self: center;
 }
+body.light-mode footer p {
+    color: #242424;
+}
 
 /*
     MAIN
 */
 main {
     max-width: 1200px;
-    margin: 0 auto;
+    padding-top: 32px;
+    margin: 72px auto 0 auto; /* Top margin matches header height */
 }
 
 

index.html

@@ -17,7 +17,7 @@
 
         <ul>
           <li>
-            <a href="#home">Home</a>
+            <a href="#">Home</a>
           </li>
           <li>
             <a href="#showcase">Showcase</a>
@@ -36,7 +36,7 @@
     <main>
       <section id="home">
         <div class="home-container">
-
+          <p>Software Developer</p>
         </div>
       </section>
       <section id="showcase">
@@ -58,10 +58,10 @@
 
     <footer>
       <div class="links">
-        <a href="#"><i class='fab fa-discord'></i></a>
-        <a href="#"><i class="fa-brands fa-github"></i></a>
-        <a href="#"><i class="fa-brands fa-git-alt"></i></a>
-        <a href="#"><i class="fa-brands fa-steam"></i></a>
+        <a href="https://discord.gg/APgmsfA9Ae"><i class='fab fa-discord'></i></a>
+        <a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
+        <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
+        <a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a>
       </div>
       <p>&copy 2025 Tarion. All rights reserved.</p>
     </footer>

script.js

@@ -22,4 +22,15 @@ document.addEventListener("DOMContentLoaded", () => {
     darkModeButton.addEventListener("click", () => {
         toggleDarkMode(true);
     })    
+
+    // Add/remove scrolled style to header
+    window.addEventListener("scroll", () => {
+        const header = document.querySelector("header");
+
+        if (window.scrollY === 0){
+            header.classList.remove("scrolled");
+        } else {
+            header.classList.add("scrolled");
+        }
+    })
 })