Footer hover effect

src/components/LinkIcon.jsx

@@ -2,7 +2,7 @@ import Icon from "./Icon";
 
 export default function LinkIcon({ name, link, children }) {
 	return (
-		<a className="hover:text-pink-400" href={link}>
+		<a className="transition-colors hover:text-pink-400" href={link}>
 			<Icon name={name}>{children}</Icon>
 		</a>
 	);

src/components/Section.jsx

@@ -1,3 +1,5 @@
 export default function Section({ children }) {
-	return <div className="mb-20 text-center text-white">{children}</div>;
+	return (
+		<div className="mb-12 text-center text-white md:mb-20">{children}</div>
+	);
 }

src/components/sections/Footer.jsx

@@ -2,17 +2,17 @@ export default function Footer() {
 	return (
 		<footer className="mx-auto w-[70%] pt-4 text-center text-white text-opacity-60">
 			<ul className="mb-5 flex items-center justify-center">
-				<li>
+				<li className="transition-colors hover:text-rose-500">
 					<a href="https://www.linkedin.com/in/TGSolheim">
 						<span className="font-extrabold">Linked</span>in
 					</a>
 				</li>
-				<li className="mx-3 flex h-[40px] items-center border-x border-stone-400 border-opacity-50 px-3">
+				<li className="mx-3 flex h-[40px] items-center border-x border-stone-400 border-opacity-50 px-3 transition-colors hover:text-rose-500">
 					<a href="https://www.github.com/Taxato">
 						<span className="font-bold">Git</span>Hub
 					</a>
 				</li>
-				<li>
+				<li className="transition-colors hover:text-rose-500">
 					<a href="mailto: thomas.solheim01@gmail.com" className="">
 						<span className="font-bold">E</span>mail
 					</a>