About navigation

PTG/src/Footer.css

@@ -24,7 +24,3 @@ p, a{
     justify-content: space-evenly;
     flex-wrap: wrap;
 }
-
-a:hover{
-    transform: translateY(-8px);
-}

PTG/src/Header.css

@@ -1,34 +1,25 @@
-.header {
+header {
     background-color: red;
-    color: white;
-    align-items: center;
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.name{
-    margin: 0;
-    padding: 10px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 5px;
 }
 
 .about{
-    height: 100%;
-    padding: 10px;
-    border: 0;
-    background-color: red;
+    right: 5%;
+    position: absolute;
     color: white;
-    transition: transform 0.3s ease-in-out;
-
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
-.about:hover{
-    cursor: pointer;
-    transform: translateY(-8px);
-}
+.websiteName{
+    color: white;
+    margin-top: 5px;
+    margin-bottom: 5px;
 
-div{
-    margin-bottom: 10px;
 }
 
 @media screen and (max-width: 400px){

PTG/src/Header.tsx

@@ -1,11 +1,12 @@
 import './Header.css'
+import { Link } from 'react-router-dom'
 
 export default function Header(){
     return(
-        <div>
-        <header className="header">
-            <h1 className="name">Pokémon Team Generator</h1>
-            <button className='about'>About</button>
+        <div className="header">
+        <header>
+            <Link className="websiteName" to={"/"}>Pokémon Team Generator</Link>
+            <Link className="about" to={"/about"}>About</Link>
         </header>
         </div>
     );