up to date with server

src/static/css/index.css

@@ -1,27 +1,12 @@
 * {
     padding:0;
     margin:0;
+    font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
 }
 
 a {
     text-decoration: none;
 }
-a:link {
-    color: red;
-}
-a:visited {
-    color: hotpink;
-}
-a:hover {
-    color: green;
-}
-a:active {
-    color: blue;
-}
-mark {
-    background-color: #900C3F;
-    color: hotpink;
-}
 
 .grid {
     display: grid;
@@ -37,16 +22,20 @@ mark {
     flex-direction:column;
     justify-content:center;
     align-items: center;
-    background-color: #DAF7A6;
+    background-color: #900C3F;
 }
 
-.blessfrey-logo { grid-area: 1 / 3 / 2 / 6; }
+.blessfrey-logo { 
+    grid-area: 1 / 3 / 2 / 6; 
+    padding-top: 5px;
+    color: #FBDAEC;
+}
 
 /* navigation pane */
 
 .nav-row {
     grid-area: 2 / 1 / 3 / 8; 
-    background-color: #FFC300;
+    background-color: #900C3F;
 }
 
 .nav-grid { 
@@ -57,7 +46,7 @@ mark {
     display: grid;
     grid-template-columns: auto repeat(4, 70px) auto;
     grid-template-rows: 90px;
-    grid-column-gap: 8px;
+    grid-column-gap: 17px;
     grid-row-gap: 0px; 
     align-items: end;
     justify-items: center;
@@ -77,6 +66,7 @@ mark {
     flex-direction:column;
     justify-content:flex-end;
     padding-bottom: 3px;
+    position: relative;
 }
 .nav-game { 
     grid-area: 1 / 3 / 2 / 4;
@@ -84,6 +74,7 @@ mark {
     flex-direction:column;
     justify-content:flex-end;
     padding-bottom: 3px;
+    position: relative;
 }
 .nav-diary { 
     grid-area: 1 / 4 / 2 / 5; 
@@ -91,6 +82,7 @@ mark {
     flex-direction: column;
     justify-content: flex-end;
     padding-bottom: 3px;
+    position: relative;
 }
 .nav-presskit { 
     grid-area: 1 / 5 / 2 / 6; 
@@ -98,43 +90,35 @@ mark {
     flex-direction: column;
     justify-content: flex-end;
     padding-bottom: 3px;
+    position: relative;
 }
-
-/* nav buttons */
-
-.button {
-    background-color: #000000;
-    color: #ce50ce;
-    font-size: 16px;
-    border: 2px solid #f7dd8e;
-    height: 48px;
-    width: 70px;
-    text-decoration: none;
-    display: flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items: center;
+.nav-link {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%)
 }
-
-.button:hover {
-    background-color: #723777;
-    color: #ce50ce;
-    font-size: 16px;
-    border: 2px solid #f7dd8e;
-    height: 48px;
-    width: 70px;
-    text-decoration: none;
-    display: flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items: center;
+.nav-link a {
+    font-size: 18px;
+}
+.nav-link a:link {
+    color: #66C7F4;
+}
+.nav-link a:visited {
+    color: #CB9CF2;
+}
+.nav-link a:hover {
+    color: #F9B3D7;
+}
+.nav-link a:active {
+    color: #f463ad;
 }
 
 /* Body */
 
 .body-row {
     grid-area: 3 / 1 / 4 / 8; 
-    background-color: #FF5733;
+    background-color: #080410;
 }
 
 .social {
@@ -144,7 +128,7 @@ mark {
 
 .bg {
     grid-area: 3 / 3 / 4 / 6; 
-    background-color: #C70039;
+    background-color:;
     background-image: url(../img/bg/homeBG.png);
     width: 650px;
     height: 457px;
@@ -168,6 +152,7 @@ mark {
     display: flex;
     flex-direction:column;
     background-color: #581845; 
+    color: #F9B3D7;
     height: 85px;
     overflow-y: scroll; 
     margin-right: 0px;
@@ -180,6 +165,19 @@ mark {
     padding-left: 8px;
 }
 
+.news a:link {
+    color: #F9B3D7;
+}
+.news a:visited {
+    color: #F9B3D7;
+}
+.news a:hover {
+    color: #f463ad;
+}
+.news a:active {
+    color: #f463ad;
+}
+
 .headline {
     margin-right: 0px;
     margin-left: 0px;
@@ -193,6 +191,7 @@ mark {
 
 .footer-content {
     background-color: #581845; 
+    color: #F9B3D7;
     padding-top: 5px;
     text-align: right;
     overflow: hidden;