demo

src/static/css/demo.css

@@ -122,7 +122,7 @@ a {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(6, auto);
     grid-column-gap: 0px;
-    grid-row-gap: 0px; 
+    grid-row-gap: 2em; 
     color: white
 }
     .banner { 
@@ -130,7 +130,24 @@ a {
         text-align: center;
         margin-top: 2em;
     }
-        .banner img { width: 15em; }
+        .controls img { width: 10em; }
+        .center { 
+            width: 60%;
+            padding: 2em;
+            margin: auto;
+        }
+
+.demo-game iframe {
+    border: 2px solid #df85a5;
+    padding: 10px;
+    display: block;
+    margin: auto;
+}
+.demo-intro {
+    width: 40%;
+    padding: 10px;
+    margin: auto;
+}
     .demo { grid-area: 2 / 1 / 3 / 2; }
     .controls { grid-area: 3 / 1 / 4 / 2; }
     .system { grid-area: 4 / 1 / 5 / 2; }
@@ -138,10 +155,21 @@ a {
     .characters { grid-area: 6 / 1 / 7 / 2; }
     .info { grid-area:  7 / 1 / 8 / 2; }
 
-.footer-content {
-    color: white;
-    padding-top: 5px;
+/*.footer-content {
     text-align: right;
-    overflow: hidden;
-    box-shadow: 0 100vh 0 100vh black;  
+    color: white;
+
+    padding: 3em;
+    background-color: gray;
+    position: fixed;
+    bottom: 0em;
+}*/
+
+footer {    
+    padding: 3em;
+    background-color: lightblue;
+    bottom: 0;
+    width: 100%;
+    height: 2.5rem; 
 }
+