anchors on demo...but wanna change the grid again

src/static/css/all.css

@@ -49,6 +49,12 @@ h1,h2,h3,img,i {
     margin: auto;
     color: white;
 }
+.code {
+    background-color: transparent;
+}
+.verse {
+    background-color: transparent;
+}
 
 .grid {
     height: auto;

src/static/css/demo.css

@@ -2,7 +2,7 @@
     grid-area: 3 / 1 / 4 / 4; 
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: repeat(6, auto);
+    grid-template-rows: auto auto auto;
     grid-column-gap: 0px;
     grid-row-gap: 2em; 
     color: white
@@ -12,7 +12,7 @@
         text-align: center;
         margin-top: 2em;
     }
-        .controls img { width: 10em; }
+        .box img { width: 10em; }
 
 .demo-game iframe {
     border: 2px solid #df85a5;
@@ -25,9 +25,35 @@
     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; }
-    .story { grid-area: 5 / 1 / 6 / 2; }
-    .characters { grid-area: 6 / 1 / 7 / 2; }
-    .info { grid-area:  7 / 1 / 8 / 2; }
+    .demo { 
+        grid-area: 2 / 1 / 3 / 2; 
+    }
+
+    .box {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 2.5em 42em;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+    }
+        .jump {
+            grid-area: 1 / 1 / 2 / 2;
+            margin: auto;
+            font-size: 2em;
+        }
+        .long { 
+            grid-area: grid-area: 2 / 1 / 3 / 2;
+            height: 44.625em;
+            overflow: hidden;
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(5, auto);
+            grid-row-gap: 50em; 
+        }
+    
+            .splash { grid-area: 1 / 1 / 2 / 2; }
+            .system { grid-area: 2 / 1 / 3 / 2 }
+            .story { grid-area: 3 / 1 / 4 / 2; }
+            .characters { grid-area: 4 / 1 / 5 / 2; }
+            .info { grid-area: 5 / 1 / 6 / 2; 
+                height: 50em;}