footer works; removed unused elements; added some character avis; char css is fine now

src/static/css/char.css

@@ -0,0 +1,4 @@
+.content-grid { 
+    margin: auto;
+    color: white;
+}

src/static/css/demo.css

@@ -13,11 +13,6 @@
         margin-top: 2em;
     }
         .controls img { width: 10em; }
-        .center { 
-            width: 60%;
-            padding: 2em;
-            margin: auto;
-        }
 
 .demo-game iframe {
     border: 2px solid #df85a5;

src/static/css/index.css

@@ -1,8 +1,8 @@
 .content-grid { 
     grid-area: 3 / 1 / 4 / 4; 
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: auto;
+    grid-template-columns: repeat(2, 50%);
+    grid-template-rows: 1fr 5em;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
 }
@@ -14,34 +14,31 @@
             background-position: right;
         }
     .content-right { 
-        grid-area: 1 / 2 / 2 / 3;
+        grid-area:  1 / 2 / 2 / 3;
         background-image: url(../img/prom/runebless.png);
         background-size: contain;/*80% auto;*/
         background-repeat: no-repeat;
         background-position: center;
-.latest, .latest-grid {
-    background-color: #C0AAC0; 
-}
-.latest-grid a, ul, li, b {
-    background-color: #C0AAC0; 
-}
+        }
+    .latest, .latest-grid {
+        background-color: #C0AAC0;
+    border: 2px solid #df85a5; 
+    }
+    .latest-grid a, ul, li, b {
+        background-color: #C0AAC0;
+    border: 2px solid #df85a5; 
+    }
 
-.latest {
-    color: black;
-}
-.latest-grid { 
-    width: 50%;
-    grid-area: 4 / 2 / 5 / 3; 
-    overflow-y: scroll; 
-    margin-right: 0px;
-    margin-left: 5%;
-    margin-top: 3%;
-    margin-bottom: 0px; 
-    padding-top: 4%;
-    padding-right: 1%;
-    padding-bottom: 1%;
-    padding-left: 2%;
-} 
+    .latest {
+    border: 2px solid #df85a5;
+        color: black;
+        overflow-y: scroll; 
+    }
+    .latest-grid { 
+    border: 2px solid #df85a5;
+        width: 50%;
+        grid-area:  2 / 1 / 3 / 3;
+    } 
     .latest-grid a:link {
         color: #305285;
         background-color: #C0AAC0; 
@@ -59,15 +56,10 @@
         background-color: #C0AAC0; 
     }
     .latest-grid ul {
+    border: 2px solid #df85a5;
         list-style-type: none;
     }
     .latest-grid li {
+    border: 2px solid #df85a5;
         padding-left: 5%;
     }
-.footer-content {
-    color: white;
-    padding-top: 5px;
-    text-align: right;
-    overflow: hidden;
-    box-shadow: 0 100vh 0 100vh black;  
-}

src/static/css/me.css

@@ -36,13 +36,15 @@
             .ocs-nav {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+                background-color: #C0AAC0;
+            }
+            .ocs-btn {
+                background-color: #C0AAC0;
             }
             .ocs img {
                 width: 10em;
                 border-radius: 5%;
             }
-            .ocs-btn {
-            }
 
     .content-right h1, h2, ul, li, b, i, p, img, a {
         background-color: transparent;