Moved css to MainPage

frontend/src/Components/ArtPage.tsx

@@ -4,6 +4,7 @@ import FavoriteButton from './FavoriteButton';
 import DropDown from './DropDown';
 import NavButton from './NavButton';
 import '../Style/ArtPage.css';
+import '../Style/MainPage.css'
 import Music from "./Music";
 
 

frontend/src/Components/LandingPage.tsx

 import React, { ReactElement} from 'react';
 import NavButton from './NavButton';
 import "../Style/LandingPage.css"
+import "../Style/MainPage.css"
 import FavoriteLink from "./FavoriteLink";
 import LandingpageSvg from "./LandingpageSVG";
 

frontend/src/Style/ArtPage.css

@@ -71,19 +71,3 @@ svg {
     font-family: "Comic Sans MS", serif;
 }
 
-
-.navbutton.left {
-    grid-area: left;
-    margin-right: 10rem;
-}
-.navbutton.right {
-    grid-area: right;
-    margin-left: 10rem;
-}
-
-.navbutton button {
-    font-size: large;
-    width: 5rem;
-    height: 2rem;
-    margin-bottom: 3rem;
-}

frontend/src/Style/LandingPage.css

@@ -34,17 +34,8 @@
     font-size: 15px;
 }
 
-.navbutton.left { 
-    grid-area: left;
-    place-self: center;
-    position: fixed;
-    top: 50%;
-    left: 5%; 
-}
 
-.navbutton.right {
-    grid-area: navbutton-right;
-}
+
 
 .flex2 {
 
@@ -72,12 +63,21 @@
         font-size: large;
     }
 
-    .navbutton.right {
-    }
-
     .navbutton.left {
+        grid-area: left;
+        place-self: center;
+        position: static;
+        top: 90%;
+        left: 10%;
     }
 
+    .navbutton.right {
+        grid-area: right;
+        place-self: center;
+        position: static;
+        top: 90%;
+        right: 5%;
+    }
     .flex2 {
         display: flex;
         flex-direction: row;

frontend/src/Style/MainPage.css

@@ -6,18 +6,13 @@
     background-color: grey;
 }
 
-.navbutton {
-    grid-row: 3 / 4;
-    display: flex;
-}
 
 .navbutton.left {
-    grid-column: 1 / 2;
-    flex-direction: row-reverse;
+    grid-area: left;
     margin-right: 10rem;
 }
 .navbutton.right {
-    grid-column: 3 / 4;
+    grid-area: right;
     margin-left: 10rem;
 }
 
@@ -26,4 +21,20 @@
     width: 5rem;
     height: 2rem;
     margin-bottom: 3rem;
+}
+
+.navbutton.left {
+    grid-area: left;
+    place-self: center;
+    position: fixed;
+    top: 50%;
+    left: 5%;
+}
+
+.navbutton.right {
+    grid-area: right;
+    place-self: center;
+    position: fixed;
+    top: 50%;
+    right: 5%;
 }
\ No newline at end of file