more splash and more banners yay yippee

assets/base.css

@@ -65,7 +65,7 @@ li {
 
 /* here are some @media rules to choose when to display ascii art */
 
-.ascii {
+.ascii, .splash {
     font-family: "mono";
     color: var(--c-fg);
     white-space: pre;
@@ -73,11 +73,24 @@ li {
 }
 
 @media screen and (min-width: 420px) {
-    .ascii-1 {
+    .splash-1 {
+        display: block;
+        visibility: visible
+    }
+}
+
+@media screen and (min-width: 420px) and (max-width: 649px) {
+    .ascii-2 {
         display: block
     }
 }
 
+@media screen and (min-width: 650px) {
+    .ascii-1 {
+        display: block;
+    }
+}
+
 /* styling for the basic border when no js */
 
 body > .nojs {
@@ -151,8 +164,7 @@ main {
 
 @keyframes splash {
     0%, 100% {
-        display: block;
-        position: fixed;
+        visibility: visible;
         color: var(--c-bg);
         top: 50%;
         left: 50%;
@@ -160,12 +172,14 @@ main {
     }
 }
 
-.ascii {
+.splash {
     animation-duration: 1.5s, 1.5s;
     animation-iteration-count: 1, 1;
     animation-timing-function: linear, linear;
     animation-name: appear, splash;
     animation-delay: 3s, 3s;
+    visibility: hidden;
+    position: fixed
 }
 
 @keyframes splash-bg {