From 595b50585bc8b352601a101b7828bc5ea6790647 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 20:18:21 +0200
Subject: [PATCH 01/13] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e01ae73..f4e81ff 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

From 47e7c006bff5cf47f54c3222c6e878151386a7da Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 20:57:29 +0200
Subject: [PATCH 02/13] Update next.config.mjs

---
 next.config.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index 4678774..4eef611 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    basePath: '/react',
+};
 
 export default nextConfig;

From f812ac1d2bd04c1a7414a9d6723020de4cbdd79b Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:10:21 +0200
Subject: [PATCH 03/13] Update next.config.mjs

---
 next.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/next.config.mjs b/next.config.mjs
index 4eef611..56b835f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: '/react',
+    assetPrefix: 'https://interstellardevelopment.org',
 };
 
 export default nextConfig;

From ca090ed4ab69c3f13673b9be1867753c242951c9 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:11:49 +0200
Subject: [PATCH 04/13] Update next.config.mjs

---
 next.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index 56b835f..b83b98f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: '/react',
-    assetPrefix: 'https://interstellardevelopment.org',
+    assetPrefix: 'https://interstellardevelopment.org/react',
 };
 
 export default nextConfig;

From 02156bd30c88e5253044c6894470862f58b591c6 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:13:28 +0200
Subject: [PATCH 05/13] Update next.config.mjs

---
 next.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index b83b98f..16effd2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: '/react',
-    assetPrefix: 'https://interstellardevelopment.org/react',
+    assetPrefix: '/react',
 };
 
 export default nextConfig;

From f6fabd0c2c7f053041ae0421d3d11c80ae9ca39d Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:15:18 +0200
Subject: [PATCH 06/13] Update next.config.mjs

---
 next.config.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index 16effd2..4eef611 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: '/react',
-    assetPrefix: '/react',
 };
 
 export default nextConfig;

From cc42680e3490424529152cc536107e7b9a08d841 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:17:26 +0200
Subject: [PATCH 07/13] Update app/LandingPage.tsx

---
 app/LandingPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/LandingPage.tsx b/app/LandingPage.tsx
index d5e54f4..2eac8ed 100644
--- a/app/LandingPage.tsx
+++ b/app/LandingPage.tsx
@@ -14,7 +14,7 @@ const Home = () => {
         <section className="cards">
           <div className="card">
             <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/Patrick.png" alt="Patrick" />
+                <img src="../public/img/Patrick.png" alt="Patrick" />
                 <h3>Patrick</h3>
                 <p>
                     Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations.
@@ -24,7 +24,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/sage.png" alt="Luca" />
+                <img src="../public/img/sage.png" alt="Luca" />
                 <h3>Luca</h3>
                 <p>
                     Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
@@ -34,7 +34,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/YasinOnm08" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/yasin.png" alt="Yasin" />
+                <img src="../public/img/yasin.png" alt="Yasin" />
                 <h3>Yasin</h3>
                 <p>
                     Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.

From dc850140b33a93b0fa726ed271dc6e5c6572a88d Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:21:06 +0200
Subject: [PATCH 08/13] Update app/LandingPage.tsx

---
 app/LandingPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/LandingPage.tsx b/app/LandingPage.tsx
index 2eac8ed..401ffc8 100644
--- a/app/LandingPage.tsx
+++ b/app/LandingPage.tsx
@@ -14,7 +14,7 @@ const Home = () => {
         <section className="cards">
           <div className="card">
             <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="../public/img/Patrick.png" alt="Patrick" />
+                <img src="/react/public/img/Patrick.png" alt="Patrick" />
                 <h3>Patrick</h3>
                 <p>
                     Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations.
@@ -24,7 +24,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="../public/img/sage.png" alt="Luca" />
+                <img src="/react/public/img/sage.png" alt="Luca" />
                 <h3>Luca</h3>
                 <p>
                     Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
@@ -34,7 +34,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/YasinOnm08" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="../public/img/yasin.png" alt="Yasin" />
+                <img src="/react/public/img/yasin.png" alt="Yasin" />
                 <h3>Yasin</h3>
                 <p>
                     Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.

From d2ddd362a9652e3d9d92ac85ca83cad6b764fcfe Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:21:29 +0200
Subject: [PATCH 09/13] Update app/App.css

---
 app/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/App.css b/app/App.css
index cc0b3e2..adb37ea 100644
--- a/app/App.css
+++ b/app/App.css
@@ -15,7 +15,7 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin-top: 10em;
-    background-image: url(/img/image.png);
+    background-image: url(/react/public/img/image.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

From bab57ab5a89a41823a9f8c0815c2fdb573d92f66 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:24:16 +0200
Subject: [PATCH 10/13] Update app/App.css

---
 app/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/App.css b/app/App.css
index adb37ea..84e506f 100644
--- a/app/App.css
+++ b/app/App.css
@@ -15,7 +15,7 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin-top: 10em;
-    background-image: url(/react/public/img/image.png);
+    background-image: url(/react/react/public/img/image.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

From 8e4ba2de7477f685d08fedaefb89fe4aa94582d6 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:27:26 +0200
Subject: [PATCH 11/13] Update app/App.css

---
 app/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/App.css b/app/App.css
index 84e506f..cc0b3e2 100644
--- a/app/App.css
+++ b/app/App.css
@@ -15,7 +15,7 @@ body {
     flex-direction: column;
     min-height: 100vh;
     margin-top: 10em;
-    background-image: url(/react/react/public/img/image.png);
+    background-image: url(/img/image.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

From 8438ec2f9c4780619813bfb1c737a9c7d7607c1f Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.localhost>
Date: Wed, 4 Sep 2024 21:27:47 +0200
Subject: [PATCH 12/13] Update app/LandingPage.tsx

---
 app/LandingPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/LandingPage.tsx b/app/LandingPage.tsx
index 401ffc8..d5e54f4 100644
--- a/app/LandingPage.tsx
+++ b/app/LandingPage.tsx
@@ -14,7 +14,7 @@ const Home = () => {
         <section className="cards">
           <div className="card">
             <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/react/public/img/Patrick.png" alt="Patrick" />
+                <img src="/img/Patrick.png" alt="Patrick" />
                 <h3>Patrick</h3>
                 <p>
                     Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations.
@@ -24,7 +24,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/react/public/img/sage.png" alt="Luca" />
+                <img src="/img/sage.png" alt="Luca" />
                 <h3>Luca</h3>
                 <p>
                     Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
@@ -34,7 +34,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/YasinOnm08" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/react/public/img/yasin.png" alt="Yasin" />
+                <img src="/img/yasin.png" alt="Yasin" />
                 <h3>Yasin</h3>
                 <p>
                     Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.

From 27b9e05e5e0d659cb381c883b5a06d431ce07410 Mon Sep 17 00:00:00 2001
From: Sage The DM <luca.burger@grischuni.net>
Date: Wed, 4 Sep 2024 21:49:06 +0200
Subject: [PATCH 13/13] Fixed my mistake

---
 app/App.css | 375 +++++-----------------------------------------------
 1 file changed, 34 insertions(+), 341 deletions(-)

diff --git a/app/App.css b/app/App.css
index cc0b3e2..f486ede 100644
--- a/app/App.css
+++ b/app/App.css
@@ -1,157 +1,4 @@
-/* app.css */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Basic body styling */
-body {
-    background-color: #f4f4f4;
-    color: #333;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    margin-top: 10em;
-    background-image: url(/img/image.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
-/* Header styling */
-.header {
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    position: fixed;
-    top: 0;
-}
-
-.header h1 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.header nav {
-    margin-top: 10px;
-}
-
-.header button {
-    margin: 0 10px;
-    padding: 10px 20px;
-    border-radius: 4px;
-    background-color: #4a90e2;
-    color: #fff;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    border: none;
-}
-
-.header button:hover {
-    background-color: #357ab8;
-}
-
-/* Content container */
-.content {
-    padding: 20px;
-    flex: 1;
-    text-align: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Card styles */
-section .cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin-top: 50px;
-}
-
-section .card {
-    text-align: center;
-    list-style: none;
-    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-section .card:hover {
-    transform: translateY(-5px); /* Slight lift effect */
-    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
-}
-
-section .card img {
-  height: 80px; /* Image size */
-  width: 80px;
-  object-fit: cover;
-  border-radius: 50%; /* Circular image */
-  margin: 0 auto 15px;
-  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
-}
-
-section .card h3 {
-  margin: 10px 0;
-  font-size: 1.2em;
-  font-weight: bold;
-  color: #ffdd55; /* Star yellow for card titles */
-  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
-}
-
-section .card p {
-  flex-grow: 1;
-  color: #c7d5e0; /* Light gray-blue for card content */
-  margin-bottom: 10px;
-}
-
-/* Responsive layout */
-@media (max-width: 768px) {
-  .header h1 {
-    font-size: 20px;
-  }
-
-  .header button {
-    margin: 5px 0;
-    padding: 10px;
-    font-size: 14px;
-  }
-
-  .content {
-    padding: 15px;
-    margin-top: 15px;
-  }
-
-   section .card {
-    padding: 12px; /* Adjusted padding */
-  }
-
-  section .card img {
-    height: 60px; /* Adjusted height */
-    width: 60px; /* Adjusted width */
-    border-radius: 8px; /* Adjusted border-radius */
-  }
-}
-/* app.css */
-
+/* General Reset */
 * {
   margin: 0;
   padding: 0;
@@ -160,12 +7,13 @@ section .card p {
 
 /* Basic body styling */
 body {
-  background-color: #f4f4f4;
+  background: #f4f4f4 url(/img/image.png) no-repeat center/cover fixed;
   color: #333;
   line-height: 1.6;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  margin-top: 10em;
 }
 
 /* Header styling */
@@ -176,6 +24,9 @@ body {
   text-align: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
 }
 
 .header h1 {
@@ -195,8 +46,8 @@ body {
   color: #fff;
   font-size: 16px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
   border: none;
+  transition: background-color 0.3s ease;
 }
 
 .header button:hover {
@@ -209,29 +60,28 @@ body {
   flex: 1;
   text-align: center;
   max-width: 1200px;
-  margin: 0 auto;
+  margin: 80px auto 0; /* Adjusted for fixed header height */
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
 }
 
 /* Card styles */
-section.cards {
+.cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin-top: 50px;
 }
 
-section.card {
+.card {
   text-align: center;
   list-style: none;
-  background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
+  background-color: rgba(46, 58, 95, 0.9);
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-  border: 1px solid #3a4971; /* Slightly lighter border for card edges */
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
+  border: 1px solid #3a4971;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -240,31 +90,31 @@ section.card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-section.card:hover {
-  transform: translateY(-5px); /* Slight lift effect */
-  box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5);
 }
 
-section.card img {
-  height: 80px; /* Image size */
+.card img {
+  height: 80px;
   width: 80px;
   object-fit: cover;
-  border-radius: 50%; /* Circular image */
+  border-radius: 50%;
   margin: 0 auto 15px;
-  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
+  box-shadow: 0 0 10px rgba(255, 221, 85, 0.5);
 }
 
-section.card h3 {
+.card h3 {
   margin: 10px 0;
   font-size: 1.2em;
   font-weight: bold;
-  color: #ffdd55; /* Star yellow for card titles */
-  text-shadow: 0 0 10px #ffdd55; /* Glow effect */
+  color: #ffdd55;
+  text-shadow: 0 0 10px #ffdd55;
 }
 
-section.card p {
+.card p {
   flex-grow: 1;
-  color: #c7d5e0; /* Light gray-blue for card content */
+  color: #c7d5e0;
   margin-bottom: 10px;
 }
 
@@ -285,174 +135,17 @@ section.card p {
     margin-top: 15px;
   }
 
-  section.cards {/* app.css */
+  .cards {
+    grid-template-columns: 1fr;
+  }
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+  .card {
+    padding: 12px;
+  }
 
-/* Basic body styling */
-body {
-    background-color: #f4f4f4;
-    color: #333;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    background-image: url(/img/image.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
-/* Header styling */
-.header {
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    position: fixed;
-    top: 0;
-    z-index: 1000; /* Ensure header stays above other content */
-}
-
-.header h1 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.header nav {
-    margin-top: 10px;
-}
-
-.header button {
-    margin: 0 10px;
-    padding: 10px 20px;
-    border-radius: 4px;
-    background-color: #4a90e2;
-    color: #fff;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    border: none;
-}
-
-.header button:hover {
-    background-color: #357ab8;
-}
-
-/* Content container */
-.content {
-    padding: 20px;
-    flex: 1;
-    text-align: center;
-    max-width: 1200px;
-    margin: 80px auto 0; /* Adjusted for fixed header height */
-    background-color: #fff;
+  .card img {
+    height: 60px;
+    width: 60px;
     border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Card styles */
-section.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 20px;
-    margin-top: 50px;
-}
-
-section.card {
-    text-align: center;
-    list-style: none;
-    background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
-    border: 1px solid #3a4971; /* Slightly lighter border for card edges */
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-section.card:hover {
-    transform: translateY(-5px); /* Slight lift effect */
-    box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
-}
-
-section.card img {
-    height: 80px; /* Image size */
-    width: 80px;
-    object-fit: cover;
-    border-radius: 50%; /* Circular image */
-    margin: 0 auto 15px;
-    box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
-}
-
-section.card h3 {
-    margin: 10px 0;
-    font-size: 1.2em;
-    font-weight: bold;
-    color: #ffdd55; /* Star yellow for card titles */
-    text-shadow: 0 0 10px #ffdd55; /* Glow effect */
-}
-
-section.card p {
-    flex-grow: 1;
-    color: #c7d5e0; /* Light gray-blue for card content */
-    margin-bottom: 10px;
-}
-
-/* Responsive layout */
-@media (max-width: 768px) {
-    .header h1 {
-        font-size: 20px;
-    }
-
-    .header button {
-        margin: 5px 0;
-        padding: 10px;
-        font-size: 14px;
-    }
-
-    .content {
-        padding: 15px;
-        margin-top: 15px; /* Adjusted for smaller screen size */
-    }
-
-    section.cards {
-        grid-template-columns: 1fr; /* One card per row on mobile */
-    }
-
-    section.card {
-        padding: 12px; /* Adjusted padding */
-    }
-
-    section.card img {
-        height: 60px; /* Adjusted height */
-        width: 60px; /* Adjusted width */
-        border-radius: 8px; /* Adjusted border-radius */
-    }
-}
-
-    grid-template-columns: 1fr; /* One card per row on mobile */
-  }
-
-  section.card {
-    padding: 12px; /* Adjusted padding */
-  }
-
-  section.card img {
-    height: 60px; /* Adjusted height */
-    width: 60px; /* Adjusted width */
-    border-radius: 8px; /* Adjusted border-radius */
   }
 }
-