fix & style: change some colors and apply z-index for header, so it will be on top of everything

package.json

@@ -1,7 +1,7 @@
 {
   "name": "givs-website-react",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Footer/index.tsx

@@ -2,7 +2,7 @@ export default function Footer() {
     return (
         <footer>
             <p>© 2025 GivFNZ</p>
-            <p>Version: 1.3.0</p>
+            <p>Version: 1.3.1</p>
         </footer>
     )
 }

src/components/Header/styles.ts

@@ -41,6 +41,7 @@ export const HeaderContainer = styled.div`
   height: 70px;
   background-color: ${props => props.theme["green-400"]};
   color: ${props => props.theme.white};
+  z-index: 1;
 
   nav {
     display: flex;

src/pages/home/styles.ts

@@ -9,6 +9,7 @@ export const IconContainer = styled.div`
 export const IconLink = styled.a`
   color: ${props => props.theme["light-cream"]};
   transition: color 0.3s;
+  text-decoration: none;
 
   &:hover {
     color: ${props => props.theme["cream"]};

src/pages/music/index.tsx

@@ -3,6 +3,7 @@ import { MainContainer } from "../../components/MainContent/styles";
 import { useQuery } from '@tanstack/react-query'
 import { Paragraph } from "../../components/Paragraph/styles";
 import { useTranslation } from "react-i18next";
+import { IconLink } from "../home/styles";
 
 
 export default function Music() {
@@ -16,7 +17,7 @@ export default function Music() {
             <h1>{t("myLast")}</h1>
             <h3>{t("myLastDescription")}</h3>
             <Paragraph>{lastResponse?.recenttracks?.track[0].name} - {lastResponse?.recenttracks?.track[0].artist["#text"]}</Paragraph>
-            <a target="blank" href={lastResponse?.recenttracks?.track[0].url}>{t("lastLink")}</a>
+            <IconLink target="blank" href={lastResponse?.recenttracks?.track[0].url}>{t("lastLink")}</IconLink>
             <Paragraph>Last update: {lastResponse?.recenttracks?.track[0]?.date["#text"]} UTC</Paragraph>
         </MainContainer>
     )

src/pages/projects/styles.ts

@@ -16,7 +16,7 @@ export const ProjectGrid = styled.div`
 `;
 
 export const ProjectCard = styled.a`
-  background: ${props => props.theme["green-400"]};
+  background: ${props => props.theme["green-500"]};
   padding: 1.5rem;
   border-radius: 8px;
   text-decoration: none;

src/styles/global.ts

@@ -67,7 +67,7 @@ p {
 }
 
 .bgb {
-  background-color: ${props => props.theme["dark-cream"]};
+  background-color: ${props => props.theme["gray-600"]};
   color: ${props => props.theme.white};
   border: none;
   &:focus {